fullcalendar入门笔记

前段时间做了一个简单的页面需要用到fullcalendar，索性到官网上查看了文档，没有什么心得，只剩下这么点代码，以后有新的发现，会添加进来

 1 function calender(){
 2             $("#calendar").fullCalendar({
 3                 /* weekMode: \'variable\', */
 4                 /* columnFormat: {
 5                     month: \'dddd\',
 6                     week: \'dddd M-d\',
 7                     day: \'dddd M-d\'
 8                 }, */
 9                 titleFormat:\'MMMM YYYY\', 
10               /*monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
11                 monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
12                 dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
13                 dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], */
14                 /* businessHours: {//工作日 工作时间
15                     // days of week. an array of zero-based day of week integers (0=Sunday)
16                     dow: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
17 
18                     start: \'9:00\', // a start time (10am in this example)
19                     end: \'18:00\', // an end time (6pm in this example)
20                 }, */
21                 header: {
22                     left: \'month,agendaWeek,agendaDay\',
23                     center: \'title\',
24                     right: \'today prev,next\'
25                 },
26                 
27                 weekNumbers:true,//确定周数是否应显示在日历上。
28                 weekNumbersWithinDays:true,//确定月视图中的星期编号和基本视图的样式。 */
29                 showNonCurrentDates:false,//在月视图下，是否应该在上一个月或下个月的日期。
30                 /* contentHeight: 600, *///将使日历的内容区域成为像素高度。
31                 /* handleWindowResize:true,//是否在浏览器窗口调整大小时自动调整日历大小。 */
32                 defaultDate:new Date(),/*默认日期*/ 
33                 navLinks: true, // can click day/week names to navigate views
34                 editable: false,
35                 eventLimit: true, // 限制一天中显示的事件数。
36                 /* dayPopoverFormat:\'dddd, MMMM D\', *///确定由eventLimitClick选项创建的popover的标题的日期格式。
37                 /* columnFormat:\'dddd\', */
38                 
39                      views: {
40                             basic: {
41                                 titleFormat:\'MMMM YYYY\', // options apply to basicWeek and basicDay views
42                             },
43                             agenda: {
44                                 titleFormat:\'MMMM  YYYY\',// options apply to agendaWeek and agendaDay views
45                             },
46                             week: {
47                                 titleFormat:\'MMMM YYYY\',// options apply to basicWeek and agendaWeek views
48                             },
49                             day: {
50                                 titleFormat:\'MMMM d,YYYY\',// options apply to basicDay and agendaDay views
51                             }
52                      },
53                 events: {  
54                     url: "showDate.action",
55                     type: \'POST\',
56                     success:function(data){
57                         if(data=="9"){
58                             window.location.href="/YKD/heal/index.html";
59                         }
60                     },
61                     error: function() {  
62                         alert(\'there was an error while fetching events!\');  
63                     },  
64                     color:\'#3A87AD\',// 背景色  
65                     textColor:\'white\'// 文字颜色  
66                 }  
67             });
68     }

下面的代码是我添加了一个下拉框，用来控制日历中显示的事件

 1 $(\'#selc\').change( function(){
 2               var events = {
 3                url: "showDate.action",
 4                type: "POST",
 5                data: {
 6                 "divcode": $(this).val()
 7                },
 8               success:function(data){
 9                     if(data=="9"){
10                         window.location.href="/YKD/heal/index.html";
11                     }
12               }
13               };
14               $(\'#calendar\').fullCalendar( \'removeEventSource\', events);
15               $(\'#calendar\').fullCalendar( \'addEventSource\', events);   
16               $(\'#calendar\').fullCalendar( \'refetchEvents\' );
17              }).change();

因为有些代码要删除，所以要保存起来又容易查看，就把它记录在这里。第一次写博客，不足之处还望见谅。以后会改进的