vue日程安排_在Vue项目中用fullcalendar制作日程表的示例代码

前言

最近老牌日历插件fullcalendar更新了v4版本，而且添加了Vue支持，所以用最新的fullcalendar v4制作一个完整日历体验一下，效果图：

安装

FullCalendar的功能被分解为“插件”。如果您需要它提供的功能，您只需要包含一个插件。

也就是说，FullCalendar v4所有插件都得单独安装引用。

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

引用并初始化

引用、注册FullCalendar组件，得到一个月视图的日历。

import FullCalendar from '@fullcalendar/vue'

import dayGridPlugin from '@fullcalendar/daygrid'

export default {

components: {

FullCalendar

},

data() {

return {

calendarPlugins: [ dayGridPlugin ]

}

}

}

//用什么插件必须引入相应的样式表，否则不能正常显示

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

@import '~@fullcal