設計自定義視圖年12個月插槽

我想創建一個自定義的一年視圖來顯示每月插槽的時間表。我可以使用fullcalendar調度使用自定義視圖，並這樣定義：

views: { 
    timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View',    
    duration: {year:1}, 
    slotDuration: {month:1} 
    } 
}

但是，沒有辦法建立與月開始的財年視圖在4月1日和結束在3月31日，明年。而且，即使事件僅從該月的下半月開始，時間線欄也將涵蓋整個月的時段。

來源

2017-04-17 Joey Yao

可以在「時間」對象或「視圖」對象，可以控制一個3級的時間表（年/月/日）放在什麼PARAMS？ –

我找到了使用最新的fullCalendar的解決方案 - 請參閱下面的答案。 – ADyson

@JoeyYao：你能創建這種類型的調度器嗎？ –

您的第一個問題 - 在四月份開始查看並在下一年的三月份結束，可以使用新的「visibleRange」選項解決。這使您可以提供與「currentDate」相關的視圖的開始/結束日期（即fullCalendar最終被視爲被選中的日期）。您還必須設置「dateIncrement」選項，以確保Next/Previous將當前日期增加1年。

N.B.這需要fullCalendar 3.3.0和Scheduler 1.6.0或更高版本。

timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View', 
    dateIncrement: { years: 1 }, 
    slotDuration: { months: 1 }, 
    visibleRange: function(currentDate) { 
     return { 
      start: currentDate.clone().startOf('year').add({ months: 3}), 
      end: currentDate.clone().endOf("year").add({ months: 4}) 
     }; 
    } 
}

更多細節

然而，你的問題，即時間軸條涵蓋儘管事件只開始在每月的第二個半整整一個月插槽見https://fullcalendar.io/docs/current_date/visibleRange/和https://fullcalendar.io/docs/current_date/dateIncrement/，是不是真的可以解決你想要的方式。「插槽」的整點是在特定視圖中可以顯示事件的最短時間。如果你希望它比這更微妙，你將不得不定義更短的時隙。同樣的事情發生在fullCalendar的默認「月」（非時間軸）視圖 - 所有事件都會覆蓋一整天，即使它們是計時的，但您可以在描述中看到時間。我在你的例子中看到你已經得到了描述中顯示的那些事件的日期，所以對你的用戶應該是合理的。

我建議您的用戶點擊月視圖以更準確地顯示插槽持續時間，以獲得更詳細的細分。無論是或者你必須妥協並將slotDuration設置爲更小的東西。

來源

2017-04-21 09:31:14 ADyson

是的，我意識到，如果我需要一個特定的日期範圍，我必須使用「天」的插槽。而你的解決方案真的幫助我解決了第一個問題。我在「visibleRange結束」編輯了一下，使其工作（end：currentDate.clone（）。endOf（「year」）.add（{months：4}））。非常感謝！ –

太棒了，很高興它有幫助。感謝您在結束日期時指出錯誤 - 修改了答案以反映這一點。 – ADyson

設計自定義視圖年12個月插槽

回答

相關問題