由於工作需要要開發一個日程管理，后面查詢到fullcalendar是個不錯jquery做的日程控件配合jquery-ui的時間選擇控件，個人感覺還是不錯的fullcalendar有豐富的配置滿足了開發所需還有不錯的用戶體驗，不多說上代碼。
第一步驟
先把相關包引用
<link href="../jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/mainstructure.css" rel="stylesheet" type="text/css" />
<link href="css/maincontent.css" rel="stylesheet" type="text/css" />
注：紅色的是自己定義用來控制jquery-ui 彈框的樣式等
<link rel='stylesheet' type='text/css' href='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' />
<script src="../jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.min1.9.1.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/jQuery-Timepicker-Addon-master/jquery-ui-timepicker-addon.js"></script>
<script src="http://www.cnblogs.com/jQuery-Timepicker-Addon-master/jquery-ui-sliderAccess.js"></script>
<script src="../jquery/datepicker-zh.js" type="text/javascript"></script>
<link href="http://www.cnblogs.com/jQuery-Timepicker-Addon-master/jquery-ui-timepicker-addon.css"
rel="stylesheet" />
<script src="../fullcalendar/fullcalendar.js" type="text/javascript"></script>
1 <script type='text/javascript'> 2 3 $(document).ready(function () { 4 5 // $("#hid").timepicker(); 6 $("#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) { 7 if ($('#start').val() != '') { 8 var testStartDate = $('#start').datetimepicker('getDate'); 9 var testEndDate = $('#end').datetimepicker('getDate'); 10 if (testStartDate > testEndDate) 11 $('#end').datetimepicker('setDate', testStartDate); 12 } else { 13 $('#end').val(dateText); 14 } 15 }, 16 onSelect: function (selectedDateTime) { 17 $('#end').datetimepicker('option', 'minDate', $('#end').datetimepicker('getDate')); 18 } 19 }); 20 $("#end").datetimepicker({ dateFormat: 'yy-mm-dd', hourMin: 5, hourMax: 23, hourGrid: 3, minuteGrid: 15, timeText: '時間', hourText: '時', minuteText: '分', onClose: function (dateText, inst) { 21 if ($('#start').val() != '') { 22 var testStartDate = $('#start').datetimepicker('getDate'); 23 var testEndDate = $("#end").datetimepicker('getDate'); 24 if (testStartDate > testEndDate) 25 $('#start').datetimepicker('setDate', testEndDate); 26 } else { 27 $('#start').val(dateText); 28 } 29 }, 30 onSelect: function (selectedDateTime) { 31 $('#start').timepicker('option', 'maxDate', $("#end").timepicker('getDate')); 32 } 33 }); 34 $("#addhelper").hide(); 35 36 var date = new Date(); 37 var d = date.getDate(); 38 var m = date.getMonth(); 39 var y = date.getFullYear(); 40 41 $('#calendar').fullCalendar({ 42 theme: true, 43 header: { 44 left: 'prev,next today', 45 center: 'title', 46 right: 'month,agendaWeek,agendaDay' 47 }, 48 49 monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], 50 monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], 51 dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], 52 dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], 53 today: ["今天"], 54 firstDay: 1, 55 buttonText: { 56 today: '本月', 57 month: '月', 58 week: '周', 59 day: '日', 60 prev: '上一月', 61 next: '下一月' 62 }, 63 viewDisplay: function (view) {//動態把數據查出，按照月份動態查詢 64 var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss"); 65 var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss"); 66 $("#calendar").fullCalendar('removeEvents'); 67 $.post("http://www.cnblogs.com/sr/AccessDate.ashx", { start: viewStart, end: viewEnd }, function (data) { 68 69 var resultCollection = jQuery.parseJSON(data); 70 $.each(resultCollection, function (index, term) { 71 $("#calendar").fullCalendar('renderEvent', term, true); 72 }); 73 74 }); //把從后台取出的數據進行封裝以后在頁面上以fullCalendar的方式進行顯示 75 }, 76 editable: true,//判斷該日程能否拖動 77 dayClick: function (date, allDay, jsEvent, view) {//日期點擊后彈出的jq ui的框，添加日程記錄 78 var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");//選擇當前日期的時間轉換 79 $("#end").datetimepicker('setDate', selectdate);//給時間空間賦值 80 $("#reservebox").dialog({ 81 autoOpen: false, 82 height: 450, 83 width: 400, 84 title: 'Reserve meeting room on ' + selectdate, 85 modal: true, 86 position: "center", 87 draggable: false, 88 beforeClose: function (event, ui) { 89 //$.validationEngine.closePrompt("#meeting"); 90 //$.validationEngine.closePrompt("#start"); 91 //$.validationEngine.closePrompt("#end"); 92 }, 93 timeFormat: 'HH:mm{ - HH:mm}', 94 95 buttons: { 96 "close": function () { 97 $(this).dialog("close"); 98 }, 99 "reserve": function () { 100 101 var startdatestr = $("#start").val(); //開始時間 102 var enddatestr = $("#end").val(); //結束時間 103 var confid = $("#title").val(); //標題 104 var det = $("#details").val(); //內容 105 var cd = $("#chengdu").val(); //重要程度 106 var id2; 107 var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);//時間和日期拼接 108 var enddate = $.fullCalendar.parseDate(enddatestr); 109 var schdata = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr }; 110 $.ajax({ 111 type: "POST", //使用post方法訪問后台 112 113 url: "http://www.cnblogs.com/sr/getallid.ashx", //要訪問的后台地址 114 data: schdata, //要發送的數據 115 success: function (data) { 116 //對話框里面的數據提交完成，data為操作結果 117 id2 = data; 118 var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: id2 }; 119 $('#calendar').fullCalendar('renderEvent', schdata2, true); 120 $("#start").val(''); //開始時間 121 $("#end").val(''); //結束時間 122 $("#title").val(''); //標題 123 $("#details").val(''); //內容 124 $("#chengdu").val(''); //重要程度 125 126 } 127 }); 128 129 130 $(this).dialog("close"); 131 132 133 } 134 135 } 136 }); 137 $("#reservebox").dialog("open"); 138 return false; 139 }, 140 141 loading: function (bool) { 142 if (bool) $('#loading').show(); 143 else $('#loading').hide(); 144 }, 145 eventAfterRender: function (event, element, view) {//數據綁定上去后添加相應信息在頁面上 146 var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); 147 var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); 148 150 151 var confbg = ''; 152 if (event.confid == 1) { 153 confbg = confbg + '<span class="fc-event-bg"></span>'; 154 } else if (event.confid == 2) { 155 confbg = confbg + '<span class="fc-event-bg"></span>'; 156 } else if (event.confid == 3) { 157 confbg = confbg + '<span class="fc-event-bg"></span>'; 158 } else if (event.confid == 4) { 159 confbg = confbg + '<span class="fc-event-bg"></span>'; 160 } else if (event.confid == 5) { 161 confbg = confbg + '<span class="fc-event-bg"></span>'; 162 } else if (event.confid == 6) { 163 confbg = confbg + '<span class="fc-event-bg"></span>'; 164 } else { 165 confbg = confbg + '<span class="fc-event-bg"></span>'; 166 } 167 168 // var titlebg = '<span class="fc-event-conf" style="background:' + event.confcolor + '">' + event.confshortname + '</span>'; 169 170 // if (event.repweeks > 0) { 171 // titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>'; 172 // } 173 174 if (view.name == "month") {//按月份 175 var evtcontent = '<div class="fc-event-vert"><a>'; 176 evtcontent = evtcontent + confbg; 177 evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.fullname + '</span>'; 178 181 element.html(evtcontent); 182 } else if (view.name == "agendaWeek") {//按周 183 var evtcontent = '<a>'; 184 evtcontent = evtcontent + confbg; 185 evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>'; 186 evtcontent = evtcontent + '<span>'+ event.fullname + '</span>'; 187 189 element.html(evtcontent); 190 } else if (view.name == "agendaDay") {//按日 191 var evtcontent = '<a>'; 192 evtcontent = evtcontent + confbg; 193 evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>'; 194 // evtcontent = evtcontent + '<span>Room: ' + event.confname + '</span>'; 195 // evtcontent = evtcontent + '<span>Host: ' + event.fullname + '</span>'; 196 // evtcontent = evtcontent + '<span>Topic: ' + event.topic + '</span>'; 197 // evtcontent = evtcontent + '</a><span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>'; 198 element.html(evtcontent); 199 } 200 }, 201 eventMouseover: function (calEvent, jsEvent, view) { 202 var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm"); 203 var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm"); 204 $(this).attr('title', fstart + " - " + fend + " " + "標題" + " : " + calEvent.title); 205 $(this).css('font-weight', 'normal'); 206 $(this).tooltip({ 207 effect: 'toggle', 208 cancelDefault: true 209 }); 210 }, 211 212 eventClick: function (event) { 213 var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); 214 var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); 215 // var schdata = { sid: event.sid, deleted: 1, uid: event.uid }; 216 var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd"); 217 $("#start").val(fstart); ; 218 $("#end").datetimepicker('setDate', event.end); 219 220 221 $("#title").val(event.title); //標題 222 $("#details").val(event.description); //內容 223 $("#chengdu").val(event.confname); //重要程度 224 225 226 227 $("#reservebox").dialog({ 228 autoOpen: false, 229 height: 450, 230 width: 400, 231 title: 'Reserve meeting room on ', 232 modal: true, 233 position: "center", 234 draggable: false, 235 beforeClose: function (event, ui) { 236 //$.validationEngine.closePrompt("#meeting"); 237 //$.validationEngine.closePrompt("#start"); 238 //$.validationEngine.closePrompt("#end"); 239 $("#start").val(''); //開始時間 240 $("#end").val(''); //結束時間 241 $("#title").val(''); //標題 242 $("#details").val(''); //內容 243 $("#chengdu").val(''); //重要程度 244 }, 245 timeFormat: 'HH:mm{ - HH:mm}', 246 247 buttons: { 248 "刪除": function () { 249 var aa = window.confirm("警告：確定要刪除記錄，刪除后無法恢復！"); 250 if (aa) { 251 var para = { id: event.id }; 252 253 254 $.ajax({ 255 type: "POST", //使用post方法訪問后台 256 257 url: "http://www.cnblogs.com/sr/removedate.ashx", //要訪問的后台地址 258 data: para, //要發送的數據 259 success: function (data) { 260 //對話框里面的數據提交完成，data為操作結果 261 262 263 $('#calendar').fullCalendar('removeEvents', event.id); 264 } 265 266 267 }); 268 269 } 270 $(this).dialog("close"); 271 }, 272 "reserve": function () { 273 274 var startdatestr = $("#start").val(); //開始時間 275 var enddatestr = $("#end").val(); //結束時間 276 var confid = $("#title").val(); //標題 277 var det = $("#details").val(); //內容 278 var cd = $("#chengdu").val(); //重要程度 279 var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr); 280 var enddate = $.fullCalendar.parseDate(enddatestr); 281 282 event.fullname = confid; 283 event.confname = cd; 284 event.start = startdate; 285 event.end = enddate; 286 event.description = det; 287 var id2; 288 289 var schdata = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id }; 290 $.ajax({ 291 type: "POST", //使用post方法訪問后台 292 293 url: "http://www.cnblogs.com/sr/Updateinfo.ashx", //要訪問的后台地址 294 data: schdata, //要發送的數據 295 success: function (data) { 296 //對話框里面的數據提交完成，data為操作結果 297 298 var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id }; 299 $('#calendar').fullCalendar('updateEvent', event); 300 } 301 }); 302 303 304 305 306 307 $(this).dialog("close"); 308 } 309 310 } 311 }); 312 $("#reservebox").dialog("open"); 313 return false; 314 }, 315 // events: "http://www.cnblogs.com/sr/AccessDate.ashx" 316 events: [] 317 }); 318 319 320 321 //goto date function 322 if ($.browser.msie) { 323 $("#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>'); 324 } else { 325 $("#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>'); 326 } 327 328 $("#selecteddate").datepicker({ 329 dateFormat: 'yy-mm-dd', 330 beforeShow: function (input, instant) { 331 setTimeout( 332 function () { 333 $('#ui-datepicker-div').css("z-index", 15); 334 }, 100 335 ); 336 } 337 }); 338 339 340 341 $("#selectdate").click(function () { 342 var selectdstr = $("#selecteddate").val(); 343 var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd"); 344 $('#calendar').fullCalendar('gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate()); 345 }); 346 347 348 // conference function 349 $("#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>'); 350 351 352 353 // $(".fc-button-prev").click(function () { 354 // alert("fasdf"); 355 // }); 356 357 }); 358 359 360 361 </script>
第3步加入一些必要的控制樣式
<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>
第4步 頁面代碼
<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="Reserve meeting room"> <form id="reserveformID" method="post"> <div class="sysdesc"> </div> <div class="rowElem"> <label> 標題:</label> <input id="title" name="start"> </div> <div class="rowElem"> <label> 重要程度:</label> <input id="chengdu" name="start"> </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> <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>
這里的代碼我是http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/index.html上面的，根據個人項目要求來修改了。下面是效果，如有其它問題可以發郵件給我t1o4m5@163.com,轉載請說明，這是我原創
很多博友發郵件問我要相應的例子：我現在放上來http://download.csdn.net/detail/t1o4m5/5265611 ,由於之前數據備份有問題重新發一個數據的備份文件http://download.csdn.net/detail/t1o4m5/5944269
注意：試用備份 這個文件是sql數據庫備份文件，剩下你懂的，然后運行的頁面是在fullcalendar-1.5.4\demos文件夾下請注意。