Fullcalendar-Beispiel-Tutorial „Erste Schritte'.

Ich habe vor einiger Zeit eine einfache Seite erstellt, die ich verwenden musste, um die Dokumentation zu überprüfen. Da war nur noch dieser kleine Code übrig in der Zukunft

 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 - Thursday17 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 views34                 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 views42                             },43                             agenda: {44                                 titleFormat:'MMMM  YYYY',// options apply to agendaWeek and agendaDay views45                             },46                             week: {47                                 titleFormat:'MMMM YYYY',// options apply to basicWeek and agendaWeek views48                             },49                             day: {50                                 titleFormat:'MMMM d,YYYY',// options apply to basicDay and agendaDay views51                             }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     }

Mit dem folgenden Code habe ich ein Dropdown-Feld hinzugefügt, um die im Kalender angezeigten Ereignisse zu steuern

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

Da einige Codes gelöscht werden müssen, notieren Sie sie hier, um sie zu speichern und leicht anzuzeigen. Da ich zum ersten Mal einen Blog schreibe, entschuldige ich mich für etwaige Mängel. Es wird in Zukunft verbessert

Das obige ist der detaillierte Inhalt vonFullcalendar-Beispiel-Tutorial „Erste Schritte'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!