# fullcalendar
###### tags: `尚未實作但想做`
https://fullcalendar.io/#demos

## 用法

$('#calendar').fullCalendar({
                selectable: true, // 是否可以點選該日期
                select: createForm, // 點選日期執行的 Function
                displayEventEnd: true, // 未知
                businessHours: true, // 未知
                eventLimit: true, // 未知
                ignoreTimezone: false, // 未知
                allDayDefault: true, // 未知
                eventOrder: "-color", // 未知
                timezone: "local", // 未知
                minTime: "09:00:00",
                maxTime: "18:00:00",
                header: { // 未知
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                },
                 // 點選該天的事件執行的 Function
                eventClick: viewEvent,
                 // 取得該天事件資料
                events: "@Url.Action("GetExchangeWorkDayEvents", "Management", null)"
            });           

## Event (事件) 的欄位

    public class Events
    {
        public string id { get; set; }
        public string title { get; set; } //事件名
        public string date { get; set; } //哪天的事件
        public DateTime start { get; set; } //事件開始時間
        public DateTime end { get; set; } //事件結束時間
        public string url { get; set; }

        public string backgroundColor { get; set; }
        public bool overlap {get;set;}
        public string rendering {get;set;}
        public string color {get;set;} //事件的標籤顏色
        public string textColor { get; set; }
        public bool allDay { get; set; } //是否為整日事件(true:不寫時間)
        public string[] data { get; set; }
    }

---

## 直接選擇日期的用法

語法

$('#calendar').fullCalendar('gotoDate', 選擇的日期);

搭配下拉選單或是 datePicker，搭配 datePicker 可以參考[datePicker筆記](https://hackmd.io/4_qS-oGiR1yt2SGtdPvZsA)