全日历周视图：顶部的资源和左轴的时间段答案

【问题标题】：Full calendar Week view: resources on the top and time slots on the left axis全日历周视图：顶部的资源和左轴的时间段
【发布时间】：2016-02-16 19:02:37
【问题描述】：

我正在使用 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' }
    ]
  });

结果： I want to switch the axis

我需要在顶部有资源，在左轴上有时间段。

非常感谢您的帮助。

【问题讨论】：

标签： fullcalendar

【解决方案1】：

将defaultView 属性设置为agendaDay。

例如

defaultView: 'agendaDay';

【讨论】：

谢谢。我已经做了。资源添加在顶部。但时间段是几小时而不是几天...我需要一周视图
defaultView: 'agendaDay';提供一天的视图，而我正在寻找整个星期的视图。
参考以下链接获取更多信息...http://fullcalendar.io/docs/vertical_resource_view/groupByDateAndResource/

【解决方案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>');
            },
        });

结果如下： I want days on the left side not hours

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

再次感谢您的帮助。

【讨论】：