完整日历周视图:资源位于顶部，时间段位于左侧轴

Question

我正在使用 fullcalendar-2.6.0 和 fullcalendar-scheduler-1.2.0。

下面是我的代码：

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    now: '2016-02-15',
    lang: 'fr',
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
    },
    customButtons: {
      promptResource: {
        text: '+ room',
        click: function() {
          var title = prompt('Room name');
          if (title) {
            $('#calendar').fullCalendar(
              'addResource',
              { title: title },
              true // scroll to the new resource?
            );
          }
        }
      }
    },
    defaultView: 'timelineWeek',
    views: {
      timelineWeek: {
        slotDuration: { days: 1 }
      }
    },
    resourceLabelText: 'PK',
    resources: [
      { id: 'a', title: '163+000' },
      { id: 'b', title: '164+000', eventColor: 'green' },
      { id: 'c', title: '165+000', eventColor: 'orange' },
      { id: 'd', title: '166+000' },
      { id: 'e', title: '167+000' },
      { id: 'f', title: '168+000', eventColor: 'red' },
      { id: 'g', title: '169+000' },
      { id: 'h', title: '170+000' },
      { id: 'i', title: '171+000' },
      { id: 'j', title: '172+000' },
      { id: 'k', title: '173+000' },
      { id: 'l', title: '174+000' }
    ],
    events: [
      { id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
      { id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
      { id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
      { id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
    ]
  });

结果：我想切换轴

我希望资源在顶部，时间段在左轴。

非常感谢您的帮助。

Answer 1

将 defaultView 属性设置为 agendaDay 。

例如

defaultView: 'agendaDay';

Answer 2

我读了你刚刚发给我的链接。下面是我的代码：

            $('#calendar').fullCalendar({
            defaultView: 'week',
            defaultDate: '2016-02-15',
            now: '2016-02-16',
            lang: 'fr',
            editable: true,
            selectable: true,
            eventLimit: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'week'
            },
            views: {
                week: {
                    type: 'agenda',
                    duration: { days: 7 },
                    groupByResource: true
                }
            },
            //// uncomment this line to hide the all-day slot
            allDaySlot: false,
            events: [
                { id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
                { id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
                { id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
                { id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
                { id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
            ],
            resources: function (callBack) {
                callBack([
                    { id: 'a', title: '163+000', altTitle: '163+000' },
                    { id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
                    { id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
                    { id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
                ]);
            },
            resourceRender: function (dataTds, eventTd) {
                console.log('resourcerender');
                console.log(eventTd);
                console.log(dataTds);
                var textElement = eventTd.empty();
                textElement.append('<b>' + dataTds.altTitle + '</b>');
            },
        });

结果如下：我想要左边的几天而不是几个小时

结果比以前好多了，但我仍然需要在左侧有几天，而不是几个小时。我不需要在顶部的日子。

再次感谢您的帮助。