fullcaledar日历插件
因公司想做個添加事件的日歷,,找遍插件感覺fullcaledar最強大,,而且很多人推薦,故找到最易理解的解釋做筆記
Github地址：https://github.com/fullcalendar/fullcalendar
官網(wǎng)地址：http://fullcalendar.io/
引入依賴的JS和CSS
由于 FullCalendar 自身是個 JQuery 插件，所以首先要引入 ：
<script src='jquery.min.js'></script>然后是 FullCalendar 的依賴（可以在FullCalendar的官網(wǎng)下載）：
<link href='fullcalendar.css' rel='stylesheet' /> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script>FullCalendar還為我們提供了國際化的依賴（下載的FullCalendar目錄中包含），目錄下的lang文件夾也需要拷貝到和當(dāng)前資源同一目錄下：
<script src='lang-all.js'></script最后是Bootstrap的依賴：
<link href='bootstrap.min.css' rel='stylesheet' /> <script src='bootstrap.min.js'></script>構(gòu)建index.html
新建 HTML File 引入相關(guān)文件：
<!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 參數(shù) className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 參數(shù) 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({ //設(shè)置頭部信息，如果不想顯示，可以設(shè)置header為false header: { //日歷頭部左邊：初始化切換按鈕 left: 'prev,next today', //日歷頭部中間：顯示當(dāng)前日期信息 center: 'title', //日歷頭部右邊：初始化視圖 right: 'month,agendaWeek,agendaDay' }, //設(shè)置是否顯示周六和周日，設(shè)為false則不顯示 weekends: true, //日歷初始化時顯示的日期，月視圖顯示該月，周視圖顯示該周，日視圖顯示該天，和當(dāng)前日期沒有關(guān)系 defaultDate: '2016-06-06', //日程數(shù)據(jù) 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) ); }); //當(dāng)選擇一種語言時觸發(fā) $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); }); </script>配置完成
我們可以看到配置完成后，FullCalendar的雛形也出來了。?
常用屬性設(shè)置
FullCalendar中有一些很常用的屬性，非常實用。
//月視圖下日歷格子寬度和高度的比例 aspectRatio: 1.35, //月視圖的顯示模式，fixed：固定顯示6周高；liquid：高度隨周數(shù)變化；variable: 高度固定 weekMode: 'liquid', //初始化時的默認視圖，month、agendaWeek、agendaDay defaultView: 'month', //agenda視圖下是否顯示all-day allDaySlot: true, //agenda視圖下all-day的顯示文本 allDayText: '全天', //agenda視圖下兩個相鄰時間之間的間隔 slotMinutes: 30, //區(qū)分工作時間 businessHours: true, //非all-day時，如果沒有指定結(jié)束時間，默認執(zhí)行120分鐘 defaultEventMinutes: 120, //設(shè)置為true時，如果數(shù)據(jù)過多超過日歷格子顯示的高度時，多出去的數(shù)據(jù)不會將格子擠開，而是顯示為 +...more ，點擊后才會完整顯示所有的數(shù)據(jù) eventLimit: true,日程數(shù)據(jù)的設(shè)置
我們可以設(shè)置日程數(shù)據(jù)的內(nèi)容來得到豐富的顯示效果。
{ id //唯一標(biāo)識，可以不填，持久化時編輯數(shù)據(jù)時使用 title //顯示在日歷上的內(nèi)容 allDay //標(biāo)識是否為全天，可以不填，調(diào)用event.allDay時會自動區(qū)分是否為全天 start //開始的時間，格式為 yyyy-MM-dd 或 yyyy-MM-dd HH:mm end //結(jié)束的時間，可以不填，格式為 yyyy-MM-dd 或 yyyy-MM-dd HH:mm url //可以不填，點擊時跳轉(zhuǎn)到指定url className //數(shù)據(jù)的樣式，可以不填 color //背景和邊框顏色，可以不填，默認為#3a87ad backgroundColor //背景顏色，可以不填，默認為#3a87ad borderColor //邊框顏色，可以不填，默認為#3a87ad textColor //文本顏色,可以不填，默認為白色 }實例
往events中添加一些靜態(tài)數(shù)據(jù)，完整的效果如下。
events: [{id: 1,title: '這是一個all-day數(shù)據(jù)',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. 鼠標(biāo)點擊事件
（1）通過鼠標(biāo)點擊日歷某一天觸發(fā)dayClick的callback，參數(shù)date為點擊的日期或時間，常用于為某一天或為某一時刻添加日程，具體方法如下（使用Console日志打印點擊的日期或時間） ：
dayClick : function( date ) {//do something here...console.log('dayClick觸發(fā)的時間為：', date.format());// ... },?
在month視圖下點擊時：
在agenda視圖下點擊時會帶上對應(yīng)的時間：
（2）通過鼠標(biāo)點擊日歷某一Event數(shù)據(jù)觸發(fā)eventClick的callback，參數(shù)event表示被點擊的Event，常用于編輯某一Event數(shù)據(jù)，具體方法如下（使用Console日志打印點擊的Event數(shù)據(jù)基本信息） ：
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. 鼠標(biāo)懸浮事件
通過鼠標(biāo)經(jīng)過或者離開日歷某一天觸發(fā)callback，參數(shù)event表示鼠標(biāo)經(jīng)過或離開的Event，常用來通過一些懸浮DIV展示Event數(shù)據(jù)的基本信息，具體方法如下（使用Console日志打印事件的觸發(fā)過程） ：
（1）鼠標(biāo)經(jīng)過
eventMouseover : function( event ) {//do something here...console.log('鼠標(biāo)經(jīng)過 ...');console.log('eventMouseover被執(zhí)行，選中Event的title屬性值為：', event.title);// ... },?
（2）鼠標(biāo)離開
eventMouseout : function( event ) {//do something here...console.log('eventMouseout被執(zhí)行，選中Event的title屬性值為：', event.title);console.log('鼠標(biāo)離開 ...');// ... },?
3. 鼠標(biāo)選擇事件
通過鼠標(biāo)點擊或者拖動選擇日歷中的對象會觸發(fā)select的callback，參數(shù)start表示選擇的開始時間，參數(shù)end表示選擇的結(jié)束時間，常用于快速添加階段性時間的日程，具體方法如下（使用Console日志打印選擇的開始和結(jié)束時間） ：
相關(guān)的屬性設(shè)置：
//設(shè)置是否可被單擊或者拖動選擇 selectable: true, //點擊或者拖動選擇時，是否顯示時間范圍的提示信息，該屬性只在agenda視圖里可用 selectHelper: true, //點擊或者拖動選中之后，點擊日歷外的空白區(qū)域是否取消選中狀態(tài) true為取消 false為不取消，只有重新選擇時才會取消 unselectAuto: true,下面是select的callback方法：
select: function( start, end ){//do something here...console.log('select觸發(fā)的開始時間為：', start.format());console.log('select觸發(fā)的結(jié)束時間為：', end.format());// ... },?
如果dayClick和select同時存在時，兩個callback都會執(zhí)行，需要注意。
在month視圖下選擇時：
設(shè)置了selectHelper為true，在agenda視圖下選擇時會帶上對應(yīng)的時間，Helper會顯示選擇的時間范圍：
4. 鼠標(biāo)拖動事件
通過鼠標(biāo)按住拖動某一Event觸發(fā)eventDrop的callback，參數(shù)event表示被拖動的Event，參數(shù)dayDelta表示這次拖動導(dǎo)致Event移動了多少天或時間, 向前為正數(shù), 向后為負數(shù)，參數(shù)revertFunc 用來在提交數(shù)據(jù)失敗時將剛才的拖動恢復(fù)到原狀，拖動改變?nèi)粘虝r間范圍常用于快速編輯某一Event的日程時間，具體方法如下（使用Console日志打印鼠標(biāo)拖動Event的過程） ：
相關(guān)的屬性設(shè)置：
//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被執(zhí)行，Event的title屬性值為：', event.title);if(dayDelta._days != 0){ console.log('eventDrop被執(zhí)行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventDrop被執(zhí)行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventDrop被執(zhí)行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('eventDrop --- end ---'); // ... },在month視圖下開始拖動，改變的是天數(shù)：
開始拖動，可以看到不透明度發(fā)生了變化。
松開鼠標(biāo)，完成拖動。
在agenda視圖下開始拖動，改變的是毫秒數(shù)：
Event初始位置。
開始拖動，可以看到不透明度發(fā)生了變化。
松開鼠標(biāo)，完成拖動。
5. 鼠標(biāo)拖拽事件
通過鼠標(biāo)按住Event的一側(cè)進行拖拽觸發(fā)eventResize的callback，參數(shù)event表示被拖拽的Event，參數(shù)dayDelta表示這次拖拽改變?nèi)粘探Y(jié)束時間導(dǎo)致Event日程結(jié)束時間增加了多少天或時間,，參數(shù)revertFunc 用來在提交數(shù)據(jù)失敗時將剛才的拖拽恢復(fù)到原狀，拖拽改變?nèi)粘探Y(jié)束時間常用于快速編輯某一Event的日程結(jié)束時間，具體方法如下（使用Console日志打印鼠標(biāo)拖拽Event的過程） ：
相關(guān)的屬性設(shè)置：
//Event是否可被拖動或者拖拽，之前拖動配置過了，此處不必配置 editable: true,?
下面是eventResize的callback方法，判斷了month視圖和agenda視圖下不同的時間改變：
eventResize : function( event, dayDelta, revertFunc ) {//do something here...console.log(' --- start --- eventResize');console.log('eventResize被執(zhí)行，Event的title屬性值為：', event.title);if(dayDelta._days != 0){ console.log('eventResize被執(zhí)行，Event的start和end時間改變了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventResize被執(zhí)行，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventResize被執(zhí)行，Event的start和end時間沒有改變！'); } //revertFunc(); console.log('--- end --- eventResize'); // ... },注意：
（1）all-day的Event可以在month、agendaWeek視圖下向右拖拽改變?nèi)粘探Y(jié)束時間?
（2）非all-day的Event，不可以在month視圖下拖拽，只能在agenda視圖下向下拖拽改變?nèi)粘探Y(jié)束時間
在month視圖下開始拖拽，改變的是天數(shù)：
在agenda視圖下開始拖動，改變的是毫秒數(shù)：
附錄 完整代碼
<!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 參數(shù) className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 參數(shù) 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觸發(fā)的時間為：', date.format()); // ... }, //設(shè)置是否可被單擊或者拖動選擇 selectable: true, //點擊或者拖動選擇時，是否顯示時間范圍的提示信息，該屬性只在agenda視圖里可用 selectHelper: true, //點擊或者拖動選中之后，點擊日歷外的空白區(qū)域是否取消選中狀態(tài) true為取消 false為不取消，只有重新選擇時才會取消 unselectAuto: true, select: function( start, end ){ //do something here... console.log('select觸發(fā)的開始時間為：', start.format()); console.log('select觸發(fā)的結(jié)束時間為：', 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('鼠標(biāo)經(jīng)過 ...'); console.log('eventMouseover被執(zhí)行，選中Event的title屬性值為：', event.title); // ... }, eventMouseout : function( event ) { //do something here... console.log('eventMouseout被執(zhí)行，選中Event的title屬性值為：', event.title); console.log('鼠標(biāo)離開 ...'); // ... }, //Event是否可被拖動或者拖拽 editable: true, //Event被拖動時的不透明度 dragOpacity: 0.5, eventDrop : function( event, dayDelta, revertFunc ) { //do something here... console.log('eventDrop --- start ---'); console.log('eventDrop被執(zhí)行，Event的title屬性值為：', event.title); if(dayDelta._days != 0){ console.log('eventDrop被執(zhí)行，Event的start和end時間改變了：', dayDelta._days+'天！'); }轉(zhuǎn)載于:https://www.cnblogs.com/z-e-r-o/p/6668381.html
總結(jié)
以上是生活随笔為你收集整理的fullcaledar日历插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WPF自定义控件(1)——仪表盘设计[1
- 下一篇： java final