在Vue框架下使用Fullcalendar
原文：https://www.helloweba.net/javascript/621.html
Fullcalendar是一个非常受欢迎的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar（v3）的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。
安装Fullcalendar
首先第一步当然是安装FullCalendar相关的依赖。我们需要安装Vue适配、核心包以及任何你想添加的功能插件。
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
FullCalendar v4以核心代码和插件形式提供给用户安装，因此我们需要哪些功能，就直接安装对应的插件即可。使用时可以参照：功能插件列表。
如何使用
首先我们建立一个Main.vue文件，在模板中编写：
<FullCalendar defaultView="dayGridMonth" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO"
:eventTimeFormat="evnetTime"
:header="header"
@dateClick="handleDateClick"
:plugins="calendarPlugins"
:events="calendarEvents"
@eventClick="handleEventClick"
/>
我们在<template/>中定义了<FullCalendar/>组件，包括属性和方法。
defaultView：表示当前默认使用的是月份视图，就是看到的是一个月的视图。还有日视图和周视图等。
locale：本地化，我们使用中文简体。
firstDay：一周的第一天，我们中文习惯是星期一是一周的第一天。
weekNumberCalculation：与firstDay配合，设置成ISO，一周第一天为星期一。
header：日历的头部设置，包括标题，左右按钮设置等。
events：日程事件内容。
更多属性方法可以查看文档：官方文档。v3中文文档请移步：https://www.helloweba.net/javascript/445.html。
然后在javascript部分，先导入组件和样式。
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css';
接着，将数据定义好，包括接口、事件内容等等，以及方法调用。注意，需要使用Fullcalendar功能插件，必须在calendarPlugins定义好。
export default {
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: new Date() }
]
}
},
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实例，更复杂高级的应用敬请关注本站后面推出的相关文章。
