Question

我们需要使用资源构建年视图日历。但我们无法做到这一点，因为事件的焦点不会转移到其他月份，甚至事件也不会在各自的位置上具有约束力。任何人都可以提供使用资源构建年度视图日历的解决方案吗？

我们在使用资源构建年度日历日历中引用了此链接：

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

Answer 1

我们只是通过创建自定义月份属性并迭代日历12次来实现它。我们创建了12个div。每个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>

fullcalendar年度视图与资源

1 个答案: