FullCalendar6 + Vue

548 阅读3分钟

FullCalendar6升级内容 + TypeScript

link: fullcalendar.io/docs/upgrad…

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周视图等不会调用。
效果展示: image.png

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:dayMaxEventRowsmoreLinkClassNamesmoreLinkContent
之前效果:

image.png

修改后效果:

image.png

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: selectableselect
注意: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:localedayCellContent
注意:使用中文的话,dayCell会带着的汉字,如果想去掉可以使用dayCellContentAPI

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:headerToolbarbuttonTextcustomButtons
注意: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!');
      }
    }
  }
}

待续