|
由于工作需要要开发一个日程管理，后面查询到fullcalendar是个不错jquery做的日程控件配合jquery-ui的时间选择控件，个人感觉还是不错的fullcalendar有丰富的配置满足了开发所需还有不错的用户体验，不多说上代码。 第一步骤 先把相关包引用 <link href="../jquery/jquery-ui.css" rel="stylesheet" type="text/css" /> 注：红色的是自己定义用来控制jquery-ui 弹框的样式等  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: true209 });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 function322 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 }, 100335 );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 function349 $("#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./technology/jquery/devappwithfullcanlendar/index.html上面的，根据个人项目要求来修改了。下面是效果，如有其它问题可以发邮件给我t1o4m5@163.com,转载请说明，这是我原创 |
|
|
来自： feishiquan > 《fullCalendar》
