FullCalendar（日程管理控件）

(以下是我学习FullCalendar控件时，网络上收集的一些资料)

第一部分（官方资料）

jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/

jquery.fullCalendar英文文档: http://arshaw.com/fullcalendar/docs/

jquery.fullCalendar下载:http://arshaw.com/fullcalendar/download/

第二部分（官方文档的翻译）

http://blog.youkuaiyun.com/lgg201/article/details/4818941

第三部分（视频教程）

http://www.verycd.com/topics/2782321/（一共两集）

第四部分（实战）

（自己做了一个日程管理）

主要的代码如下：

[javascript]   view plain copy

1. <script type='text/javascript'>  
2.     $(document).ready(function() {  
3.         artDialog.notice = function (options) {    
4.             var opt = options || {},    
5.                 api, aConfig, hide, wrap, top,    
6.                 duration = 800;    
7.                     
8.             var config = {    
9.                 id: 'Notice',    
10.                 left: '100%',    
11.                 top: '100%',    
12.                 fixed: true,    
13.                 drag: false,    
14.                 resize: false,    
15.                 follow: null,    
16.                 lock: false,    
17.                 init: function(here){    
18.                     api = this;    
19.                     aConfig = api.config;    
20.                     wrap = api.DOM.wrap;    
21.                     top = parseInt(wrap[0].style.top);    
22.                     hide = top + wrap[0].offsetHeight;    
23.                         
24.                     wrap.css('top', hide + 'px')    
25.                         .animate({top: top + 'px'}, duration, function () {    
26.                             opt.init && opt.init.call(api, here);    
27.                         });    
28.                 },    
29.                 close: function(here){    
30.                     wrap.animate({top: hide + 'px'}, duration, function () {    
31.                         opt.close && opt.close.call(this, here);    
32.                         aConfig.close = $.noop;    
33.                         api.close();    
34.                     });    
35.                         
36.                     return false;    
37.                 }    
38.             };      
39.                 
40.             for (var i in opt) {    
41.                 if (config[i] === undefined) config[i] = opt[i];    
42.             };    
43.                 
44.             return artDialog(config);    
45.         };    
46.         var date = new Date();  
47.         var d = date.getDate();  
48.         var m = date.getMonth();  
49.         var y = date.getFullYear();       
50.         $('#calendar').fullCalendar({  
51.             theme: true,  
52.             header: {  
53.                 left: 'prev,next today',  
54.                 center: 'title',  
55.                 right: 'month,agendaWeek,agendaDay'  
56.             },  
57.             //fullcalendar本地化  
58.             //timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.  
59.             monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
60.             monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
61.             dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
62.             dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
63.             today: ["今天"],    
64.             firstDay: 1,    
65.             buttonText: {    
66.                 today: '今天',    
67.                 month: '月',    
68.                 week: '周',    
69.                 day: '日',    
70.                 prev: '上一月',    
71.                 next: '下一月'    
72.             },    
73.             allDaySlot:false,  
74.             selectable: true,  
75.             selectHelper: true,   
76.             aspectRatio:2.7,  
77.             editable: false,  
78.             allDayDefault:false,  
79.             viewDisplay: function(view) {    
80.             var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH:mm:ss");  
81.             var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd HH:mm:ss");    
82.             $("#calendar").fullCalendar('removeEvents');    
83.             $.getJSON('http://localhost:8080/pnote/schedule/listevents.action',{start:viewStart,end:viewEnd},function(data) {    
84.                for(var i=0;i<data.length;i++) {    
85.                    var obj = new Object();    
86.                    obj.id = data[i].id;    
87.                    obj.title = data[i].title;                   
88.                    obj.description = data[i].description;            
89.                    obj.color = data[i].color;  
90.                    obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);  
91.                    obj.messagenotice = data[i].messagenotice;  
92.                    obj.description = data[i].description;  
93.                    obj.start = $.fullCalendar.parseDate(data[i].start);                   
94.                    obj.end = $.fullCalendar.parseDate(data[i].end);   
95.                    $("#calendar").fullCalendar('renderEvent',obj,true);                     
96.                }    
97.              }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示  
98.            },  
99.            eventMouseover: function(event, jsEvent, view){                
100.                 showDetail(event, jsEvent);                   
101.            },  
102.             eventMouseout: function(event, jsEvent, view){  
103.                 $('#tip').remove();  
104.             },  
105.             //日程点击：添加日程  
106.             dayClick: function(date, allDay, jsEvent, view) {  
107.                  var obj =new Object();   
108.                  art.dialog.open('newschedule.html',{  
109.                     title: '添加日程',  
110.                     lock: true,  
111.                     width:300,  
112.                     height:400,  
113.                     fixed: true, //固定定位  
114.                     //background: '#600', // 背景色  
115.                     opacity: 0.6,   // 透明度  
116.                     // 在open()方法中，init会等待iframe加载完毕后执行  
117.                     init: function () {  
118.                         var iframe = this.iframe.contentWindow;  
119.                         //var top = art.dialog.top;// 引用顶层页面window对象  
120.                         var start = iframe.document.getElementById('form-start');                     
121.                         start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd HH:mm:ss");                              
122.                      },  
123.                      okVal:'提交日程',  
124.                      ok: function () {  
125.                         var iframe = this.iframe.contentWindow;  
126.                         if (!iframe.document.body) {  
127.                             alert('iframe还没加载完毕呢');  
128.                             return false;  
129.                         };  
130.                           
131.                         var start = iframe.document.getElementById('form-start').value;  
132.                         var end = iframe.document.getElementById('form-end').value;  
133.                         var remindertime = iframe.document.getElementById('form-remindertime').value;  
134.                         obj.title = iframe.document.getElementById('form-title').value;  
135.                         obj.description = iframe.document.getElementById('form-description').value;  
136.                         obj.start = $.fullCalendar.parseDate(start);  
137.                         obj.end = $.fullCalendar.parseDate(end);                                      
138.                         obj.color = iframe.document.getElementById('form-color').value;  
139.                         if (obj.title== '') {  
140.                             alert("标题不能为空");  
141.                             return false;  
142.                          }else if(start== '') {  
143.                             alert("开始日期不能为空");  
144.                             return false;  
145.                          }else if(end == '') {  
146.                             alert("结束日期不能为空");  
147.                             return false;  
148.                          }else if(iframe.document.getElementById('form-messagenotice').checked) {                          
149.                                 if(remindertime == '') {  
150.                                     alert("短信提醒时间不能为空");  
151.                                     return false;  
152.                                 }  
153.                                 obj.messagenotice = 1;  
154.                                 obj.remindertime = $.fullCalendar.parseDate(remindertime);  
155.                             }else {  
156.                                 obj.messagenotice = 0;  
157.                                 obj.remindertime = null;  
158.                             }             
159.                           
160.                          $.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台，保存到数据库       
161.                             title: obj.title,       
162.                             start:start,       
163.                             end:end,  
164.                             description:obj.description,                             
165.                             remindertime:remindertime,  
166.                             color:obj.color,  
167.                             messagenotice:obj.messagenotice  
168.                             },  
169.                             function (data, textStatus){  
170.                                 obj.id = data[0].id;  
171.                             }, "json"  
172.                           );                          
173.                           $('#calendar').fullCalendar('renderEvent', obj);  //核心的更新代码  
174.                           $('#calendar').fullCalendar('unselect');  
175.                           art.dialog.notice({  
176.                                 title: '笔记之家',  
177.                                 width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩  
178.                                 content: '日程已添加至后台！',  
179.                                 icon: 'face-smile',  
180.                                 time: 3  
181.                             });  
182.                           return true;                                
183.                        },  
184.                         cancel: true  
185.                     });   
186.             },  
187.             eventClick:function(calEvent, jsEvent, view){       
188.                 art.dialog.open('newschedule.html', {  
189.                     title: '更新日程',  
190.                     lock: true,  
191.                     width:300,  
192.                     height:400,  
193.                     //background: '#600', // 背景色  
194.                     opacity: 0.6,   // 透明度  
195.                     // 在open()方法中，init会等待iframe加载完毕后执行  
196.                     init: function () {  
197.                         var iframe = this.iframe.contentWindow;  
198.                         //var top = art.dialog.top;// 引用顶层页面window对象  
199.                         iframe.document.getElementById('form-start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd HH:mm:ss");                     
200.                         iframe.document.getElementById('form-end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd HH:mm:ss");  
201.                         iframe.document.getElementById('form-description').value = calEvent.description;  
202.                         iframe.document.getElementById('form-title').value = calEvent.title;  
203.                         if(calEvent.messagenotice == 1) {  
204.                             iframe.document.getElementById('form-messagenotice').checked = true;                              
205.                             iframe.document.getElementById('form-remindertime').value =  $.fullCalendar.formatDate(calEvent.remindertime,"yyyy-MM-dd HH:mm:ss");  
206.                             iframe.document.getElementById('showtxt').style.display='block';  
207.                         }else {                           
208.                         }  
209.                         iframe.document.getElementById('form-color').value = calEvent.color;                          
210.                     },  
211.                     okVal:'修改日程',  
212.                     ok: function () {  
213.                         var iframe = this.iframe.contentWindow;  
214.                         if (!iframe.document.body) {  
215.                             alert('iframe还没加载完毕呢')  
216.                             return false;  
217.                         };  
218.                           
219.                         var start = iframe.document.getElementById('form-start').value;  
220.                         var end = iframe.document.getElementById('form-end').value;  
221.                         var remindertime = iframe.document.getElementById('form-remindertime').value;  
222.                         calEvent.title = iframe.document.getElementById('form-title').value;  
223.                         calEvent.description = iframe.document.getElementById('form-description').value;  
224.                         calEvent.start = $.fullCalendar.parseDate(start);  
225.                         calEvent.end = $.fullCalendar.parseDate(end);                                     
226.                         calEvent.color = iframe.document.getElementById('form-color').value;  
227.                         if (calEvent.title== '') {  
228.                             alert("标题不能为空");  
229.                             return false;  
230.                          }else if(start== '') {  
231.                             alert("开始日期不能为空");  
232.                             return false;  
233.                          }else if(end == '') {  
234.                             alert("结束日期不能为空");  
235.                             return false;  
236.                          }else if(iframe.document.getElementById('form-messagenotice').checked) {                          
237.                                 if(remindertime == '') {  
238.                                     alert("短信提醒时间不能为空");  
239.                                     return false;  
240.                                 }  
241.                                 calEvent.messagenotice = 1;  
242.                                 calEvent.remindertime = $.fullCalendar.parseDate(remindertime);  
243.                             }else {  
244.                                 calEvent.messagenotice = 0;  
245.                                 calEvent.remindertime = null;  
246.                             }                           
247.                         $.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台，保存到数据库  
248.                                 id:calEvent.id,  
249.                                 title: calEvent.title,       
250.                                 start:start,       
251.                                 end:end,  
252.                                 description:calEvent.description,                                 
253.                                 color:calEvent.color,  
254.                                 remindertime:remindertime,  
255.                                 messagenotice:calEvent.messagenotice  
256.                             }                                         
257.                         );     
258.                         $('#calendar').fullCalendar('updateEvent', calEvent);  
259.                         //弹出提示  
260.                         art.dialog.notice({  
261.                             title: '笔记之家',  
262.                             width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩  
263.                             content: '日程已更新！',  
264.                             icon: 'face-smile',  
265.                             time: 3  
266.                         });  
267.                         return true;                              
268.                     },  
269.                     cancel: true,  
270.                   //删除日程，保存到数据库  
271.                     button: [{  
272.                         name: '删除日程',  
273.                         callback: function () {  
274.                             //this.content('你同意了').time(2);  
275.                              $.post("http://localhost:8080/pnote/schedule/deleteevents",{  
276.                                 id:calEvent.id  
277.                              });                     
278.                             $('#calendar').fullCalendar('removeEvents',calEvent.id);  
279.                             art.dialog.notice({  
280.                                 title: '笔记之家',  
281.                                 width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩  
282.                                 content: '日程已删除！',  
283.                                 icon: 'face-smile',  
284.                                 time: 3  
285.                             });  
286.                             return true;  
287.                          }            
288.                          }]  
289.                    });  
290.                 }  
291.             });               
292.         });  
293.   
294.     function showDetail(obj, e){  
295.         var str;  
296.         if(obj.messagenotice == 1)  str = "短信提醒时间："+$.fullCalendar.formatDate(obj.remindertime,"yyyy-MM-dd HH:mm:ss");  
297.         else {str = "短信提醒未启动";}  
298.         var eInfo = '<div id="tip"><ul>';  
299.         eInfo += '<li class="clock">' + '开始：'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss") +'</br>结束：'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd HH:mm:ss")+ '</li>';  
300.         eInfo += '<li class="message">' +'日志：'+ obj.description + '<br/> </li>';  
301.         //eInfo += '<li>分类：' + obj.title + '</li>';  
302.         eInfo += '<li class="postmessage">' + str + '<br/> </li>';  
303.         eInfo += '</ul></div>';  
304.         $(eInfo).appendTo($('body'));  
305.         $('#tip').css({"opacity":"0.4", "display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);  
306.         //鼠标移动效果  
307.         $('.fc-event-inner').mousemove(function(e){  
308.             $('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});  
309.         });  
310.     }     
311.       
312. </script>  
313. <style type='text/css'>  
314.   
315.     body {  
316.         margin-top: 10px;  
317.         text-align: center;  
318.         font-size: 13px;  
319.         font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;  
320.         }  
321.       
322.     /********************************************** 鼠标悬停tip提示  ************************************************/  
323.     #tip{  
324.         position: absolute;  
325.         width: 250px;  
326.         max-width: 400px;  
327.         text-align: left;  
328.         padding: 4px;  
329.         border: #87CEEB solid 7px;  
330.         border-radius: 5px;  
331.         background: #00BFFF;  
332.         z-index: 1000;  
333.         behavior: url('/css/css3/pie.htc');  
334.     }  
335.     #tip ul{  
336.         margin: 0;  
337.         padding: 0;  
338.     }  
339.     #tip ul li{  
340.         font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;  
341.         font-size:15px;  
342.         list-style: none;  
343.         padding-left: 40px;  
344.     }  
345.     .clock{  
346.         /*line-height: 60px;*/  
347.         background: url('./fullcalendar/images/clock.png') no-repeat;  
348.         background-size:40px 40px;  
349.     }  
350.     .postmessage{  
351.         /*line-height: 60px; 
352.         font-size: 12px;*/  
353.         background: url('./fullcalendar/images/message.png') no-repeat;  
354.         background-size:40px 40px;  
355.     }  
356.     .message{  
357.         /*margin-top: 5px;*/  
358.         /*line-height: 60px;*/  
359.         background: url('./fullcalendar/images/text.png') no-repeat;  
360.         background-size:40px 40px;  
361.     }  
362. </style>  
363. </head>  
364. <body>  
365.     <div id="container">  
366.         <div id='selectdate'></div>  
367.         <div id='calendar'></div>     
368.     </div>      
369. </body>  
370. </html>