Vue進階（幺柒貳）：日程日歷@ fullcalendar/vue應用
前言
在項目實戰過程中，需要為項目主頁實現日程日歷功能，主要包括日程的增刪改查。
在網上研究一番后，經過對比發現一款比較好用的良心插件Fullcalendar。
Fullcalendar是一個可以創建日歷日程管理的開源組件。下面讓我們來認識下該日程日歷組件的強大吧。
本文由以下幾個部分組成：
1.安裝fullcalendar
2.簡易DEMO代碼
3.Template中FullCalendar屬性注解
4.script中FullCalendar屬性方法注解
安裝Fullcalendar
Vue框架下，fullcalendar被封裝成了幾種不同的版本,
@ fullcalendar/vue
vue-fullcalendar
需要注意的是，以上兩種用法不一樣，不要搞混淆了！
本文重點關注第一種 @ fullcalendar/vue 的用法。經實踐，第二種實現效果不友好。
首先下載安裝相關依賴包。
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
1
簡易DEMO代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
以上示例代碼注釋中已清楚講述了各參數的具體含義，下面就主要參數進行簡單講解。
Template中FullCalendar屬性注解：
defaultView
表示當前默認使用的是月份視圖(dayGridMonth)，就是看到的是一個月的視圖。還有日視圖(dayGridDay)和周視圖(dayGridWeek)等。如果安裝了timeGridPlugin，還會有(timeGridWeek, timeGridDay)諸如此類的時間視圖。
locale
本地化，我們使用中文簡體（zh-cn）。
firstDay
一周的第1天，firstDay=“1”表示星期一顯示在第一個。
weekNumberCalculation
與firstDay 配合，設置成ISO ，一周第一天為星期一。
script中FullCalendar屬性方法注解：
calendarPlugins
通過:plugins=“calendarPlugins”，然后在calendarPlugins中定義并引用要使用的功能插件。 calendarPlugins：[dayGridPlugin, interactionPlugin]
eventTimeFormat
通過:eventTimeFormat=“eventTime”，在eventTime中定義事件的格式。
header
日程日歷頭部布局樣式，left,center,right，均可使用標題(title)，前后按鈕(prev,next), 切換按鈕（today，dayGridMonth，dayGridDay，dayGridWeek）設置。
buttonText
header中按鈕默認都是顯示的英文，如果要人工手動改成中文，用:buttonText=“buttonText”來改，在buttonText:{today: ‘今天’, month:‘月’}中建立1對1的映射關系。
events
日程事件的具體內容和數據。
dateClick
通過@dateClick=“handleDateClick”綁定函數來觸發。指點擊日程具體日期單元格時觸發的事件。
eventClick
通過@eventClick=“handleEventClick”綁定函數來觸發。指點擊具體日程events時觸發的事件。
npm run dev后，通過 localhost:8080可以看到以下效果：
注：日程日歷插件的樣式可以通過F12進行逐步優化。日程日歷中更豐富、炫酷的效果及事件處理機制詳參鏈接（英文）、鏈接（中文）。
拓展閱讀
fullcalendar文檔
https://fullcalendar.io/
https://fullcalendar.io/docs/vue
https://www.helloweba.net/search.html?keys=fullcalendar
項目地址
https://github.com/fullcalendar/fullcalendar
https://github.com/fullcalendar/fullcalendar-vue
Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
