完整日曆周視圖：頂部資源和左軸上的時隙

我正在使用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

我NEDD會對左軸頂部和時隙資源。

非常感謝您的幫助。

來源

2016-02-16 zineb KABBAJ

將defaultView屬性設置爲agendaDay。

例如，

defaultView: 'agendaDay';

來源

2016-02-16 10:00:48

謝謝。我已經做了。資源添加在頂部。但時間段是幾小時而不是幾天...我需要有一個星期的視圖 –

defaultView：'agendaDay';提供了一整天的視圖，而我正在尋找整個星期的視圖。 –

請參考以下鏈接獲取更多信息......'http：// fullcalendar.io/docs/vertical_resource_view/groupByDateAndResource /' –

我看了你剛發給我的鏈接。下面是我的代碼：

  $('#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

結果是比以前好多了，但我仍然需要有在左側，而不是幾小時天。我不需要日子在頂端。

再次感謝您的幫助。

來源

2016-02-16 11:02:37

完整日曆周視圖：頂部資源和左軸上的時隙

回答

相關問題