fullcalendar教程

由于工作需要要开发一个日程管理，后面查询到fullcalendar是个不错jquery做的日程控件配合jquery-ui的时间选择控件，个人感觉还是不错的fullcalendar有丰富的配置满足了开发所需还有不错的用户体验，不多说上代码。

第一步骤

先把相关包引用

注：红色的是自己定义用来控制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                      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                      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">
                &nbsp;</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文件夹下请注意。