FullCalendar Library 自定不同 views 的 tab 名

使用版本為 FullCalendar v5.11.2

 

FullCalendar 本身支援多種 view，例如 Month view、DayGrid View、Timeline……等等

 

但 tab 的名稱只會顯示 month、list……之類的

要更改的方式如下 

首先，先增加 tab ，例如我要有 dayGridMonth 和 listMonth：

new FullCalendar.Calendar(
	document.getElementById("calendar-content"), 
	{
		initialView: "dayGridMonth",         // 默認為 dayGridMonth
		headerToolbar: {
			center: "dayGridMonth,listMonth" // tab 為 dayGridMonth 和 listMonth
		}
	}
)

之後就是設置這些 view 的 tab name

這裡得抱怨一下，這些 tab 的設定有夠難找，原來是在 toolbar 那一區……誰知道啦！(º﹃º)

tab name 設定方式如下

new FullCalendar.Calendar(
	document.getElementById("calendar-content"), 
	{
		initialView: "dayGridMonth",	
		headerToolbar: {
			center: "dayGridMonth,listMonth" 
		},
		views: {
			dayGridMonth: {                // obj key 為 view 的 name
				buttonText: "月曆檢視"      // 使用 buttonText 設定 tab name
			},
			listMonth: {
				buttonText: "清單檢視（月）"
			}
		}
	}
)

這樣就完成了