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();

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

转载于:https://www.cnblogs.com/from2017/p/7007618.html