python做项目日程表_在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 '~@fullcalendar/daygrid/main.css';

功能定制

为了完成复杂功能，需要引用更多插件，插件列表：

语言设置简体中文

如果表头加了button的话，button文字要单独做处理，给每个button的英文名称加一个中文的映射，例：

locale="zh-cn"

:header="{

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'

}"

:buttonText="buttonText"

/>

data () {

return {

buttonText: {

today: '今天',

month: '月',

week: '周',

day: '天'

}

}

}

动态获取日历事件

当切换月份或者进行其他操作时，需要动态获取events，可以将events的来源设置成一个function，例：

locale="zh-cn"

:header="{

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'

}"

:buttonText="buttonText"

:events="getCalendarEvents"

/>

methods: {

getCalendarEvents(info, successCallback, failureCallback){

let events=[

...this.calendarEvents,

{

title: info.startStr,

start: info.start.valueOf(),

}

]

successCallback(events)

}

}

参数说明：

successCallback是成功回调，failureCallback是失败回调，info是一个对象，内容如下：

点击日历添加事件

想要触发dateClick事件必须先安装引用interaction插件，文档链接：https://fullcalendar.io/docs/dateClick

npm install --save @fullcalendar/interaction

handleDateClick (arg) {

if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {

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

title: 'New Event',

start: arg.date,

allDay: arg.allDay

})

this.calendarApi.refetchEvents()

}

}

点击事件查看详情

handleEventClick (info) {

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

}

官方文档：