Home >Web Front-end >JS Tutorial >Fullcalendar Getting Started Example Tutorial
I made a simple page some time ago that needed to use fullcalendar. I simply went to the official website to check the documentation. I didn’t have much experience. There was only this little code left. If there are new discoveries in the future, I will add them.
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 }
The following code is a drop-down box I added to control the events displayed in the calendar
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();Because some codes need to be deleted, they need to be saved again. Easy to view, just record it here. This is my first time writing a blog, so I apologize for any shortcomings. It will be improved in the future
The above is the detailed content of Fullcalendar Getting Started Example Tutorial. For more information, please follow other related articles on the PHP Chinese website!