FullCalendar日历日程插件基础使用与学习

功能

是一个日历日程展示交互插件，提供了时间，日程等交互功能的插件。

基础使用

1 安装基础包

fullCalendar 提供了支持vue版本的，所以我们除了安装fullCalendar核心包外，还需要安装vue支持包，vue3安装@fullcalendar/vue3 vue2 安装@fullcalendar/vue。
除此之外，fullcalendar的一切额外功能都是依赖插件的。所以我们还需要安装 这两个插件@fullcalendar/interaction @fullcalendar/daygrid 分别提供视图展现 和 交互功能。

npm install  @fullcalendar/core @fullcalendar/vue3  @fullcalendar/interaction @fullcalendar/daygrid

2 在vue页面中底部引入fullcalendar组件和其功能插件

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

3 在vue模板中使用
options是我们对fullCalendar插件的设置项，我们要实现的功能也主要集中在这里

<FullCalendar ref="myCalendar" :options="calendarOptions" />

插件配置项

1 基本配置

const calendarOptions = {
    // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
    height: 500, // 日历高度
    plugins: [ //  需要的插件
        dayGridPlugin
        // interactionPlugin
        // timeGridPlugin,
        // listPlugin
    ],
    buttonText: { // 重新定义默认文本
        today: '今天',
        month: '月',
        week: '周',
        dayGrid: '日'
    },
    customButtons: {
        _prev: { // 自定义按钮 fullCalendar没有提供按钮的回调方法，想增加功能放置需设置
            text: '<',
            click: () => {
                changeCalendar('PREV');
            }
        },
        _next: {
            text: '>',
            click: () => {
                changeCalendar('NEXT');
            }
        },
        _today: {
            text: 'today',
            click: () => {
                changeCalendar('TODAY');
            }
        }
    },
    headerToolbar: {
        // 日历头部按钮位置
        left: '_prev,_next _today', // 左边部分放置自定义
        // left: 'prev,next today', // 默认左边放置
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGrid' // 右边视图部分
    },
    // slotLabelFormat: { // 规定日时间格式 日视图中需要使用
    //     hour: 'numeric',
    //     minute: '2-digit',
    //     omitZeroMinute: true,
    //     meridiem: 'short'
    // },
    firstDay: 1, // 一周默认 0周日or 1周一 哪个是第一天
    editable: true, // 事件是否可编辑，可编辑是指可以移动, 改变大小等。
    selectable: false, // 允许用户单击或拖动选择日历中的对象
    // navLinks: true, // 日期可以点击
    initialView: 'dayGridMonth', // 默认显示视图
    locale: 'zh-cn', // 语言
    weekNumberCalculation: 'ISO', // 周次的显示格式。
    weekNumbers: true, // 显示周次
    aspectRatio: 2,
    dayMaxEvents: 2,
    events: [] // 重要的日程数组
    // dateClick: this.handleDateClick, // 点击日期
    // eventClick: this.handleEventClick, // 点击日程
    // eventsSet: this.handleEvent // 事件数据更改后调用
};

2 events 日程对象
是组件中非常重要的对象，主要功能进行日程事件的展示与交互，提供的基本日程展示和背景日程展示等功能

• id 可选，事件唯一标识，重复的事件具有相同的id
• title 必须，事件在日历上显示的title
• allDay 可选，true or false，是否是全天事件
• start 必须，事件的开始时间
• end 可选，结束时间
• url 可选，当指定后，事件被点击将打开对应url
• className 指定事件的样式
• editable 事件是否可编辑，可编辑是指可以移动, 改变大小等
• source 指向次event的eventsource对象
• color 背景和边框颜色
• backgroundColor 背景颜色
• borderColor 边框颜色
• textColor 文本颜色
• display ‘auto’, ‘block’, ‘list-item’, ‘background’, ‘inverse-background’, or 'none’ // 不同的表现形式

交互功能

1 交互主要进行日程的交互 主要有两种方式。

• 直接来更改options中events配置项
• 调用calendarApi 来更改

       this.calendarApi = this.$refs.myCalendar.getApi(); // 方式2 获取api对象
	getReservationList(arrayData) {
			arrayData.forEach((item) => {
				// this.calendarApi.addEvent(event);
				this.calendarOptions.events.push(item); // 方式1直接更改events数组
			});
			// this.calendarOptions.events = newArr;  // 方式2
		},

2 其他提供回调的交互，如点击日期，点击日程等。直接声明回调函数，获取日期或events进行日程的增加与修改

	handleEventClick(calEvent) { // event事件回调
			this.testValue = calEvent.event.title;
			this.dialogVisible = true;
			this.id = calEvent.event.id;
		},

3 自定义按钮前一个 后一个 今天 直接调用提供的api，可增加自己联动功能

const changeCalendar = (type) => {
    if (type === 'TODAY') {
        calendarApi.today();
    } else if (type === 'PREV') {
        calendarApi.prev(); // 自动api
    } else {
        calendarApi.next();
    }
};

4 与别的时间联动，着重显示，可以使用背景事件。

// 添加bg事件
const addEventBg = (start) => {
    calendarApi.getEventById('background')?.remove(); 
    calendarApi.addEvent({ // 定义背景事件，左边点击右边着重显示
        id: 'background',
        start: dayjs(start).format('YYYY-MM-DD'),
        display: 'background'
    });
};

参考文档

• https://fullcalendar.io/docs#toc
• https://blog.csdn.net/qw_xingzhe/article/details/44920943