Maison > interface Web > js tutoriel > le corps du texte

Exemple de didacticiel de mise en route de Fullcalendar

零下一度
Libérer: 2017-06-26 09:06:57
original
4413 Les gens l'ont consulté

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     }
Copier après la connexion

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();
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal