jQuery插件实战之fullcalendar（日历插件） - 使用fullcalendar开发一个功能完整的富客户端会议室预定系统
日期：  作者：Terry li -
jQuery插件非常多，应用的场景也非常丰富，今天我这里给大家介绍一款非常实用的日历页面开发jQuery插件 -
fullcalendar，目前最新版本是1.5.1，使用这款jQuery插件能够快速帮助你快速编程实现基于web的日历查看功能，大家可能都使用过outlook的日历项功能，使用日历界面能更方便的查看待办事项或者约会。开发过程快速方便。这个jQuery插件的文档也非常全。当然目前只有英文文档。不过这个jQuery插件支持多语言，对于我们这些使用jQuery的开发人员来说非常不错。
在以前的公司web应用程序开发中，我曾经使用这个jQuery插件开发了公司内部的会议室预定系统，这里我简单的介绍一下fullcalendar的相关开发，并且实例讲解一下如何使用这个插件开发日历，其中会使用到
fullcalendar里相关的高级功能，例如，拖拽修改时间，生成个性化的会议室预定系统日历项内容。以上代码都是实际项目中使用的前台，大家如果需要可以直接修改使用，但请自己修改相关的jQuery代码。
项目需求：
需要在fullcalendar的原有界面上美化，这里我们使用jQueryUI来实现界面美化，因为fullcalendar可以很好的和jQueryUI无缝整合
2. 生成单独的日历项添加和查看功能，这里仍旧使用jQueryUI的dialog来实现
3. 因为是一个实际项目，需要数据验证，所以这里我们使用formVaildator插件实现
4. 添加一个 &转到某日&功能，
这个界面功能在Fullcalendar里没有，我们可以通过编程添加类似一个功能，其中调用了datepicker的一个addon，后面会介绍到
5. 周和日浏览可以自由的支持拖拽和移动，用来修改日期和时间
6. 浏览器支持： IE8,IE9,Chrome和Firefox，其它浏览器没测试，请自己针对性的修改js
jQuery相关插件：
提供Calendar功能
提供输入验证功能input validation
提供datepicker时间选择功能
开发代码：
导入相关jQuery插件类库，如下： &script type=&text/javascript& src=&js/jquery-1.4.2.min.js&&&/script&
&script type=&text/javascript& src=&js/jquery-ui-1.8.6.custom.min.js&&&/script&
&script type=&text/javascript& src=&js/jquery-ui-timepicker-addon.js&&&/script&
&link rel=&stylesheet& href=&css/redmond/jquery-ui-1.8.1.custom.css&&
&!-- Jquery and Jquery UI --&
&script src=&js/formValidator/js/jquery.validationEngine.js& type=&text/javascript&&&/script&
&script src=&js/formValidator/js/jquery.validationEngine-en.js& type=&text/javascript&&&/script&
&link rel=&stylesheet& href=&js/formValidator/css/validationEngine.jquery.css& type=&text/css& media=&screen& charset=&utf-8& /&
&!-- FullCalender --&
&link rel='stylesheet' type='text/css' href=&js/fullcal/css/fullcalendar.css& /& &script type='text/javascript' src=&js/fullcal/fullcalendar.js&&&/script&
生成日历主界面： $('#calendar').fullCalendar({
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
theme: true,
editable: true,
allDaySlot : false,
function(start, end , callback){
var events = [];
callback(events);
以上代码将在id=calendar的div里生成一个日历，其中theme定义使用jQueryUI来生成界面，events主要定义生成的会议室预定系统日历项目，这里我们使用如下代码生成日历项，在实际开发过程中，我们可以在这里调用后台程序，或者使用其它方法生成数据，这里为了简单演示，我们使用js来生成需要的日历项目，代码如下： var now = new Date();for(var i=-10;i&60;i++){var evtstart = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours()-5, now.getMinutes(), now.getSeconds(), now.getMilliseconds());var evtend = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
events.push({
title: 'Daily Scrum meeting',
start: evtstart,
end: evtend,
fullname: 'terry li',
confname: 'Meeting 1',
confshortname: 'M1',
confcolor: '#ff3f3f',
confid: 'test1',
allDay: false,
topic: 'Daily Scrum meeting',
description : 'Daily Scrum meeting',
以上代码将生成一些日历项目，显示在日历中。
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) { // 定义了点击日历中日期格子的动作，这里将会调用jQueryUi的dialog生成创建新日历项的对话框
... }, eventClick: function(event) {
// 定义了点击日历项的动作，这里将会调用jQueryUi的dialog显示日历项的内容 },
接下来是fullcalendar的几个方法，用来设置会议室预定系统日历项的显示，分别是eventRender,
eventAfterRender,这里几个方法可以用来生成日历项的内容，具体如下：
eventRender: function(event, element) {
var fstart
= $.fullCalendar.formatDate(event.start, &HH:mm&);
= $.fullCalendar.formatDate(event.end, &HH:mm&);
// Bug in IE8
//element.html('&a href=#&' + fstart + &-& +
fend + '&div style=color:#E5E5E5&' +
event.title + &&/div&&/a&&);
eventAfterRender : function(event, element, view) {
var fstart
= $.fullCalendar.formatDate(event.start, &HH:mm&);
= $.fullCalendar.formatDate(event.end, &HH:mm&);
//element.html('&a href=#&&div&Time: ' + fstart + &-& +
fend + '&/div&&div&Room:' + event.confname + '&/div&&div style=color:#E5E5E5&Host:' +
event.fullname + &&/div&&/a&&);
var confbg='';
if(event.confid==1){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
}else if(event.confid==2){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
}else if(event.confid==3){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
}else if(event.confid==4){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
}else if(event.confid==5){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
}else if(event.confid==6){
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
confbg = confbg + '&span class=&fc-event-bg&&&/span&';
var titlebg =
'&span class=&fc-event-conf& style=&background:'+
event.confcolor +'&&' + event.confshortname + '&/span&';
if(event.repweeks&0){
titlebg = titlebg + '&span class=&fc-event-conf& style=&background:#top:0;right:15;color:#3974BC;font-weight:bold&&R&/span&';
if(view.name==&month&){
var evtcontent = '&div class=&fc-event-vert&&&a&';
evtcontent = evtcontent +
evtcontent = evtcontent + '&span class=&fc-event-titlebg&&' +
fstart + & - & +
fend + titlebg + '&/span&';
evtcontent = evtcontent + '&span&Room: ' +
event.confname + '&/span&';
evtcontent = evtcontent + '&span&Host: ' +
event.fullname + '&/span&';
evtcontent = evtcontent + '&/a&&div class=&ui-resizable-handle ui-resizable-e&&&/div&&/div&';
element.html(evtcontent);
}else if(view.name==&agendaWeek&){
var evtcontent = '&a&';
evtcontent = evtcontent +
evtcontent = evtcontent + '&span class=&fc-event-time&&' +
fstart + &-& +
fend + titlebg + '&/span&';
evtcontent = evtcontent + '&span&' +
event.confname + ' by ' + event.fullname + '&/span&';
//evtcontent = evtcontent + '&span&' +
event.fullname + '&/span&';
evtcontent = evtcontent + '&/a&&span class=&ui-icon ui-icon-arrowthick-2-n-s&&&div class=&ui-resizable-handle ui-resizable-s&&&/div&&/span&';
element.html(evtcontent);
}else if(view.name==&agendaDay&){
var evtcontent = '&a&';
evtcontent = evtcontent +
evtcontent = evtcontent + '&span class=&fc-event-time&&' +
fstart + & - & +
fend + titlebg + '&/span&';
evtcontent = evtcontent + '&span&Room: ' +
event.confname + '&/span&';
evtcontent = evtcontent + '&span&Host: ' +
event.fullname + '&/span&';
evtcontent = evtcontent + '&span&Topic: ' +
event.topic + '&/span&';
evtcontent = evtcontent + '&/a&&span class=&ui-icon ui-icon-arrow-2-n-s&&&div class=&ui-resizable-handle ui-resizable-s&&&/div&&/span&';
element.html(evtcontent);
以上定义了相关会议室预定系统日历项显示方式， 下面介绍会议室预定系统日历项拖动和调整大小，代码片段如下： eventDragStart: function(event, jsEvent, ui, view) {    ui.helper.draggable(&option&, &revert&, true);},eventDragStop: function(event, jsEvent, ui, view) {},eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {    if (1 == 1 || 2 == event.uid) {        var schdata = {            startdate: event.start,            enddate: event.end,            confid: event.confid,            sid: event.sid        };        identityService.getToBeUpdatedConflictedScheduleDAO(schdata, {            callback: function(data) {                if (data.length == 0) {                    var newschdata = {                        sid: event.sid,                        startdate: event.start,                        enddate: event.end                    };                    identityService.updateScheduleByNewDateRange(newschdata, {                        callback: function(data) {                            alert(&Thanks, reservation rescheduled successfully.&);
以上代码如果需要详细说明，请大家参考官方文档，代码细节这里不再说明。
大家可以使用下面的演示代码运行一下。Fullcalendar是一个非常实用的日历插件，使用得当可以开发非常复杂的功能。例如，我们这里开发的会议室预定系统。强烈推荐！
相关资料：
文章来源：
喜欢我们的文章请您与朋友分享:
除特别声明外, 本站所有内容皆为原创，且基于创作共享的 署名-非商业使用-相同方式分享 2.5 协议发布. 转载时请务必以超链接形式标明文章出处和作者信息有没有人能在网上制作一张虚拟飞机票？写我的名字和日期，请哪位大神帮帮忙，对我意义重大_百度知道
有没有人能在网上制作一张虚拟飞机票？写我的名字和日期，请哪位大神帮帮忙，对我意义重大
我有更好的答案
PS就OK了，或百度一软件
什么软件？求解
可以叫人ps一张
问题就是没这方面的人啊！
还真不会发
把你想法说出来
在哪里发？
我在这里不是说出来了吗
你表达不一样
就是还是没人能帮到我啰
其他类似问题
为您推荐：
飞机票的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}