FullCalendar6升级内容 + TypeScript
FullCalendar6版本主要解决FullCalendar包安装相关的错误,对于想要FullCalendar5升级到6很少有代码上的负担。
开发时遇到的问题以及功能
以下是我的开发做法,如果有更好的办法请在评论区指出。
1.视图”单元格“事件
需求:dayGridMonth(月)视图每日点击创建事件。
准备前项:如果需要任何事件必须添加interactionPlugin
插件,否则事件触发不了。
api:dateClick
。
注意事项:这个事件几乎所有视图都会触发,如果想要指定视图触发。需要在方法里面进行拦截。
import { DateClickArg } from "@fullcalendar/interaction/index";
import { CalendarOptions } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
dateClick: (info:DateClickArg)=>{
if (info.view.type !== "dayGridMonth") return
},
}
2.月试图滑入出现不同的样式
需求:用户滑入需要展示不同的背景,体现用户的交互。
api:dayCellClassNames
。
注意事项:dayCellClassNames
方法只是在dayGridMonth
月视图生效。如timeGridWeek
周视图等不会调用。
效果展示:
import { CalendarOptions } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
dayCellClassNames: () => {
return 'month-day-cell'
}
}
fc-daygrid-day-top .fc-daygrid-day-number具体的类需要自己看一下。
.month-day-cell {
.fc-daygrid-day-top .fc-daygrid-day-number {
border-radius: 50%;
}
&:hover {
background: #61A0AF;
.fc-daygrid-day-top .fc-daygrid-day-number {
background: #F5D491;
color: #fff;
}
}
}
2.1 通过js实现绑定事件
需求:需要通过js绑定不同的事件触发不同的效果。
api:dayCellDidMount
。
注意事项:这个消耗性能。
import { DayCellMountArg,CalendarOptions } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
dayCellDidMount: (info:DayCellMountArg) => {
info.el.addEventListener('mouseenter', (e) => {
console.log('mouseenter')
}, false)
info.el.addEventListener('mouseleave', (e) => {
console.log('mouseleave')
}, false)
}
3.多条数据折叠起来
需求:某一天的事件很多,导致整个表格撑起来。
api:dayMaxEventRows
、moreLinkClassNames
、moreLinkContent
之前效果:
修改后效果:
import { CalendarOptions } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
// 开启折叠
dayMaxEventRows: true,
// 绑定自定义class
moreLinkClassNames: () => {
return 'month-more-link'
},
// 自定义内容
moreLinkContent: () => {
return '+更多'
},
events: [
{ title: 'Meeting', start: new Date() },
{ title: '1', start: new Date() },
{ title: '2', start: new Date() },
{ title: '3', start: new Date() },
{ title: '4', start: new Date() },
{ title: '5', start: new Date() },
{ title: '6', start: new Date() },
{ title: '7', start: new Date() },
{ title: '8', start: new Date() },
]
}
4.自定义事件样式
需求:默认样式满足不了需求,两种解决方式。
api: eventClassNames
4.1 使用样式
import { CalendarOptions, EventContentArg } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
events: [
{ title: 'Meeting', start: new Date() },
{ title: '1', start: new Date() },
{ title: '2', start: new Date() },
{ title: '3', start: new Date() },
{ title: '4', start: new Date() },
{ title: '5', start: new Date() },
{ title: '6', start: new Date() },
{ title: '7', start: new Date() },
{ title: '8', start: new Date() },
],
eventClassNames: (info: EventContentArg) => {
return 'event-name'
}
}
4.2 自定义元素
import { CalendarOptions, EventContentArg } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
events: [
{ title: 'Meeting', start: new Date() },
{ title: '1', start: new Date() },
{ title: '2', start: new Date() },
{ title: '3', start: new Date() },
{ title: '4', start: new Date() },
{ title: '5', start: new Date() },
{ title: '6', start: new Date() },
{ title: '7', start: new Date() },
{ title: '8', start: new Date() },
],
eventContent: (info:EventContentArg) => {
return {html: `<div>${info.event.title}</div>`}
}
}
5.资源视图时间选择。
需求:在ResourcesTime
(资源时间表格)视图中选择时间事件,进行业务处理。
api: selectable
、select
注意:select
方法在dayGridMonth
视图也会触发,所以需要进行拦截。
import { CalendarOptions, DateSelectArg } from '@fullcalendar/core';
// 没有这个资源包需要安装
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, resourceTimeGridPlugin],
initialView: 'resourceTimeGridDay',
// 开启事件
selectable: true,
resources: [
{ id: 'a', title: 'testA'}
{ id: 'b', title: 'testB'}
],
select: (info: DateSelectArg) => {
if (info.view.type === "dayGridMonth") return
console.log(info)
}
}
6.语言
需求:使用中文或者切换不同语言。
api:locale
、dayCellContent
。
注意:使用中文的话,dayCell会带着日的汉字,如果想去掉可以使用dayCellContent
API
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import { CalendarOptions, DayCellContentArg } from '@fullcalendar/core';
import zhLocale from "@fullcalendar/core/locales/zh-cn";
import dayjs from "dayjs";
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, dayGridPlugin],
initialView: 'dayGridMonth',
locale: zhLocale,
// 自定义dayCell内容。
dayCellContent: (info:DayCellContentArg) => {
return dayjs(info.date).format('DD')
},
}
7.自定义"标题工具栏"、"页脚工具栏"、"自定义按钮"
需求:设置不同的标题工具栏的按钮。
api:headerToolbar
、buttonText
、customButtons
注意:customButtons
只有click方法。
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import { CalendarOptions } from '@fullcalendar/core';
const calendarOptions:CalendarOptions = {
plugins: [interactionPlugin, dayGridPlugin],
initialView: 'dayGridMonth',
// 相当于在标题显示哪些功能。没在这里面就等于不展示。
headerToolbar: {
start: 'myButton',
center: 'timeGridWeek,resourceTimeGridDay',
end: 'prev,next'
},
buttonText: {
// 这个timeGridWeek一定在headerToolbar里面。
timeGridWeek: 'text'
},
customButtons: {
myButton: {
text: "demo",
// 划入按钮上展示的文案。
hint: "demo",
click: function() {
console.log('clicked the custom button!');
}
}
}
}