fullcalendar帶資源的年度視圖

Question

我們有建設年份視圖資源的要求。但是我們無法做到這一點，因爲事件的焦點不會轉移到其他月份，甚至事件在各自的位置上都沒有約束力。任何人都可以提供解決方案，以建立年份視圖日曆與資源？

我們引用此鏈接建設年查看日曆與資源：

http://tux.fi/~jarnok/fullcalendar-resourceviews/

Answer 1

我們剛纔通過創建自定義月屬性和迭代times.we創建12個div的日曆12實現它。每個div將綁定一個日曆。 下面是代碼

 var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
      var calendar = new Array(); 

     for (var i = 0; i < 12; i++) { 
      calendar[i] = $("div[id='calendar" + i + "']").fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right:'resourceDay,resourceWeek,resourceNextWeeks,resourceMonth' 
       }, 
       defaultView: 'resourceMonth', 
       firstDay: 1, 
       editable: true, 
       selectable: true, 
       minTime: 8, 
       maxTime: 16, 
       monthno: i, //custom property 
       selectHelper: true, 
       resources: [{ "name": "Resource 1", "id": "resource1" }, 
       { "name": "Resource 2", "id": "resource2" }, 
       { "name": "Resource 3", "id": "resource3" }, 
       { "name": "Resource 4", "id": "resource4" } 
       ], 
       events: [ 
      { 
       title: 'Lunch 12.15-14.45', 
       start: new Date(y, m, d, 12, 15), 
       end: new Date(y, m, d, 14, 45), 
       allDay: false, 
       resource: 'resource1' 
      }, 
      { 
       title: 'Meeting', 
       start: new Date(y, m, d, 10, 30), 
       end: new Date(y, m, d + 4, 11, 00), 
       allDay: false, 
       resource: 'resource1' 
      }, 
       { 
        title: 'All Day Event', 
        start: new Date(y, m, 1), 
        resource: 'resource2' 
       } 
     ], 
       dayClick: function (date, allDay, jsEvent, view) { 
        alert(date); 
       }, 
       select: function (start, end, allDay, jsEvent, view, resource) { 
        var title = prompt('event title:'); 
        if (title) { 
         calendar[start.getMonth()].fullCalendar('renderEvent', 
        { 
         title: title, 
         start: start, 
         end: end, 
         allDay: allDay, 
         resource: resource.id 
        }, 
        true // make the event "stick" 
       ); 
        } 
        calendar[start.getMonth()].fullCalendar('unselect'); 
       }, 
       eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { 
        alert('event moved to ' + event.start + ' to ' + event.resource); 
       }, 
       eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { 
        alert('event was resized, new endtime: ' + event.end); 
       }, 
       eventClick: function (event, jsEvent, view) { 
        alert('event ' + event.title + ' was clicked'); 
       }     
      }); 
     }   

--------------------------- 



<div id="mainContainer"> 

<h2>Calendar Demo</h2> 
    <div class="fc fc-ltr" id="calendar0" month="0" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar1" month="1" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar2" month="2" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar3" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar4" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar5" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar6" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar7" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar8" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar9" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar10" month="3" style="font-size:13px"></div> 
    <div class="fc fc-ltr" id="calendar11" month="3" style="font-size:13px"></div> 
    </div>