前段時間做了一個簡單的頁面需要用到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 - 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 }下面的程式碼是我新增了一個下拉框，用來控制日曆中顯示的事件
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();因為有些程式碼要刪除，所以要保存起來又容易查看，就把它記錄在這裡。第一次寫博客，不足之處還望見諒。以後會改進的
以上是fullcalendar入門實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
