前段时间做了一个简单的页面需要用到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 - Thursday 17 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 views 34 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 views 42 }, 43 agenda: { 44 titleFormat:'MMMM YYYY',// options apply to agendaWeek and agendaDay views 45 }, 46 week: { 47 titleFormat:'MMMM YYYY',// options apply to basicWeek and agendaWeek views 48 }, 49 day: { 50 titleFormat:'MMMM d,YYYY',// options apply to basicDay and agendaDay views 51 } 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();
因为有些代码要删除,所以要保存起来又容易查看,就把它记录在这里。第一次写博客,不足之处还望见谅。以后会改进的