FullCalendar日历组件集成系列3——插件与界面优化

大家好，欢迎来到IT知识分享网。

插件

import FullCalendar from '@fullcalendar/vue3' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' 

daygrid插件

timegrid插件

timegrid插件需要安装，如下：

pnpm install @fullcalendar/timegrid 

然后引入和配置：

import FullCalendar from '@fullcalendar/vue3' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import timeGridPlugin from '@fullcalendar/timegrid' export default { name: 'ListByCalendar', components: { FullCalendar }, data() { return { calendarOptions: { // 插件列表 plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], 

同时，需要将头部按钮调整下，使用timeGridWeek替代掉dayGridWeek，使用timeGridDay替代掉dayGridDay，如下：

// 头部显示 headerToolbar: { left: 'today', center: 'prev title next', right: 'dayGridMonth,timeGridWeek,timeGridDay,' } 

listgrid插件

pnpm install @fullcalendar/list 

界面优化

更改all-day 显示文本

// 更改all-day 显示文本 allDayText: '全天' 

增加周次显示

// 周次 weekNumbers: true, 

优化周次显示

// 开启周次显示 weekNumbers: true, // 显示周次文本 weekText: '周', 

 // 设置周次显示 weekNumberContent: this.weekNumberContent methods: { // 设置周次显示 weekNumberContent(arg) { return '第' + arg.num + '周' } } 

设置主题风格

pnpm install @fullcalendar/bootstrap5 pnpm install bootstrap pnpm install bootstrap-icons 

经测试，以上3个一个都不能少，然后在配置中引入：

import bootstrap5Plugin from '@fullcalendar/bootstrap5' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-icons/font/bootstrap-icons.css' 

开启视图间导航功能

我们在查看月视图时，如果对某一周或某一天的具体日程感兴趣，想进入查看，可以打开官方预置的一个开关，这样周次和日都会启用链接导航功能，点击可进入周视图和日视图。

// 开启视图间导航功能 navLinks: true 

同理，周视图、日视图和列表视图，都会开启超链接，进行视图间的切换。



官方提供了预置操作，如果想改变默认的行为，跳转到自定义视图，则可以设置navLinkDayClick和navLinkWeekClick这两个事件。
官网文档：https://fullcalendar.io/docs/date-nav-links。

开启当前时间线标识

一个小功能，配置nowIndicator为true，默认未开启。

// 显示当前时间线 nowIndicator: true 

应用系统