FullCalendar jQuery 行事曆套件，能透過 Ajax 來取得資料配置成為行事曆，讓使用都以點擊或是拖曳的方式觸發事件。這套件除了可以快速產生相關的架構外，主要還有自適應的效果，對於網站開發是個很方便的套件，可大幅減少開發的時間。
20171214 / FullCalendar 現在的最新版本為 3.7.0，如果使用上 fullcalendar.css 與 fullcalendar.min.js 外 最重要的就是 Moment.js (官方中文、英文) 這支 JavaScript 日期處理類庫的插件，如果少了他無法使用 FullCalendar ，另外 CDN 也有 zh-tw.js 可以直接將外觀改成繁中的語系，另外也有其他的語系可以使用。
1-基本運用 Basic Usage
1 2 3 4 | https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.css https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.js https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/locale/zh-tw.js |
1 | $("#calendar").fullCalendar({}); |
See the Pen FullCalendar-jQuery-行事曆套件 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1-1-選項 Options
FullCalendar 的大多數文檔描述了影響日曆的外觀或行為的選項。選項通常在日曆初始化時設置，如下所示：
1 2 3 | $('#calendar').fullCalendar({ weekends: false // will hide Saturdays and Sundays }); |
See the Pen FullCalendar-jQuery-行事曆套件-選項-顯示週末 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1-2-回呼函式/回調函數 Callbacks
jQuery-Callback 的說明
回調函數和配置有幾分相似，執行某些操作的時候會觸發回調。下面的例子中，用戶點擊日程表的某一天，會彈出一個警告提示：
1 2 3 4 5 | $('#calendar').fullCalendar({ dayClick: function() { alert('a day has been clicked!'); } }); |
See the Pen FullCalendar-jQuery-行事曆套件-選項-回呼函式/回調函數 Callbacks by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1.3-方法 Methods
「方法」是用來操作日程表的，直接使用fullCalendar命令可以調用方法，下面的例子會讓日程表切換到下一個月/周/日視圖：
2-其他參數
2-1-普通顯示設置
2-1-1-header
1 2 3 4 5 | header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' } |
See the Pen FullCalendar-jQuery-行事曆套件-選項-header by Jimmy_Wu (@Jimmy_Wu) on CodePen.
2-1-2-weekends
是否顯示假日
weekends: false
2-1-3-editable
是否可編輯，預設為 true (測試預設並不是 true 而是 false)
editable: true,
2-1-4-darggable
是否可拖曳，預設為 true
darggable: true,
2-1-5-defaultView
預設顯示的模式，值有 “month”(月)、”basicWeek”(週-沒帶時程分格式)、”basicDay”(日-沒帶時程分格式)、agendaWeek(週-有帶時程分格式)、agendaDay(日-有帶時程分格式), 預設值：”month”
defaultView: "agendaDay",
2-1-6-buttonText
自定按鈕與日期中文化新舊版都可用，但新版 locale/zh-tw.js 需註解成預設英文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | buttonText:{ prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: '周', day: '日' }, dayNamesShort:['周日', '周一', '周二', '周三','周四', '周五', '周六'], monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'], titleFormat:{ month: 'MMMM yyyy', week: "MMM d[yyyy]{'—'[ MMM] d yyyy}", day: 'dddd, MMM d, yyyy' }, |
2-1-6-height
height 指定對象 id=”calendar” 內元素於指定高度值內，超過使用溢位 overflow-y: scroll;
height: 600,
2-1-7-aspectRatio
設定行事曆高度比率 (比率越小，高度越高)，超過使用溢位 overflow-y: scroll;
aspectRatio: 3,
2-1-8-themeSystem
使用bootstrap3風格
themeSystem: 'bootstrap3',
2-1-9-businessHours
強調日曆中的某些時間段，比如默認情況下，工作日週一-週五上午9點-下午5點。
工作日會白色區塊，非工作日會是灰色區塊
1 2 3 4 5 | businessHours: { dow: [ 1, 2, 3, 4, ], // 週一 - 週四 start: '10:00', // 上午10點開始 end: '18:00', // 下午18點結束 }, |
2-1-10-events
allDay
是否為整日事件，值為 true / false
strat
事件的開始日期時間
end
事件的結整日期時間
color
背景和邊框顏色
borderColor
邊框顏色
BackgroundColor
事件的背景顏色
textColor
事件的文字顏色
title
事件顯示的標題
url
使用者按下事件時要開啟的 url
editable
是否可拖曳
事件寫法版本不同，原本格式 start: ‘2017-12-15 2:00’ 新版不吃要加二十四時制，前面要加 T
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | events: [ { title: '例行會議', start: '2017-12-15T12:00', allDay : false }, { title: '日本旅遊', start: '2017-12-28', end: '2017-12-31' }, { // 使用變數 date = new Date() 時間物件來及用現在時間的年月，而日自訂為 25 日， title: '25號連到 Google 查看最新新聞', start: new Date(y, m, 25), borderColor:'red', backgroundColor: 'red', color: '#fff', url: 'https://www.google.com.tw/' } ] |
1 2 3 4 | var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); |
See the Pen FullCalendar-jQuery-行事曆套件-其他設定混合使用 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
資料來源
fullcalendar 官方英文
helloweba-FullCalendar搜尋結果
helloweba-FullCalendar日曆插件說明文檔 (2013年09月15日)
helloweba-最新FullCalendar中文文檔 (2017年10月19日)
[Day 21]FullCalendar – 輕鬆完成專業級行事曆
codepen-FullCalendarの日本語化やオプションいろいろ (語系日文化)