近日在研究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><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', hourMin: 5, hourMax: 23, hourGrid: 3, minuteGrid: 15, timeText: '时间', hourText: '时', minuteText: '分', onClose: function (dateText, 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, jsEvent, 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 fend = $.fullCalendar.formatDate(event.end, "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,
height: 450,
width: 400,
title: '实验仪器预约',
modal: true,
position: "center",
draggable: false,
beforeClose: function (event, ui) {
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
$("#name").val(''); //预约人
$("#phone").val(''); //电话
$("#fee").val(''); //费用
},
timeFormat: 'HH:mm{ - HH:mm}',
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, 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(''); //费用
}
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 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>
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
