原标题：在Vue框架下使用Fullcalendar

Fullcalendar是一个非常受欢迎的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar(v3)的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。

安装Fullcalendar

首先第一步当然是安装FullCalendar相关的依赖。我们需要安装Vue适配、核心包以及任何你想添加的功能插件。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

FullCalendar v4以核心代码和插件形式提供给用户安装，因此我们需要哪些功能，就直接安装对应的插件即可。使用时可以参照：功能插件列表。

如何使用

首先我们建立一个Main.vue文件，在模板中编写：

:eventTimeFormat= "evnetTime"

:header= "header"

@dateClick= "handleDateClick"

:plugins= "calendarPlugins"

:events= "calendarEvents"

@eventClick= "handleEventClick"

/>

我们在 中定义了 组件，包括属性和方法。

defaultView ：表示当前默认使用的是月份视图，就是看到的是一个月的视图。还有日视图和周视图等。

locale ：本地化，我们使用中文简体。

firstDay ：一周的第一天，我们中文习惯是星期一是一周的第一天。

weekNumberCalculation ：与 firstDay 配合，设置成 ISO ，一周第一天为星期一。

header ：日历的头部设置，包括标题，左右按钮设置等。

events ：日程事件内容。

更多属性方法可以查看文档：官方文档。v3中文文档请移步：https://www.helloweba.net/java/445.html。

然后在java部分，先导入组件和样式。

importFullCalendar from'@fullcalendar/vue'

importdayGridPlugin from'@fullcalendar/daygrid'

importinteractionPlugin from'@fullcalendar/interaction'

import'@fullcalendar/core/main.css';

接着，将数据定义好，包括接口、事件内容等等，以及方法调用。注意，需要使用Fullcalendar功能插件，必须在 calendarPlugins 定义好。

exportdefault{

components: {

FullCalendar

},

data {

return{

calendarPlugins: [

dayGridPlugin,

interactionPlugin

],

header: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay'

},

evnetTime: {

hour: 'numeric',

minute: '2-digit',

hour12: false

},

calendarEvents: [

{ title: '部门会议', start: newDate}

]

}

},

methods: {

handleDateClick(arg) {

if(confirm( '您是否要在'+ arg.dateStr + '添加一个新的事件?')) {

this.calendarEvents.push({ // add new event data

title: '新的事件',

start: arg.date,

allDay: arg.allDay

})

}

},

handleEventClick(info) {

alert( 'Event: '+ info.event.title);

info.el.style.borderColor = 'red';

}

}

}

保存，执行 npm run dev ，就可以看到Fullcalendar渲染的日程页面了。

Fullcalendar官网还提供了在React和Angular框架下使用方法。

这是一个简单的vue fullcalendar实例，更复杂高级的应用敬请关注本站后面推出的相关文章。返回搜狐，查看更多

责任编辑：