fullcaledar日曆插件

時間 2019-11-09

標籤 fullcaledar 日曆插件简体版

原文原文鏈接

因公司想作個添加事件的日曆,,找遍插件感受fullcaledar最強大,,並且不少人推薦,故找到最易理解的解釋作筆記javascript

Github地址：https://github.com/fullcalendar/fullcalendarcss

引入依賴的JS和CSS

因爲 FullCalendar 自身是個 JQuery 插件，因此首先要引入：java

<script src='jquery.min.js'></script>

而後是 FullCalendar 的依賴（能夠在FullCalendar的官網下載）：jquery

<link href='fullcalendar.css' rel='stylesheet' /> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script>

FullCalendar還爲咱們提供了國際化的依賴（下載的FullCalendar目錄中包含），目錄下的lang文件夾也須要拷貝到和當前資源同一目錄下：git

<script src='lang-all.js'></script

最後是Bootstrap的依賴：github

<link href='bootstrap.min.css' rel='stylesheet' /> <script src='bootstrap.min.js'></script>

構建index.html

新建 HTML File 引入相關文件：web

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href='fullcalendar.css' rel='stylesheet' /> <link href='bootstrap.min.css' rel='stylesheet' /> <style> /* 語言選擇 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日曆 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 參數 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 參數 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } </style> </head> <body> <div id='top'> Language: <select id='lang-selector'></select> </div> <div id='calendar'></div> </body> <script src='jquery.min.js'></script> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script> <script src='lang-all.js'></script> <script src='bootstrap.min.js'></script> </html>

初始化FullCalendar

JavaScript初始化：bootstrap

<script type="text/javascript"> $(document).ready(function() { //國際化默認值爲'en'，表明使用英文 var initialLangCode = 'en'; //初始化FullCalendar $('#calendar').fullCalendar({ //設置頭部信息，若是不想顯示，能夠設置header爲false header: { //日曆頭部左邊：初始化切換按鈕 left: 'prev,next today', //日曆頭部中間：顯示當前日期信息 center: 'title', //日曆頭部右邊：初始化視圖 right: 'month,agendaWeek,agendaDay' }, //設置是否顯示週六和週日，設爲false則不顯示 weekends: true, //日曆初始化時顯示的日期，月視圖顯示該月，周視圖顯示該周，日視圖顯示該天，和當前日期沒有關係 defaultDate: '2016-06-06', //日程數據 events: [ { title: 'All Day Event', start: '2016-08-11' } ] }); //初始化語言選擇的下拉菜單值 $.each($.fullCalendar.langs, function(langCode) { $('#lang-selector').append( $('<option/>') .attr('value', langCode) .prop('selected', langCode == initialLangCode) .text(langCode) ); }); //當選擇一種語言時觸發 $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); }); </script>

配置完成

咱們能夠看到配置完成後，FullCalendar的雛形也出來了。
app

經常使用屬性設置

FullCalendar中有一些很經常使用的屬性，很是實用。

//月視圖下日曆格子寬度和高度的比例 aspectRatio: 1.35, //月視圖的顯示模式，fixed：固定顯示6周高；liquid：高度隨週數變化；variable: 高度固定 weekMode: 'liquid', //初始化時的默認視圖，month、agendaWeek、agendaDay defaultView: 'month', //agenda視圖下是否顯示all-day allDaySlot: true, //agenda視圖下all-day的顯示文本 allDayText: '全天', //agenda視圖下兩個相鄰時間之間的間隔 slotMinutes: 30, //區分工做時間 businessHours: true, //非all-day時，若是沒有指定結束時間，默認執行120分鐘 defaultEventMinutes: 120, //設置爲true時，若是數據過多超過日曆格子顯示的高度時，多出去的數據不會將格子擠開，而是顯示爲 +...more ，點擊後纔會完整顯示全部的數據 eventLimit: true,

日程數據的設置

咱們能夠設置日程數據的內容來獲得豐富的顯示效果。

{
id  //惟一標識，能夠不填，持久化時編輯數據時使用 title //顯示在日曆上的內容 allDay //標識是否爲全天，能夠不填，調用event.allDay時會自動區分是否爲全天 start //開始的時間，格式爲 yyyy-MM-dd 或 yyyy-MM-dd HH:mm end //結束的時間，能夠不填，格式爲 yyyy-MM-dd 或 yyyy-MM-dd HH:mm url //能夠不填，點擊時跳轉到指定url className //數據的樣式，能夠不填 color //背景和邊框顏色，能夠不填，默認爲#3a87ad backgroundColor //背景顏色，能夠不填，默認爲#3a87ad borderColor //邊框顏色，能夠不填，默認爲#3a87ad textColor //文本顏色,能夠不填，默認爲白色 }

實例

往events中添加一些靜態數據，完整的效果以下。

events: [
            {
                id: 1, title: '這是一個all-day數據', allDay: true, start: '2016-08-11' }, { id: 2, title: '開始時間爲12PM', start: '2016-08-11 12:00' }, { id: 3, title: '給一點顏色', start: '2016-08-11', color: 'red' }, { id: 4, title: '使用className:done', start: '2016-08-10 09:00', end: '2016-08-11 18:00', color: 'blue', className: 'done' }, { id: 5, title: '使用className:doing', start: '2016-08-11 09:00', end: '2016-08-12 18:00', color: 'green', className: 'doing' }, { id: 6, title: '使用URL和字體顏色', start: '2016-08-11', color: 'pink', url: 'http://flovel.xyz', className: 'doing', textColor: 'black' }, { id: 7, title: '使用backgroundColor和borderColor', start: '2016-08-11 09:00', end: '2016-08-12 18:00', backgroundColor: 'gray', borderColor: 'red', className: 'done' }, ]

各類事件

1. 鼠標點擊事件

（1）經過鼠標點擊日曆某一天觸發dayClick的callback，參數date爲點擊的日期或時間，經常使用於爲某一天或爲某一時刻添加日程，具體方法以下（使用Console日誌打印點擊的日期或時間）：

dayClick : function( date ) { //do something here... console.log('dayClick觸發的時間爲：', date.format()); // ... },

在month視圖下點擊時：

在agenda視圖下點擊時會帶上對應的時間：

（2）經過鼠標點擊日曆某一Event數據觸發eventClick的callback，參數event表示被點擊的Event，經常使用於編輯某一Event數據，具體方法以下（使用Console日誌打印點擊的Event數據基本信息）：

eventClick : function( event ){ //do something here... console.log('eventClick中選中Event的id屬性值爲：', event.id); console.log('eventClick中選中Event的title屬性值爲：', event.title); console.log('eventClick中選中Event的start屬性值爲：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中選中Event的end屬性值爲：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中選中Event的color屬性值爲：', event.color); console.log('eventClick中選中Event的className屬性值爲：', event.className); // ... },

2. 鼠標懸浮事件

經過鼠標通過或者離開日曆某一天觸發callback，參數event表示鼠標通過或離開的Event，經常使用來經過一些懸浮DIV展現Event數據的基本信息，具體方法以下（使用Console日誌打印事件的觸發過程）：

（1）鼠標通過

eventMouseover : function( event ) { //do something here... console.log('鼠標通過 ...'); console.log('eventMouseover被執行，選中Event的title屬性值爲：', event.title); // ... },

（2）鼠標離開

eventMouseout : function( event ) { //do something here... console.log('eventMouseout被執行，選中Event的title屬性值爲：', event.title); console.log('鼠標離開 ...'); // ... },

3. 鼠標選擇事件

經過鼠標點擊或者拖動選擇日曆中的對象會觸發select的callback，參數start表示選擇的開始時間，參數end表示選擇的結束時間，經常使用於快速添加階段性時間的日程，具體方法以下（使用Console日誌打印選擇的開始和結束時間）：

相關的屬性設置：

//設置是否可被單擊或者拖動選擇 selectable: true, //點擊或者拖動選擇時，是否顯示時間範圍的提示信息，該屬性只在agenda視圖裏可用 selectHelper: true, //點擊或者拖動選中以後，點擊日曆外的空白區域是否取消選中狀態 true爲取消 false爲不取消，只有從新選擇時纔會取消 unselectAuto: true,

下面是select的callback方法：

select: function( start, end ){ //do something here... console.log('select觸發的開始時間爲：', start.format()); console.log('select觸發的結束時間爲：', end.format()); // ... },

若是dayClick和select同時存在時，兩個callback都會執行，須要注意。

在month視圖下選擇時：

設置了selectHelper爲true，在agenda視圖下選擇時會帶上對應的時間，Helper會顯示選擇的時間範圍：

4. 鼠標拖動事件

經過鼠標按住拖動某一Event觸發eventDrop的callback，參數event表示被拖動的Event，參數dayDelta表示此次拖動致使Event移動了多少天或時間, 向前爲正數, 向後爲負數，參數revertFunc 用來在提交數據失敗時將剛纔的拖動恢復到原狀，拖動改變日程時間範圍經常使用於快速編輯某一Event的日程時間，具體方法以下（使用Console日誌打印鼠標拖動Event的過程）：

相關的屬性設置：

//Event是否可被拖動或者拖拽 editable: true, //Event被拖動時的不透明度 dragOpacity: 0.5,

下面是eventDrop的callback方法，判斷了month視圖和agenda視圖下不一樣的時間改變：

eventDrop : function( event, dayDelta, revertFunc ) { //do something here... console.log('eventDrop --- start ---'); console.log('eventDrop被執行，Event的title屬性值爲：', event.title); if(dayDelta._days != 0){ console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventDrop被執行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('eventDrop --- end ---'); // ... },

在month視圖下開始拖動，改變的是天數：

開始拖動，能夠看到不透明度發生了變化。

鬆開鼠標，完成拖動。

在agenda視圖下開始拖動，改變的是毫秒數：

Event初始位置。

開始拖動，能夠看到不透明度發生了變化。

鬆開鼠標，完成拖動。

5. 鼠標拖拽事件

經過鼠標按住Event的一側進行拖拽觸發eventResize的callback，參數event表示被拖拽的Event，參數dayDelta表示此次拖拽改變日程結束時間致使Event日程結束時間增長了多少天或時間,，參數revertFunc 用來在提交數據失敗時將剛纔的拖拽恢復到原狀，拖拽改變日程結束時間經常使用於快速編輯某一Event的日程結束時間，具體方法以下（使用Console日誌打印鼠標拖拽Event的過程）：

相關的屬性設置：

//Event是否可被拖動或者拖拽，以前拖動配置過了，此處沒必要配置 editable: true,

下面是eventResize的callback方法，判斷了month視圖和agenda視圖下不一樣的時間改變：

eventResize : function( event, dayDelta, revertFunc ) { //do something here... console.log(' --- start --- eventResize'); console.log('eventResize被執行，Event的title屬性值爲：', event.title); if(dayDelta._days != 0){ console.log('eventResize被執行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventResize被執行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventResize被執行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('--- end --- eventResize'); // ... },

注意：

（1）all-day的Event能夠在month、agendaWeek視圖下向右拖拽改變日程結束時間
（2）非all-day的Event，不能夠在month視圖下拖拽，只能在agenda視圖下向下拖拽改變日程結束時間

在month視圖下開始拖拽，改變的是天數：

在agenda視圖下開始拖動，改變的是毫秒數：

附錄完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href='fullcalendar.css' rel='stylesheet' /> <style> /* 語言選擇 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日曆 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 參數 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 參數 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } </style> </head> <body> <div id='top'> Language: <select id='lang-selector'></select> </div> <div id='calendar'></div> </body> <script src='jquery.min.js'></script> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script> <script src='lang-all.js'></script> <script type="text/javascript"> $(document).ready(function() { var initialLangCode = 'en'; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, weekends: true, weekMode: 'liquid', defaultView: 'month', allDayText: '全天', businessHours: true, defaultEventMinutes: 120, eventLimit: true, dayClick : function( date ) { //do something here... console.log('dayClick觸發的時間爲：', date.format()); // ... }, //設置是否可被單擊或者拖動選擇 selectable: true, //點擊或者拖動選擇時，是否顯示時間範圍的提示信息，該屬性只在agenda視圖裏可用 selectHelper: true, //點擊或者拖動選中以後，點擊日曆外的空白區域是否取消選中狀態 true爲取消 false爲不取消，只有從新選擇時纔會取消 unselectAuto: true, select: function( start, end ){ //do something here... console.log('select觸發的開始時間爲：', start.format()); console.log('select觸發的結束時間爲：', end.format()); // ... }, eventClick : function( event ){ //do something here... console.log('eventClick中選中Event的id屬性值爲：', event.id); console.log('eventClick中選中Event的title屬性值爲：', event.title); console.log('eventClick中選中Event的start屬性值爲：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中選中Event的end屬性值爲：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中選中Event的color屬性值爲：', event.color); console.log('eventClick中選中Event的className屬性值爲：', event.className); // ... }, eventMouseover : function( event ) { //do something here... console.log('鼠標通過 ...'); console.log('eventMouseover被執行，選中Event的title屬性值爲：', event.title); // ... }, eventMouseout : function( event ) { //do something here... console.log('eventMouseout被執行，選中Event的title屬性值爲：', event.title); console.log('鼠標離開 ...'); // ... }, //Event是否可被拖動或者拖拽 editable: true, //Event被拖動時的不透明度 dragOpacity: 0.5, eventDrop : function( event, dayDelta, revertFunc ) { //do something here... console.log('eventDrop --- start ---'); console.log('eventDrop被執行，Event的title屬性值爲：', event.title); if(dayDelta._days != 0){ console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventDrop被執行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventDrop被執行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('eventDrop --- end ---'); // ... }, eventResize : function( event, dayDelta, revertFunc ) { //do something here... console.log(' --- start --- eventResize'); console.log('eventResize被執行，Event的title屬性值爲：', event.title); if(dayDelta._days != 0){ console.log('eventResize被執行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventResize被執行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventResize被執行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('--- end --- eventResize'); // ... }, events: [ { id: 1, title: '這是一個all-day數據', allDay: true, start: '2016-08-11' }, { id: 2, title: '開始時間爲12PM', start: '2016-08-11 12:00' }, { id: 3, title: '給一點顏色', start: '2016-08-11', color: 'red' }, { id: 4, title: '使用className:done', start: '2016-08-10 09:00', end: '2016-08-11 18:00', color: 'blue', className: 'done' }, { id: 5, title: '使用className:doing', start: '2016-08-11 09:00', end: '2016-08-12 18:00', color: 'green', className: 'doing' }, { id: 6, title: '使用URL和字體顏色', start: '2016-08-11', color: 'pink', url: 'http://flovel.xyz', className: 'doing', textColor: 'black' }, { id: 7, title: '使用backgroundColor和borderColor', start: '2016-08-11 09:00', end: '2016-08-12 18:00', backgroundColor: 'gray', borderColor: 'red', className: 'done' }, ] }); //初始化語言選擇的下拉菜單值 $.each($.fullCalendar.langs, function(langCode) { $('#lang-selector').append( $('<option/>') .attr('value', langCode) .prop('selected', langCode == initialLangCode) .text(langCode) ); }); //當選擇一種語言時觸發 $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); }); </script> </html>