얼마전에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!