fullcaledar日历插件
生活随笔
收集整理的這篇文章主要介紹了
fullcaledar日历插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
因公司想做個添加事件的日歷,,找遍插件感覺fullcaledar最強大,,而且很多人推薦,故找到最易理解的解釋做筆記
Github地址：https://github.com/fullcalendar/fullcalendar
官網地址：http://fullcalendar.io/
引入依賴的JS和CSS
由于 FullCalendar 自身是個 JQuery 插件，所以首先要引入 ：
<script src='jquery.min.js'></script>然后是 FullCalendar 的依賴（可以在FullCalendar的官網下載）：
<link href='fullcalendar.css' rel='stylesheet' /> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script>FullCalendar還為我們提供了國際化的依賴（下載的FullCalendar目錄中包含），目錄下的lang文件夾也需要拷貝到和當前資源同一目錄下：
<script src='lang-all.js'></script最后是Bootstrap的依賴：
<link href='bootstrap.min.css' rel='stylesheet' /> <script src='bootstrap.min.js'></script>構建index.html
新建 HTML File 引入相關文件：
<!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初始化：
<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的雛形也出來了。?
常用屬性設置
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+'天！'); }轉載于:https://www.cnblogs.com/z-e-r-o/p/6668381.html
總結
以上是生活随笔為你收集整理的fullcaledar日历插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WPF自定义控件(1)——仪表盘设计[1
- 下一篇： java final