Spring进阶（一）：Springmvc常用注解标签详解（spring springmvc常用注解）
2197
2022-05-30
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小时内删除侵权内容。
相关文章
推荐文章
最近发表
