Exemple de didacticiel de mise en route de Fullcalendar

J'ai créé il y a quelque temps une page simple qui nécessitait d'utiliser fullcalendar. Je suis simplement allé sur le site officiel pour vérifier la documentation. Je n'avais pas beaucoup d'expérience. Il ne restait que ce petit code. Je vais ajouter de nouvelles découvertes. dans le futur

 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     }

Le code suivant est que j'ai ajouté une liste déroulante pour contrôler les événements affichés dans le calendrier

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

Parce que certains codes doivent être supprimés, donc pour le sauvegarder et le voir facilement, enregistrez-le ici. C'est la première fois que j'écris un blog, je m'excuse donc pour les éventuelles lacunes. Il sera amélioré à l'avenir

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!