近日在研究Jquery中的fullcalenda的使用方法，因为是加载ExtJs中使用的，还是费了很大的努力。现在基本上已经研究的差不多了，现在整理出来，供广大开发爱好者一起学习，话不多说，直入正题。。。
第一步：在Html页面里加载相关的JS文件（这一步事很关键，因为有些JS文件如果不匹配的话，后面的所调用的方法是很难实现的，博主就在这个地方走了很多弯路）
Js文件下载地址：http://download.csdn.net/detail/ofuhuaderensheng/7209107
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Meta http-equiv="Content-Type" contenttype="text/xml; charset=UTF-8" /> <html> <head> <link href="../../fullcalendar/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="../../fullcalendar/css/mainstructure.css" rel="stylesheet" type="text/css" /> <link href="../../fullcalendar/css/maincontent.css" rel="stylesheet" type="text/css" /> <link rel='stylesheet' type='text/css' href='../../fullcalendar/cupertino/theme.css' /> <link rel='stylesheet' type='text/css' href='../../fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='../../fullcalendar/fullcalendar.print.css'media='print' /> <!--这是后台所封装的访问Ajax的方法--> <script type="text/javascript" src="/includes/xjs1.js"></script> <script src="../../fullcalendar/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="../../fullcalendar/jquery-ui.min1.9.1.js" type="text/javascript"></script> <script src="../../fullcalendar/jquery-ui-timepicker-addon.js"></script> <script src="../../fullcalendar/jquery-ui-sliderAccess.js"></script> <script src="../../fullcalendar/datepicker-zh.js" type="text/javascript"></script> <link href="../../fullcalendar/jquery-ui-timepicker-addon.css"rel="stylesheet" /> <script src="../../fullcalendar/fullcalendar.js" type="text/javascript"></script>第二步：在Html页面中加载Fucallendar，包括读取事件，新增事件，删除事件，以及事件的修改
<script type='text/javascript'>
$(document).ready(function () {
$("#start").timepicker({ dateFormat: 'yy-mm-dd',timeFormat: 'hh:mm',hourMin: 5,hourMax: 24,hourGrid: 3,minuteGrid: 15,timeText: '时间',hourText: '时',minuteText: '分',timeOnlyTitle: '选择时间',onClose: function (dateText,inst) {
if ($('#start').val() != '') {
var testStartDate = $('#start').datetimepicker('getDate');
var testEndDate = $('#end').datetimepicker('getDate');
if (testStartDate > testEndDate)
$('#end').datetimepicker('setDate',testStartDate);
} else {
$('#end').val(dateText);
}
},onSelect: function (selectedDateTime) {
$('#end').datetimepicker('option','minDate',$('#end').datetimepicker('getDate'));
}
});
$("#end").datetimepicker({ dateFormat: 'yy-mm-dd',hourMax: 23,inst) {
if ($('#start').val() != '') {
var testStartDate = $('#start').datetimepicker('getDate');
var testEndDate = $("#end").datetimepicker('getDate');
if (testStartDate > testEndDate)
$('#start').datetimepicker('setDate',testEndDate);
} else {
$('#start').val(dateText);
}
},onSelect: function (selectedDateTime) {
$('#start').datetimepicker('option','maxDate',$("#end").datetimepicker('getDate'));
}
});
$("#addhelper").hide();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,header: {
left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
},monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthNamesShort: ["一月",dayNames: ["周日","周一","周二","周三","周四","周五","周六"],dayNamesShort: ["周日",today: ["今天"],firstDay: 1,buttonText: {
today: '今日',month: '月',week: '周',day: '日',prev: '上一月',next: '下一月'
},//绑定时间源，也就是为你的日历动态填充数据
events: function(start,end,callback) {
//异步获取数据
do_Query();
function do_Query(){
var r = new xjsReq("TestService","queryReserver");
r.onSuccess = function(xjs_res) {
var ps=xjs_res.getElementsByTagName("reserve");
var events = [];
for (var i = 0; i < ps.length; i++) {
var ev = ps[i];
var id=ev.getAttribute("id");
var title=ev.getAttribute("title");
var name=ev.getAttribute("name");
var phone=ev.getAttribute("phone");
var fee=ev.getAttribute("fee");
var descrition=ev.getAttribute("descrition");
var evtstart=ev.getAttribute("start");
var evtend=ev.getAttribute("end");
events.push({
id:id,title:title,Name:name,Phone:phone,Fee:fee,Descrition:descrition,start:evtstart,end:evtend,allDay:false
});
}
callback(events);
}
r.request();
}
},editable: true,//判断该日程能否拖动
dayClick: function (date,allDay,jsEvent,view) {//日期点击后弹出的jq ui的框，添加日程记录
var selectdate = $.fullCalendar.formatDate(date,"yyyy-MM-dd");//选择当前日期的时间转换
$("#end").datetimepicker('setDate',selectdate);//给时间空间赋值
$("#reserveBox").dialog({
autoOpen: false,height: 450,width: 400,title: '实验室仪器预约 ' + selectdate,modal: true,position: "center",draggable: false,beforeClose: function (event,ui) {
},timeFormat: 'HH:mm{ - HH:mm}',buttons: {
"关闭": function () {
$(this).dialog("close");
},"预约": function () {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var confid = $("#title").val(); //标题
var det = $("#details").val(); //内容
var name = $("#name").val(); // 预约人
var fee = $("#fee").val(); // 费用
var phone = $("#phone").val(); //电话
var StartTime=selectdate + " " + startdatestr; //时间和日期拼接
var ri = new xjsReq("TestService","saveReserver");
ri.add("id","");
ri.add("name",name);
ri.add("phone",phone);
ri.add("title",confid);
ri.add("fee",fee);
ri.add("det",det);
ri.add("StartTime",StartTime);
ri.add("enddatestr",enddatestr);
ri.onSuccess = function(xjs_res) {
var schdata2 = { title: confid,Name: name,Phone: phone,Fee: fee,Descrition:det,start: StartTime,end: enddatestr };
$('#calendar').fullCalendar('renderEvent',schdata2,true);
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
$("#name").val(''); //姓名
$("#phone").val(''); //电话
$("#fee").val(''); //费用
}
ri.request();
$(this).dialog("close");
}
}
});
$("#reserveBox").dialog("open");
return false;
},titleFormat: "yyyyMMMMdddd",loading: function (bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},eventAfterRender: function (event,element,view) {//数据绑定上去后添加相应信息在页面上
var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");
var fend = $.fullCalendar.formatDate(event.end,"HH:mm");
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>';
} else {
confbg = confbg + '<span class="fc-event-bg"></span>';
}
if (view.name == "month") {//按月份
var evtcontent = '<div class="fc-event-vert"><a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.title + '</span>';
element.html(evtcontent);
} else if (view.name == "agendaWeek") {//按周
var evtcontent = '<a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';
evtcontent = evtcontent + '<span>'+ event.title + '</span>';
element.html(evtcontent);
} else if (view.name == "agendaDay") {//按日
var evtcontent = '<a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';
element.html(evtcontent);
}
},eventMouSEOver: function (calEvent,view) {
var fstart = $.fullCalendar.formatDate(calEvent.start,"yyyy/MM/dd HH:mm");
var fend = $.fullCalendar.formatDate(calEvent.end,"yyyy/MM/dd HH:mm");
$(this).attr('title',fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);
$(this).css('font-weight','normal');
$(this).tooltip({
effect: 'toggle',cancelDefault: true
});
},eventClick: function (event) {
var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");
var selectdate = $.fullCalendar.formatDate(event.start,"yyyy-MM-dd");
$("#start").val(fstart);
$("#end").datetimepicker('setDate',event.end);
$("#title").val(event.title); //标题
$("#details").val(event.Descrition); //内容
$("#name").val(event.Name); //预约人
$("#phone").val(event.Phone); //电话
$("#fee").val(event.Fee); //费用
$("#reserveBox").dialog({
autoOpen: false,title: '实验仪器预约',ui) {
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
$("#name").val(''); //预约人
$("#phone").val(''); //电话
$("#fee").val(''); //费用
},buttons: {
"删除": function () {
var aa = window.confirm("警告：确定要删除记录，删除后无法恢复！");
if (aa) {
var Id =event.id;
var r2 = new xjsReq("TestService","deleteReserver");
r2.add("id",Id);
r2.onSuccess = function(xjs_res) {
$('#calendar').fullCalendar('removeEvents',event.id);
}
r2.request();
}
$(this).dialog("close");
},"修改": function () {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var confid = $("#title").val(); //标题
var det = $("#details").val(); //内容
var name = $("#name").val(); // 预约人
var fee = $("#fee").val(); // 费用
var phone = $("#phone").val(); //电话
var ID=event.id; //ID
alert(ID);
var StartTime=selectdate + " " + startdatestr; //时间和日期拼接
var r3 = new xjsReq("TestService","saveReserver");
r3.add("id",ID);
r3.add("name",name);
r3.add("phone",phone);
r3.add("title",confid);
r3.add("fee",fee);
r3.add("det",det);
r3.add("StartTime",StartTime);
r3.add("enddatestr",enddatestr);
r3.onSuccess = function(xjs_res) {
$('#calendar').fullCalendar('removeEvents',event.id);
var schdata2 = { id :ID,title: confid,true);
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
$("#name").val(''); //姓名
$("#phone").val(''); //电话
$("#fee").val(''); //费用
}
r3.request();
$(this).dialog("close");
}
}
});
$("#reserveBox").dialog("open");
return false;
}
});
if ($.browser.msie) {
$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
} else {
$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
}
$("#selecteddate").datepicker({
dateFormat: 'yy-mm-dd',beforeShow: function (input,instant) {
setTimeout(
function () {
$('#ui-datepicker-div').css("z-index",15);
},100
);
}
});
$("#selectdate").click(function () {
var selectdstr = $("#selecteddate").val();
var selectdate = $.fullCalendar.parseDate(selectdstr,"yyyy-mm-dd");
$('#calendar').fullCalendar('gotoDate',selectdate.getFullYear(),selectdate.getMonth(),selectdate.getDate());
});
$("#calendar .fc-header-left table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" id="selectmeeting"><a><span id="selectdate" class="ui-icon ui-icon-search" style="float: left;padding-left: 5px; padding-top:1px"></span>meeting room</a></div></td><td><span class="fc-header-space"></span></td>');
});
</script>
<style type='text/css'>
.ui-datepicker
{
width: 23em;
padding: .2em .2em 0;
font-size: 70%;
display: none;
}
#calendar
{
width: 900px;
margin: 0 auto;
}
#loading
{
top: 0px;
right: 0px;
}
.tooltip
{
padding-bottom: 25px;
padding-left: 25px;
width: 100px !important;
padding-right: 25px;
display: none;
background: #999;
height: 70px;
color: red;
font-size: 12px;
padding-top: 25px;
z-order: 10;
}
.ui-timepicker-div .ui-widget-header
{
margin-bottom: 8px;
}
.ui-timepicker-div dl
{
text-align: left;
}
.ui-timepicker-div dl dt
{
height: 25px;
margin-bottom: -25px;
}
.ui-timepicker-div dl dd
{
margin: 0 10px 10px 65px;
}
.ui-timepicker-div td
{
font-size: 90%;
}
.ui-tpicker-grid-label
{
background: none;
border: none;
margin: 0;
padding: 0;
}
.ui-timepicker-rtl
{
direction: rtl;
}
.ui-timepicker-rtl dl
{
text-align: right;
}
.ui-timepicker-rtl dl dd
{
margin: 0 65px 10px 10px;
}
</style>
</head>第三步，在body中声明相关的Div，显示日历以及新增事件的窗口
<body>
<div id="wrap">
<div id='calendar'>
</div>
<div id="reserveinfo" title="Details">
<div id="revtitle">
</div>
<div id="revdesc">
</div>
</div>
<div style="display: none" id="reserveBox" title="实验室">
<form id="reserveformID">
<div class="sysdesc">
</div>
<div class="rowElem">
<label>
预约人:</label>
<input id="name" name="name" />
</div>
<div class="rowElem">
<label>
电话：</label>
<input id="phone" name="phone"/>
</div>
<div class="rowElem">
<label>
标题:</label>
<input id="title" name="title" />
</div>
<div class="rowElem">
<label>
开始时间:</label>
<input id="start" name="start"/>
</div>
<div class="rowElem">
<label>
结束时间:</label>
<input id="end" name="end" />
</div>
<div class="rowElem">
<label>
费用:</label>
<input id="fee" name="fee"/>
</div>
<div class="rowElem">
<label>
备忘内容:</label>
<textarea id="details" rows="3" cols="43" name="details"></textarea>
</div>
<div class="rowElem">
</div>
<div class="rowElem">
</div>
<div id="addhelper" class="ui-widget">
<div style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px"
class="ui-state-error ui-corner-all">
<div id="addresult">
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
至此前天页面已经设计完成，后面将会带来后台页面代码的设计....