fullcalendar插件用法
Posted 笑笑~上善若水
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了fullcalendar插件用法相关的知识,希望对你有一定的参考价值。
管理系统里面采用了fullcalendar插件,遇到几个问题,总结下:
官方英文文档:https://fullcalendar.io/docs/
中文文档:https://www.helloweba.net/javascript/445.html
初始化模板:
HTML: <div id=\'calendarSetting\'> <div class="datetime-picker"></div> </div>
<script> $(function () { // 打钩按钮的节点(这个就是下图背景蓝色的日程,被我用CSS改成打√的) var htmlnode = \'<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable"><div class="fc-content node-height"><span class="fc-title circle-position"> </span></div><div class="fc-resizer fc-end-resizer"></div></a>\'; // fullcalendar日程插件初始化 $(\'#calendarSetting\').fullCalendar({ // 头部定义 header: { left: \'\', center: \'prev, today ,next,checkbox\', right: \'\' }, // 日历高度 height: 650, // 默认日期 defaultDate: defaultDate, // 时间显示模板 views: { month: { titleFormat: \'YYYY, MM, DD\' } }, // 每周的第一天从星期一开始 firstDay: 1, navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events // defaultDate: \'2018-02-12\',这个可以设置一开始进来显示的默认日期 selectable: true, selectHelper: true, // 设置中文 monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], buttonText: { today: \'本月\', month: \'月\', week: \'周\', day: \'日\', prev: \'上一月\', next: \'下一月\' }, // 当点击日历中的某一日程(事件)时,触发此操作,原来没有的日程,点上去,触发这个 dayClick: function (date, jsEvent, view) { var $this = $(this); // 判断是否有打钩图案按钮节点 var flag = $this.children(\'.fc-day-grid-event\').length; // 如果有,则取消该按钮节点,并且删除要提交的对应数据 var clickDate = new Date(date); var year = clickDate.getFullYear(); var month = (clickDate.getMonth() + 1) < 10 ? "0" + (clickDate.getMonth() + 1) : (clickDate.getMonth() + 1); var day = clickDate.getDate() < 10 ? "0" + clickDate.getDate() : clickDate.getDate(); var submitDate = year + "-" + month + "-" + day; if (flag) { $(this).empty(); AJAX请求 } else { // 如果没有,添加图案节点,并且将日期添加到数组 $(this).append(htmlnode); AJAX请求 } console.log(submitDate); }, // 取消原来保存的数据,后台获取来的数据,显示上来,想取消的,触发这个 eventClick: function (event, jsEvent, view) { // 将原数据库有的日程日期取消后,放到取消的数组里面,最后作对比 // console.log(event); var submitDate = event.start._i; AJAX请求 // 取消原来保存的数据图标 $(jsEvent.currentTarget).parent().empty(); }, editable: false, // 初始化数据,可以放这个地方,也可以放下面的地方 // events: evnetsData, }) // 初始化数据 $(\'#calendarSetting\').fullCalendar(\'addEventSource\', evnetsData); // 上一个月按钮点击事件 $(\'.fc-prev-button\').on(\'click\', function () { AJAX请求 }); // 本月按钮点击事件 $(\'.fc-today-button\').on(\'click\', function () { AJAX请求 }); // 下一个月按钮点击事件 $(\'.fc-next-button\').on(\'click\', function () { AJAX请求 }); } function ajaxDate(submitDate,remove){ $.ajax({ url: "jf/vacationsSettings/o_doSave?day=" + submitDate + remove , type: "GET", processData: false, contentType: false, dataType: \'json\', async:false, success: function (json) { if (json.statusCode == \'200\') { alertMsg.correct(\'您的数据提交成功!\') } else { alertMsg.warn(json.message); } }, error: function (e) { alertMsg.warn(e); } }); } // 选中的背景 颜色图标 function chooseWeekend(node) { $(node).append(htmlnode); } // 取消被选中的背景颜色,图标 function unchooseWeekend(node) { $(node).empty(); } // 数据遍历改变成插件所需要格式 function traversalData(dataListArray){ var newDataListArray = [] $.each(dataListArray, function (i,item) { newDataListArray[i] = {}; newDataListArray[i]["start"] = item; }); return newDataListArray; };
//上个月,下个月,本月,我原来用addEventSource去追加数据,发现数据会重复,图标会重叠。后来才知道
//先删除数据,再追加数据,再获取。这三个帮我很大的忙 ,使用在AJAX请求完成数据后使用
$(\'#calendarSetting\').fullCalendar( \'removeEventSource\', evnetsData);
$(\'#calendarSetting\').fullCalendar( \'addEventSource\', evnetsData);
$(\'#calendarSetting\').fullCalendar( \'refetchEvents\' );
}) </script>
①插件显示是这样的:
只能通过改变样式,改成设计稿的。
②上个月下个月,我是直接获取按钮的的类名,去写点击事件:
// 上一个月按钮点击事件
$(\'.fc-prev-button\').on(\'click\', function () {});
// 本月按钮点击事件
$(\'.fc-today-button\').on(\'click\', function () {});
// 下一个月按钮点击事件
$(\'.fc-next-button\').on(\'click\', function () {});
③自己点的点击事件,那怎么获取到对应的时间呢?
插件提供好的,这样获取点击事件的时间:moment = $(\'#calendarSetting\').fullCalendar(\'getDate\')
以上是关于fullcalendar插件用法的主要内容,如果未能解决你的问题,请参考以下文章
FullCalendar jQuery 插件 - 设置今天的日期