Fullcalendar v5.5.1 设计一个考勤日历插件

前言

最近公司HR项目新增一个考勤日历需求，发现Fullcalendar插件功能齐全，完美支持JQuery、Vue、React 和 Angular，支持TypeScript，开源，并托管在GitHub上。

官方文档：https://fullcalendar.io/

效果

安装

引入依赖文件，当前只展示了主要js，别忘了引入jquery哟

<link href="${webRoot}/css/plugins/fullcalendar/main.min.css" rel="stylesheet">
<link href="${webRoot}/js/plugins/select2/select2.css" rel="stylesheet"><script type='text/javascript' src="${webRoot}/js/plugins/fullcalendar/main.min.js"></script>
<script type='text/javascript' src="${webRoot}/js/plugins/fullcalendar/locales-all.min.js"></script>
<script type='text/javascript' src="${webRoot}/js/plugins/fullcalendar/moment.min.js"></script>
<script type='text/javascript' src="${webRoot}/js/plugins/select2/select2.js"></script>
<script type='text/javascript' src="${webRoot}/js/plugins/validform/js/Validform_v5.3.2.js"></script>

开发

Fullcalendar v5相对以前的版本改动较大

Page = {initialLocaleCode: 'zh-cn',initialDate: '',calendar: {}, //fullcalendar 对象// 初始化ValidatorinitValidator: function () {},// 事件初期化initEvents: function () {// 查询按钮按下事件$(".fn-search").click(Events.searchAction);},// 画面初始化initialize: function () {Page.initialDate = $('#today').val();$(".select2").select2({width: '100%', theme: "lianxin"});var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {headerToolbar: {left: '',center: 'title',right: ''},initialDate: Page.initialDate,locale: Page.initialLocaleCode,contentHeight: 650,buttonIcons: false, // show the prev/next textweekNumbers: false,navLinks: false, // can click day/week names to navigate viewseditable: false,dayMaxEvents: true, // allow "more" link when too many eventseventOverlap: false,eventLimit: true,eventLimitText  : "更多",dayPopoverFormat : "YYYY年M月d日",events: function(arg, callback) {var events = [];$.ajax({url: webRoot + "/system/attendManage/attendPerson/searchAction.json",data: {attendCycle: $("#attendCycle").val()},type: "POST",success: function (data) {if(data.success){data.data.forEach(function (item) {let bgc = '#fff';let attendDatetime = moment(parseInt(item.attendDatetime) * 1000).format("YYYY-MM-DD");let title = '';//入职、离职if(item.attendStatus && (item.attendStatus.indexOf('11') != -1 || item.attendStatus.indexOf('10') != -1)) {title += '<div style="display: flex;align-items: center">';title += '<span class="fc-bs" style="background-color: black"></span>';if(item.attendStatus.indexOf('11') != -1) {title += '<span style="color: black;">入职</span>';}if(item.attendStatus.indexOf('10') != -1) {title += '<span style="color: black;">离职</span>';}title += '</div>';}//打卡title += '<div style="font-size: 16px;display: flex;align-items: center">';let dkBGC = '#fff';if(item.isLate === '1' || item.isEarly === '1' || item.isAbsent === '1') {dkBGC = 'red';title += '<span class="fc-bs" style="background-color: red"></span>';if(item.signinTime || item.signoutTime) {title += '<span style="color:red">'+item.signinTime+' -- '+item.signoutTime+'</span>';}else {title += '<span style="color:red"> -- </span>';}}else {title += '<span class="fc-bs" style=""></span>';if(item.signinTime && item.signoutTime) {title += '<span style="color:black">'+item.signinTime+' -- '+item.signoutTime+'</span>';}}title += '</div>';if(item.isLate === '1' || item.isEarly === '1' || item.isAbsent === '1') {let content1 = '';if(item.isLate === '1') {//迟到bgc = '#f5d32d';content1 += '<span style="color:'+dkBGC+';padding-left: 20;">迟到</span>';}if(item.isEarly === '1') {//早退bgc = '#f5d32d';content1 += '<span style="color:'+dkBGC+';padding-left: 20;">早退</span>';}if(item.isAbsent === '1') {//旷工bgc = '#f9d9eb';if(item.absentReason === '1') {content1 += '<span style="color:'+dkBGC+';padding-left: 20;">当天无打卡记录</span>';}else if(item.absentReason === '2') {content1 += '<span style="color:'+dkBGC+';padding-left: 20;;">当天仅一条打卡记录</span>';}else if(item.absentReason === '3') {content1 += '<span style="color:'+dkBGC+';padding-left: 20;">迟到时间过长</span>';}else if(item.absentReason === '4') {content1 += '<span style="color:'+dkBGC+';padding-left: 20;">早退时间过长</span>';}}title += '<div>'+content1+'</div>';}//正常流程  补卡、请假、调休、外出if(item.isSupplement === '1' || item.isLeave === '1' || item.isDayOff === '1' || (item.attendStatus && item.attendStatus.indexOf('14') != -1)) {title += '<div style="display: flex;align-items: center">';title += '<span class="fc-bs" style="background-color: green"></span>';if(item.isSupplement === '1') {title += '<span style="color:green;padding-right:15px;">补卡</span>';}if(item.isLeave === '1') {title += '<span style="color:green;padding-right:15px;">请假</span>';}if(item.isDayOff === '1') {title += '<span style="color:green;padding-right:15px;">调休</span>';}if(item.attendStatus && item.attendStatus.indexOf('14') != -1) {title += '<span style="color:green;padding-right:15px;">外出</span>';}title += '</div>';}events.push({title: title,start: attendDatetime,display: 'background',color: bgc});});//渲染到日历callback(events);}if(Page.loading) {setTimeout(function () {layer.close(Page.loading);}, 1000)}}});},//html内容前置条件，如果没有这一句，自定义的html不生效，必须eventContent: function(arg, createElement) {var italicEl = document.createElement('span');italicEl.innerHTML = arg.event._def.titleitalicEl.className  = 'fc-bg-event-span'var arrayOfDomNodes = [italicEl]return {domNodes: arrayOfDomNodes}}});calendar.render();Page.calendar = calendar;},init: function () {Page.initialize();Page.initEvents();Page.initValidator();}
};
Events = {// 查询数据searchAction: function () {Page.loading = layer.load(0, {shade: false,time: 5*1000});let gotoDate = moment(Page.initialDate, "YYYY-MM-DD").add(parseInt($("#attendCycle").val()), "months").format("YYYY-MM-DD");// Page.calendar.removeAllEvents();Page.calendar.gotoDate(gotoDate);Page.calendar.refetchEvents();},
}
jQuery(document).ready(function () {Page.init();$("body").click(function(e) {var target = $(e.target);});
});
document.onkeydown = function(event) {if(event.keyCode == 13){ //$("#searchForm").hasClass("active") &&// 执行的方法event.preventDefault();$("#searchForm").attr("target", "");//$("#paginator-page").val(1);Events.searchAction();}
}

说明

因为默认的Fullcanlendar的样式比较简单直接，所以一般情况下是需要改写样式的。

其他文档

最新版的中文文档相对较少，可以参考其他以前版本的资料：

$('#calendar').fullCalendar({/*设置日历头部信息，如果设置为false，则不显示头部信息。* 包括left,center,right左中右三个位置都可以对应一下配置* title:显示当前月份/周、日信息* prev:用于切换到上一月/周/日视图的按钮* next:用于切换到下一月/周/日视图的按钮* prevYear：用于切换到上一年视图的按钮* nextYear：用于切换到下一年视图的按钮* */header:{left: '',center: 'Fullcanlendar示例demo',right: 'today prev,next'},theme:false,//如果设置为true，则需要加载jquery ui相关css和js文件,默认值为falsefirstDay:1,//设置一周中显示的第一天是哪天，周日是0，周一是1，类推isRTL:false,//设置为ture时则日历从右往左显示weekends:true,//是否显示周末，设为false则不显示周六和周日。默认值为truehiddenDays:[],//隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。weekMode:'fixed',//在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定weekNumbers:false,//是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。weekNumberCalculation:'iso',//周次的显示格式。//height:600,//设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。//contentHeight://设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。aspectRatio:1.35,//设置日历单元格宽度与高度的比例。handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。render:function(view){console.log('render',view)},//method,绑定日历到id上。$('#id').fullCalendar('render');destroy:function(){},weekNumbers : false,     //是否在视图左边显示这是第多少周，默认falseeventLimit: true,       //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数viewRender : function(view,element){//在视图被渲染时触发（切换视图也触发） 参数view为视图对象，参数element为Jquery的视图Dom},dayRender : function(date, cell){//日期格式Render钩子函数（我没理解清楚）console.log("↓↓↓dayRender↓↓↓");console.log(date);console.log(cell);},windowResize : function(){//浏览器窗体变化时触发console.log("---windowResize---");},allDayText : "全天",            //自定义全天视图的名称slotDuration : "01:00:00",      //一格时间槽代表多长时间，默认00:30:00（30分钟）slotLabelFormat : "H(:mm)a",    //日期视图左边那一列显示的每一格日期时间格式slotLabelInterval : "02:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)snapDuration : "05:00:00",      //其实就是动态创建一个日程时，默认创建多长的时间块slotEventOverlap : false,       //相同时间段的多个日程视觉上是否允许重叠，默认true允许noEventsMessage : "L没数据啊",   //listview视图下，无数据时显示提示defaultDate  : '2018-09-10',    //默认显示那一天的日期视图getDates(true)nowIndicator : true,            //周/日视图中显示今天当前时间点（以红线标记），默认false不显示monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],       //同理monthNamesdayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  //同理monthNamesShortweekNumberTitle : "周",         //周的国际化,默认为"W"eventLimitText  : "更多",       //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）dayPopoverFormat : "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用navLinks : true,                // “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果dayClick: function(date, jsEvent, view) {//空白的日期区，单击时触发console.log("↓↓↓dayClick↓↓↓");console.log('Clicked on: ' + date.format());console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);console.log('Current view: ' + view.name);//$(this).css('background-color', 'red');},eventClick: function(calEvent, jsEvent, view) {//日程区块，单击时触发console.log(jsEvent.target)alert(jsEvent.target.innerHTML)console.log("↓↓↓eventClick↓↓↓");console.log('Event: ' + calEvent.title);console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);console.log('Current view: ' + view.name);return false;  //return false可以阻止点击后续事件发生（比如event中的url跳转事件）},eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发console.log(jsEvent)console.log(calEvent.start._i)$('.hover-dateStr').html(calEvent.start._i)console.log(jsEvent.pageY,jsEvent.pageX)$('.hover-container').removeClass('none').animate({'top':jsEvent.pageY,'left':jsEvent.pageX})if(!canRun){// 判断是否已空闲，如果在执行中，则直接returnreturn;}},eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发$('.hover-container').addClass('none')},selectable: false,           //允许用户可以长按鼠标选择多个区域(比如月视图，可以选中多天；日视图可以选中多个小时)，默认false不能选择多区域的selectHelper: true,         //接selectable，周/日视图在选择时是否预先画出“日程区块”的样式出来unselectAuto : true,        //是否点击页面上的其他地方会导致当前的选择被清除，默认trueunselectCancel : "",        //一种方法来指定元素，会忽略unselectauto选项，默认''selectOverlap : true,       //确定用户是否被允许选择被事件占用的时间段，默认true可占用时间段selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择console.log("↓↓↓selectConstraint↓↓↓");console.log("start:"+selectInfo.start+"|end:"+selectInfo.end+"|resourceId:"+selectInfo.resourceId);return true;},select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发},unselect : function(view, jsEvent){//选择操作取消时触发console.log("↓↓↓unselect↓↓↓");console.log("view:"+view);},lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的defaultTimedEventDuration : "02:00:00",     //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00defaultAllDayEventDuration : { days: 1 },  //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）loading : function(isLoading, view){ //视图数据加载中、加载完成触发console.log("↓↓↓loading↓↓↓");if(isLoading == true){console.log("view:"+view+",开始加载");}else if(isLoading == false){console.log("view:"+view+",加载完成");}else{console.log("view:"+view+",除非天塌下来否则不会进这个分支");}},eventOrder : "title",           //多个相同的日程数据排序方式，String / Array / Function, 默认值: "title"eventRender : function(event, element, view) {          //当Event对象开始渲染时触发console.log("eventRender():"+event.title);},eventAfterAllRender : function(view){console.log("eventAfterAllRender();");},   //当所有Event对象渲染完成时触发editable: true,                 //支持Event日程拖动修改，默认falseeventStartEditable : true,      //Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTimeeventDurationEditable : false,  //Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽dragOpacity:0.2,                //拖拽时不透明度，0.0~1.0之间，数字越小越透明dragScroll : true,              //是否在拖拽时自动移动容器，默认trueeventOverlap : true,            //拖拽时是否重叠eventConstraint : {     //限制拖拽拖放的位置（即限制有些地方拖不进去）：an event ID, "businessHours", objectstart: '10:00',     // a start time (10am in this example)end: '18:00',       // an end time (6pm in this example)dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday)  (Monday-Thursday in this example)},longPressDelay : 1000,  //面向可touch设备（如移动设备），长按多少毫秒即可拖动,默认1000毫秒（1S）eventDragStart : function(event, jsEvent, ui, view){    //日程开始拖拽时触发console.log("eventDragStart():"+event.title);},eventDragStop : function(event, jsEvent, ui, view){     //日程拖拽停止时触发console.log("eventDragStop():"+event.title);},eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){  //日程拖拽停止并且已经拖拽到其它位置了console.log("eventDrop():"+event.title);},eventResizeStart : function( event, jsEvent, ui, view ) {       //日程大小调整开始时触发console.log("eventResizeStart():"+event.title);},eventResizeStop : function(event, jsEvent, ui, view){           //日程大小调整停止时触发console.log("eventResizeStop():"+event.title);},eventResize : function(event, delta, revertFunc, jsEvent, ui, view){    //日程大小调整完成并已经执行更新时触发console.log("eventResize():"+event.title);},events:[{"time": "9:20--18:20","antualTime":"9:40--18:40","start": "2018-09-01"},{"time": "9:40--18:40","antualTime":"9:40--18:40","start": "2018-09-02"}]
});

FullCalendar提供了很多日程事件的属性设置、方法调用以及回调函数，方便开发者快速掌握FullCalendar。

Event Object

Event Object 是一个 js 对象，存储日历表的日程事件信息，支持以下属性：

属性	说明
id	string 或者 int 类型，事件的唯一标识。重复事件的不同实例应该都具有相同的ID。
title	String，必选，事件名称。
allDay	布尔型，`true`或`false`，可选项。事件是否发生在特定的时间。该属性影响是否显示事件的时间。此外，在议程视图中，确定是否显示在“全天”部分。
start	事件开始日期/时间，必选。格式为ISO8601字符串或UNIX时间戳
end	事件结束日期/时间，可选。格式为ISO8601字符串或UNIX时间戳
url	事件链接地址，字符串，可选。当单击事件的时候会跳转到对应的url。
className	string 或者 Array 类型，可选。一个css类（或者一组），附加到事件的 DOM 元素上。
editable	`true`或`false`，可选。只针对当前的单个事件，其他事件不受影响。
startEditable	`true`或`false`，可选。覆盖当前事件的`eventStartEditable`选项
durationEditable	`true`或`false`，可选。覆盖当前事件的`eventDurationEditable`选项
resourceEditable	`true`或`false`，可选。覆盖当前事件的 `eventResourceEditable`选项
rendering	允许渲染事件，如背景色等。可以为空，也可以是`"background"`, or`"inverse-background"`
overlap	`true`或`false`，可选。覆盖当前事件的`eventOverlap`选项。如果设置为`false`，则阻止此事件被拖动/调整为其他事件。还可以防止其他事件在此事件中被拖动/调整大小。
constraint	事件id，"businessHours"，对象，可选。覆盖当前事件的`eventConstraint`选项。
source	Event Source Object事件源
color	和 eventColor 作用一样，设置事件的背景色和边框。
backgroundColor	和 eventBackgroundColor 作用一样，设置事件的背景色。
borderColor	和 eventBorderColor 作用一样，设置事件的边框。
textColor	和 eventTextColor 作用一样，设置事件的文字颜色

除上述属性外，你还可以自定义非标准的属性字段，FullCalendar不会修改或删除这些字段。

Event Source Object

"event source"是Fullcalendar的事件数据源events，可以是你定义的一个数组，一个函数，一个返回json的接口，或者google calendar。

数组类型：

{events: [{title: 'Event1',start: '2011-04-04'},{title: 'Event2',start: '2011-05-05'}// etc...],color: 'yellow',   // an option!textColor: 'black' // an option!
}

函数：

{events: function(start, end, timezone, callback) {// ...},color: 'yellow',   // an option!textColor: 'black' // an option!
}

json数据：

{url: '/myfeed.php',color: 'yellow',   // an option!textColor: 'black' // an option!
}

Events事件源提供了很多属性可以设置：

属性	说明
id	当前事件源的id。可选，见getEventSourceById.
color	设置事件对象的color（颜色）属性。
backgroundColor	设置事件对象的backgroundColor（背景色）属性。
borderColor	设置事件对象的borderColor（边框色）属性。
textColor	设置事件对象的textColor（文本色）属性。
className	设置事件对象的className（class类名）属性。
editable	设置事件对象的editable（可编辑）属性。
startEditable	设置事件对象的startEditable属性。
durationEditable	设置事件对象的durationEditable属性。
backgroundColor	设置事件对象的resourceEditable属性。
rendering	设置事件对象的rendering属性。
overlap	设置事件对象的overlap属性。
constraint	设置事件对象的constraint属性。
allDayDefault	设置allDayDefault选项，仅限当前事件源。
eventDataTransform	设置eventDataTransform回调，仅限当前事件源。

events (as a function)

自定义函数返回 Event Objects

function( start, end, timezone, callback ) { }

FullCalendar 会在需要数据的时候调用这个自定义函数，例如当用户切换视图的时候。

此函数会传入 start 和 end参数（Date对象）来表示时间范围。timezone是指Fullcalendar当前使用的时区。另外还有 callback 函数，当自定义函数生成日程之后必须调用，callback的入参是 Event Objects 数组。

以下代码告诉我们如何使用事件函数加载XML格式的数据。

$('#calendar').fullCalendar({events: function(start, end, timezone, callback) {$.ajax({url: 'myxmlfeed.php',dataType: 'xml',data: {// our hypothetical feed requires UNIX timestampsstart: start.unix(),end: end.unix()},success: function(doc) {var events = [];$(doc).find('event').each(function() {events.push({title: $(this).attr('title'),start: $(this).attr('start') // will be parsed});});callback(events);}});}
});

多个事件源可以使用eventSources。

eventSources

eventSources 是一种指定多个数据源的途径，值为数组类型。eventSources 是 events选项的一种替代。

在eventSources里可以是数组数据、JSON数据、函数数据、数据源对象(Event Source Object)

$('#calendar').fullCalendar({eventSources: ['/feed1.php','/feed2.php']
});

allDayDefault

allDayDefault 决定了在 Event Object 的 allday属性未指定时的默认值。allDayDefault 值为布尔类型，默认true。

startParam

使用json接口的时候，定义开始时间（ISO8601时间字符串）的属性名。值为字符串类型的，默认为'start'。

endParam

使用json接口的时候，定义结束时间（ISO8601时间字符串）的属性名。值为字符串类型的，默认为'end'。

timezoneParam

使用json接口的时候，定义时区。值为字符串类型的，默认为'timezone'。

lazyFetching

是否延迟加载数据，值为布尔类型，默认值为true。

当定义为true的时候，FullCalendar 只有在真正需要的时候才去加载数据。例如，当你的日程表现在在月视图的二月，FullCalendar 会取整个二月的数据，在内部缓存起来，当用户切换到二月的周视图或者天视图的时候，FullCalendar 会自动从缓存中取得需要的数据。

当设置为false的时候，每次切换 FullCalendar 都会重新加载数据（不使用缓存）。

defaultTimedEventDuration

当没有设置事件的结束时间end时指定事件的持续时间，默认'02:00:00'即2小时。

defaultAllDayEventDuration

当事件为全天事件而没有设置结束end时间时指定事件的持续时间。默认是{ days: 1 }。

forceEventDuration

如果未指定事件end结束时间，是否强制使用结束时间。默认false。

eventDataTransform

回调函数，将自定义数据转换为标准的事件对象Event Object。

function( eventData ) {}

该钩子函数（hook）允许您从JSON提要或其他事件源接收任意事件数据，并将其转换为FullCalendar接受的数据类型。这让您轻松接受替代数据格式，而无需编写完全自定义的事件功能。

回调函数，当获取数据开始和结束的时候触发：

function( isLoading, view )

AJAX开始获取数据的时候 isLoading 是true，结束的时候是false。view是当前的 View Object。此函数常常用来显示或隐藏加载图标。

updateEvent

方法，当更新事件时将事件渲染在日历上。

.fullCalendar( 'updateEvent', event )

event必须是日程的原生Event Object，可以通过 eventClick 回调或者 clientEvents 方法获得：

$('#calendar').fullCalendar({eventClick: function(event, element) {event.title = "CLICKED!";$('#calendar').fullCalendar('updateEvent', event);}
});

updateEvents

方法，当要更新多个事件并且渲染到日历时使用。

.fullCalendar( 'updateEvents', events )

clientEvents

方法，从FullCalendar 的缓存的数据中取得日历事件。

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

此方法会从客户端缓存中获取 Event Objects 数组。

如果忽略idOrFilter参数的话，会取得全部数据。如果idOrFilter 是ID的话，会返回该ID的所有日程。idOrFilter 也可以是一个筛选函数，接受 Event Object 参数，返回布尔类型参数。

removeEvents

方法，删除Fullcalendar中的事件。

.fullCalendar( 'removeEvents' [, idOrFilter ] )

如果忽略idOrFilter参数的话，删除所有日程。如果 idOrFilter是ID的话，会删除该ID的所有日程。idOrFilter 也可以是一个筛选函数，接受 Event Object 参数，返回布尔类型参数（如果是true的话就删除）。

refetchEvents

方法，从各个数据源重新获取并且渲染数据。

.fullCalendar( 'refetchEvents' )

refetchEventSources

方法，重新获取一个或多个数据源。

.fullCalendar( 'refetchEventSources', sources )

sources可以是单个事件id或者多个事件数组。

addEventSource

方法，动态的添加一个数据源。

.fullCalendar( 'addEventSource', source )

数据源可以是一个数组，函数或者json接口。FullCalendar 会立刻从这个数据源获取日程并且渲染。

removeEventSource

方法，动态删除一个数据源。

.fullCalendar( 'removeEventSource', source )

该数据源的事件会立刻从日历中移除。

removeEventSources

方法，动态删除所有事件源或多个指定的事件源。

.fullCalendar( 'removeEventSources', optionalSourcesArray )

当optionalSourcesArray未指定，将删除所有的事件源。

getEventSources

方法，获取所有的事件源对象(Event Source Object)，返回数组。

.fullCalendar( 'getEventSources' )

getEventSourceById

方法，根据给定的时间id，检索获取事件源对象(Event Source Object)

.fullCalendar( 'getEventSourceById', id )

Fullcalendar v5.5.1 设计一个考勤日历插件相关推荐

签到考勤java课设_用Java设计一个考勤模拟程序Attendance
用Java设计一个考勤模拟程序Attendance,实现如下功能选择界面: 1--上班签到 2--下班签出 3--考勤信息查阅 4--退出考勤程序运行后,提示用户输入上述功能选择,并验证用户输入的用 ...
记录--手把手带你开发一个uni-app日历插件（并发布）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助相信我们在开发各类小程序或者H5,甚至APP时,会把uni-app作为一个技术选型,其优点在于一键打包多端运行,较为强大的跨平台的性能.但 ...
Android考勤日历控件
工作这么久,第一次在CSDN上写技术博客,望大家多多支持: 本篇博文给大家分享一个考勤日历控件,这里有个需求:要求显示当前月的日期,左右可以切换月份来查看日期.可以通过不同的颜色表示每天的考勤状态: ...
前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
js日历控件html,jQuery日历插件sys-calendar.js
插件描述:jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单 sys-calendar.js jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版 ...
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
fullcalendar官网:https://fullcalendar.io/ 插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalenda ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
FullCalendar日历插件说明文档
好记忆不如按烂笔头... ... 普通显示设置属性描述默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个 ...
FullCalendar日历插件文档
普通显示设置属性描述默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: t ...

Fullcalendar v5.5.1 设计一个考勤日历插件

前言

效果

安装

开发

说明

其他文档

Fullcalendar v5.5.1 设计一个考勤日历插件相关推荐

最新文章

热门文章