Fullcalender 4日視圖

Question

我正在使用jQuery完整日曆並堅持使用視圖。我想要一個4天的視圖，就像Google日曆一樣。這可能嗎？任何幫助？提前致謝。

Answer 1

對於完整日曆的2.2.5以上版本，這種類型的視圖自定義更容易。

將這樣的東西添加到您的日曆uiConfig現在應該做到這一點。

views: { 
    agendaFourDay: { 
    type: 'agenda', 
    duration: { days: 4 }, 
    buttonText: '4 day' 
    }, 
    defaultView: 'agendaFourDay' 
} 

您可以從文檔頁面獲得Custom Views更多相關信息。

Answer 2

Fullcalendar只有3個視圖，月，周和日視圖acctualy 5 agendaWeek + agendaDay，例如在周視圖中，如果您有此設置here並將其設置爲false，則您的周視圖將只顯示常見工作日5天。

Answer 3

我能夠通過每次視圖更改時重新呈現日曆來對此進行排序。這顯然不是理想的，但它現在完成了工作（對我而言）。

我在同一頁面上使用多個日曆，所以我讓這個函數來處理每個日曆的渲染。

var calendarInit = function(calendar, start, defaultView){ 

    $('#' + calendar).fullCalendar('destroy') 

    var dayNumber = start.getDay(); 
    var hiddenDays = [] 
    if (defaultView === 'agendaWeek'){ 
     dayNumber = dayNumber + 3 
     if (dayNumber > 6) { 
      dayNumber = dayNumber - 7 
     } 
     for (var i=0;i<3;i++) { 
      dayNumber++ 
      if (dayNumber > 6) { 
       dayNumber = dayNumber - 7 
      } 
      hiddenDays.push(dayNumber) 
     } 
    } 


    var data = { 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultView: defaultView, 
     editable: true, 
     durationEditable: false, 
     allDaySlot: false, 
     events: '/' + calendar + '.json', 
     firstDay: dayNumber, 
     hiddenDays: hiddenDays, 
     date: start.getDate(), 
     month: start.getMonth() 
    } 


    $('#' + calendar).fullCalendar(data) 


    var currentDate = $('#' + calendar).fullCalendar('getDate') 

    if (defaultView === 'agendaWeek'){ 
     $('.fc-button-next, .fc-button-prev, .fc-button-month').addClass('ignore') 

     $('#' + calendar + ' .fc-button-next').click(function() { 
      currentDate.setDate(currentDate.getDate()+4); 
      calendarInit(calendar, isMaster, currentDate, defaultView) 
     }) 
     $('#' + calendar + ' .fc-button-prev').click(function() { 
      currentDate.setDate(currentDate.getDate()-4); 
      calendarInit(calendar, isMaster, currentDate, defaultView) 
     }) 
     $('.fc-button-month').click(function() { 
      calendarInit(calendar, isMaster, start, 'month') 
     }) 
    } 

    $('.fc-button-agendaWeek').click(function() { 
     calendarInit(calendar, isMaster, currentDate, 'agendaWeek') 
    }) 
    $('.fc-button-agendaDay').click(function() { 
     calendarInit(calendar, isMaster, currentDate, 'agendaDay') 
    }) 

} 
//render the initial calendar 
calendarInit('confirmed', true, date, 'agendaWeek') 

我也只好在編輯線806 fullcalendar.js源獲得日曆忽略按鈕點擊如果日曆會重新渲染：

.click(function() { 
    if (!button.hasClass(tm + '-state-disabled') && !button.hasClass('ignore')) { 
     buttonClick(); 
    } 
}) 

這是非常哈克，並希望有人推薦編輯或替代解決方案。我正在爲客戶做這件事，所以我會回來進行任何編輯或進一步的評論，我最終加入。