两款超好⽤js⽇历插件（fullcalendar和zabuto_calendar）这两款插件特别类似，其实⽤其中⼀款即可。
先展⽰⼀下我⽤这两款插件制作的排班系统
这个是fullcalendar插件制作的排班页⾯，左边新建⼀系列组和组员，可以将⼈员直接拖拽⾄右边的⽇历上，不同组以颜⾊区别。
这个是将上⾯的排班内容⽤zabuto_calendar插件显⽰出来，黄⾊区域代表今天你有值班。
看了⽂档的话，其实这些都很简单。难点是⼀些逻辑上的判断，当然如果你执⾏实现简单的增删改以及显⽰，那看下⾯这段代码⾜以。这⾥先共享我的及属性设置代码：
$('#calendar_arrangement').fullCalendar({
header: {
left: 'prev today next ',
center: 'title',
right: '' month,agendaWeek,agendaDay
},
weekMode: 'liquid',
editable: true,
droppable: true,
dragOpacity: {
'': .6
},
buttonText: {
today: '本⽉',
month: '⽉',
agendaWeek: '周',
agendaDay: '⽇'
},
monthNames: ["1⽉", "2⽉", "3⽉", "4⽉", "5⽉", "6⽉", "7⽉", "8⽉", "9⽉", "10⽉", "11⽉", "12⽉"],            monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
dayNames: ["星期⽇", "星期⼀", "星期⼆", "星期三", "星期四", "星期五", "星期六"],
dayNamesShort: ["周⽇", "周⼀", "周⼆", "周三", "周四", "周五", "周六"],
firstDay: 1,
titleFormat: {
month: 'yyyy年MMMM',
week: "yyyy/MMM/d{ '— '[ yyyy/][MMM/]d}",
day: 'yyyy/MMM/d dddd'
},
columnFormat: {
month: 'ddd',
week: 'M/d ddd',
day: 'M/d dddd'
},
allDayText: '全天',
//获取数据后显⽰在fullcalendar页⾯
events: function(start, end, callback) {
var fstart = $.fullCalendar.formatDate(start, "yyyy-MM-dd");
var fend = $.fullCalendar.formatDate(end, "yyyy-MM-dd");
$.ajax({
type: "post",
url: "",//我是⽤ajax获取后台数据的，这⾥填写地址
dataType: "json",
data: {
start: fstart,
end: fend
},
success: function(data) {
if (data) {
var event = [];
$.each(data, function(i) {
event.push({
_id: data[i].event_id,
title: data[i].title,
start: data[i].start,
end: data[i].end,
allDay: true
});
});
callback(event);
}
}
});
},
//点击时触发
eventClick: function(event) {
},
//移动时触发
eventDrop: function(event) {
},
//拉伸时触发
eventResize: function(event) {
},
//排班时触发
drop: function(date, allDay) {
}
});
});
具体的属性的含义以及事件操作⽅法我就不标注了，可以看下⾯⽂档：
FullCalendar相关API
参数描述默认值
header 设置⽇历头部信息。 如果设置为false，则不显⽰头部信息。包括left，center,right左中右三个位
置，每个位置都可以对应以下不同的配置： title: 显⽰当前⽉份/周/⽇信息 prev: ⽤于切换到上⼀⽉/jquery在项目里是干啥的
周/⽇视图的按钮 next: ⽤于切换到下⼀⽉/周/⽇视图的按钮 prevYear：⽤于切换到上⼀年视图的按
钮 nextYear：⽤于切换到下⼀年视图的按钮
{ left: 'title',
center: '',
right: 'today
prev,next' }
theme是否允许使⽤jquery的ui主题，如果设置为true，则需要加载jquery ui相关css和js⽂件。 查看演⽰false
buttonIcons 设置header中使⽤的prev, next等变量对应按钮的样式，只有当theme为true时才有效，如果你调⽤
了jQuery ui样式但⼜不想使⽤它的图标样式，可以将此属性设置为false
{ prev:
'circle-
triangle-w',
next: 'circle-
triangle-e' }
firstDay设置⼀周中显⽰的第⼀天是哪天，周⽇是0，周⼀是1，类推。0 isRTL设置为ture时则⽇历从右往左显⽰，貌似是针对阿拉伯⼈设计的。false weekends是否显⽰周末，设为false则不显⽰周六和周⽇。true
hiddenDays 隐藏⼀周中的某⼀天或某⼏天，数组形式，如隐藏周⼆和周五：[2,5]，默认不隐藏，除⾮weekends
设置为false。
[]
weekMode 在⽉视图⾥显⽰周的模式，因为每⽉周数可能不同，所以⽉视图⾼度不⼀定。 fixed：固定显⽰6周
⾼，⽇历⾼度保持不变 liquid：不固定周数，⾼度随周数变化 variable：不固定周数，但⾼度固定
'fixed'
weekNumbers 是否在⽇历中显⽰周次(⼀年中的第⼏周)，如果设置为true，则会在⽉视图的左侧、周视图和⽇视图的
左上⾓显⽰周数。
false
weekNumberCalculation周次的显⽰格式。-height设置⽇历的⾼度，包括header⽇历头部，默认未设置，⾼度根据aspectRatio值⾃适应。
contentHeight设置⽇历主体内容的⾼度，不包括header部分，默认未设置，⾼度根据aspectRatio值⾃适应。aspectRatio设置⽇历单元格宽度与⾼度的⽐例。  1.35 handleWindowResize是否随浏览器窗⼝⼤⼩变化⽽⾃动变化。true
windowResize callback，当浏览器窗⼝变化时触发function，使⽤： $('#calendar').fullCalendar({ windowResize: function(view) { alert('The calendar has adjusted to a window resize'); } });
-
render method，绑定⽇历到id上。 $('#id').fullCalendar('render');-destroy method，销毁id⽇历，把⽇历回复到初始化前状态。 $('#id').fullCalendar('destroy');-FullCalendar提供五种可⽤视图，包括month（⽉视图），basicWeek（基本周视图，左侧不显⽰具体时
间），basicDay（基本⽇视图，左侧不显⽰具体时间），agendaWeek（周视图），agendaDay（⽇视图）。name包括month,basicWeek,basicDay,agendaWeek,agendaDay-
title标题内容(例如-
start Date类型, 该view下的第⼀天-
end Date类型, 该view下的最后⼀天. 由于是⼀个闭合的值, 所以, ⽐如在month view下, 10⽉这个⽉份, 那么end对应的应该是11⽉的第⼀天
-
visStart Date类型. 在该view下第⼀个可以访问的day. month view下, 该值是当⽉的第⼀天, week view下, 则通常和start⼀致
-
visEnd Date类型, 最后⼀个可访问的day-View其他属性和⽅法
defaultView⽇历初始化时默认视图'month'
getView method，取得视图对象信息，如获取当前视图的标题内容： var view =
$('#calendar').fullCalendar('getView'); alert(
-
changeView method，切换视图 .fullCalendar('changeView',viewName) viewName为5种视图中的⼀种-
⽇程选项(以下选项设置适⽤于agendaWeek和agendaDay视图⾥。)
allDaySlot在agenda视图模式下，是否在⽇历上⽅显⽰all-day(全天)true allDayText定义⽇历上⽅显⽰
全天信息的⽂本'all-day' axisFormat设置⽇历agenda视图下左侧的时间显⽰格式，默认显⽰如：5:30pm'h(:mm)tt' slotMinutes在agenda的视图中, 两个时间之间的间隔(分钟)30 defaultEventMinutes事件默认的时间执⾏长度，如果事件对象没有指定执⾏多长时间，则默认执⾏两个⼩时120 firstHour当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置6 minTime设置显⽰的时间从⼏点开始0 maxTime设置显⽰的时间从⼏天结束24 slotEventOverlap设置视图中的事件显⽰是否可以重叠覆盖true
当前⽇期设置
year设置⽇历年份，必须为4位如：2013，如果不设置则默认为当前年份
month设置初始化⽇历的⽉份，从0开始，如果年份和⽉份都未指定，则从⼀⽉开始。
date设置⽇历初始化时的⽇期，只有在周视图和⽇视图中有效
prev method，进⼊到上⼀⽉（周、天）视图 $('#calendar').fullCalendar('prev');-
next method，进⼊到下⼀⽉（周、天）视图 $('#calendar').fullCalendar('next');-prevYear method，进⼊上⼀年视图-nextYear method，进⼊下⼀年视图-
today method，进⼊当天-
gotoDate method，指定进⼊⽇历中的某⼀天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [
date ]] )
-
incrementDate method， 以当前时间为轴, 将⽇历向前, 或向后移动指定长度的时间, ⽐如:
$('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表⽰将⽇历年份向前移动3年, ⽉份向
后移动2⽉, day(天数)向前移动5天。
-
getDate method，返回当前⽇历中的⽇期-⽂本与时间定制(你可以根据项⽬需求设置⽇历显⽰的⽂本信息，如中⽂的⽉份等。)
timeFormat设置显⽰的⽇程事件的时间格式，如timeFormat: 'H:mm' 则显⽰24⼩时制的像10:30{agenda:‘h:mm{ -h:mm}}
columnFormat 设置显⽰⽇历每列表头信息的格式⽂本，默认： { month: 'ddd', // Mon week: 'ddd M/d',
// Mon
9/7 day: 'dddd M/d' // Monday 9/7 }
见描述
titleFormat设置⽤于显⽰⽇历头部的⽂本信息，默认： { month: 'MMMM yyyy', // September 2013 week：见描述
设置⽇历头部各按钮的显⽰⽂本信息，默认： { prev: '‹', // ‹ next: '›', // › prevYear: '«', // «
buttonText nextYear: '»', // » today: 'today', month: 'month', week: 'week', day: 'day' }见描述
monthNames ⽉份全称，默认： ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December']
见描述
monthNamesShort⽉份名称简写，默认：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']见描述
dayNames 星期全称，默认：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday']
见描述
dayNamesShort星期名称简写，默认：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']见描述weekNumberTitle周次，即⼀年中的第⼏周-
⿏标单击和滑过(以下列出的是当⿏标单击或者滑过⽇历中的某个元素时，回调的函数callback。)
dayClick 当单击⽇历中的某⼀天时，触发callback，⽤法： $('#calendar').fullCalendar({ dayClick:
function(date, allDay, jsEvent, view) { } }); date是点击的day的时间(如果在agenda view, 还包含时间)，在⽉view下点击⼀天时，allDay是true，在agenda模式下，点击all-day 的窄条时，allDay是true，点击其他的agenda view下的day则为false，jsEvent就是⼀个普通的javascript事件，包含的是click事件的基础信息。
-
eventClick 当点击⽇历中的某⼀⽇程（事件）时，触发此操作，⽤法： $('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view) { } }); event是⽇程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。
-
eventMouseover eventMouseout⿏标划过和离开的事件，⽤法和参数同上-
选择操作
selectable是否允许⽤户通过单击或拖动选择⽇历中的对象，包括天和时间。false selectHelper当点击或拖动选择时间时，显⽰默认加载的提⽰信息，该属性只在周/天视图⾥可⽤。false unselectAuto当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。true unselectCancel指定哪些元素不会清空当前的选中，以JQUERY选择器的⽅式指定 '#someId'。''
select callback，被选中的函数回调，使⽤⽅法： function( startDate, endDate, allDay, jsEvent, view ) startDate：被选中区域的开始时间 endDate：被选中区域的结束时间 allDay：是否为全天事件startDate：jascript对象 startDate：当前视图对象
-
unselect callback，选中被取消时的回调，使⽤⽅法： function( view, jsEvent )-
select
method，选中某个时间，使⽤⽅法： $('#calendar').fullCalendar( 'select', startDate, endDate,
allDay )
-
unselect method，取消选中，使⽤⽅法： $('#calendar').fullCalendar( 'unselect' )-
⽇程事件数据(Event Object，事件对象，⽤来存储⼀个⽇历事件信息的标准对象，只有title和start是必须的)
id可选，事件唯⼀标识，重复的事件具有相同的id-
title必须，事件在⽇历上显⽰的title-
allDay可选，true or false，是否是全天事件。-
start必须，事件的开始时间。-
end可选，结束时间。-
url可选，当指定后，事件被点击将打开对应url。-
className指定事件的样式。-
editable事件是否可编辑，可编辑是指可以移动, 改变⼤⼩等。-
source指向次event的eventsource对象。-
color背景和边框颜⾊。-backgroundColor背景颜⾊。-borderColor边框颜⾊。-
textColor⽂本颜⾊。-
事件源对象(事件源即⽇历中的数据来源，FullCalendar提供了数组、函数调⽤、以及JSON数据的形式，当然也可以通过Google Calendar feed获取数据接⼝。helloweba后⾯会有⽂章专门介绍事件数据的操作，包括数据的查询、写⼊、更新和删除操作。)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。