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小时内删除侵权内容。