vue框架学习 -- 日历控件 FullCalendar 使用总结

最近在项目中要实现日期排班的功能，正好要用到日历视图的控件，经过对比发现，vue 中使用 FullCalendar 可以实现相关需求，下面对使用过程做一个总结。

FullCalendar__2">一. 引入 FullCalendar 控件

package.json 中添加相关依赖

javascript">"dependencies": {
        "@fullcalendar/bootstrap5": "^6.1.15",
        "@fullcalendar/core": "^6.1.15",
        "@fullcalendar/daygrid": "^6.1.15",
        "@fullcalendar/interaction": "^6.1.15",
        "@fullcalendar/list": "^6.1.15",
        "@fullcalendar/timegrid": "^6.1.15",
        "@fullcalendar/vue": "^6.1.15",
        }

FullCalendar_15">二. 页面中引入 FullCalendar

<template>
  <div class="common-list">
    <!-- 日历控件 -->
    <div >
      <FullCalendar :options="calendarOptions" />
    </div>
  </div>
</template>

相应的 javascript 方法说明

javascript"><script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import { formatDate} from '@/utils'
import {
  listDutyPlanCalendar,
} from "@/api/duty/zbrl";
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      // 搜索参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        startDate: '',
        endDate: '',
      },
      // 日历配置
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, bootstrap5Plugin, listPlugin, timeGridPlugin],
        locale: 'zh-cn',
        themeSystem: 'bootstrap5',
        headerToolbar: {
          end: 'today prev next dayGridMonth dayGridWeek',
        },
        // 周一从星期一开始，0为星期日
        // firstDay: 1,
        buttonText: {
          today: '今天',
          month: '月',
          week: '周'
        },
        // 在日历的初始化完成后执行的事件
        datesSet: this.handleDateChange,
        /*customButtons: {
          myCustomButton: {
            text: 'custom!',
            click: function() {
              alert('Clicked the custom button in v6!');
            }
          }
        },*/
        views: ['dayGridMonth', 'dayGridWeek', 'dayGridDay'],
        initialView: 'dayGridMonth',
        //日期点击事件
        dateClick: this.handleDateClick,
        events: [
          { title: 'event 1', date: '2024-09-01'},
          { title: 'event 2', date: '2024-09-01' },
          { title: 'event 3', date: '2024-09-03' },
        ],
        // 添加事件点击处理
        eventClick: function(info) {
          // 这里是点击事件时执行的代码
          // alert('你点击了事件: ' + info.event.title);

          // 你可以在这里执行更多逻辑，比如打开模态框显示事件详情
        },
      }
    }
  },
  created() {
    this.handleQuery();
  },
  methods: {
  	//查询接口数据
    handleQuery() {
      listDutyPlanCalendar(this.queryParams).then(res => {
        if(res.code === 200){
          this.calendarOptions.events = res.rows;
        }
        console.log(res)
        console.log(this.calendarOptions.events)
      });
    },
    // 当日历的日期范围发生变化时,监听事件
    handleDateChange(info) {
      if(this.queryParams){
        console.log(this.queryParams.startDate)
        this.queryParams.startDate = formatDate(info.start).substring(0, 10);
        this.queryParams.endDate = formatDate(info.end).substring(0, 10);
        this.handleQuery();
      }
      // 当日历的日期范围发生变化时（包括翻页操作），这个函数会被调用
      // console.log('新的日期范围:', info.startStr, '到', info.endStr);
    },
    resetQuery() { },
    //某个日期点击监听方法
    handleDateClick(arg) {
      console.log(arg)
      alert('date click! ' + arg.dateStr)
    },
  }
}
</script>

三. 最终页面实现效果

在这里插入图片描述

四. 功能点实现总结

1. calendarOptions 详解

FullCalendar 的 calendarOptions 是一个非常重要的配置项，它包含了初始化 FullCalendar 日历所需的各种设置和参数。以下是对 calendarOptions 中一些常见属性的详细解析：

1. 插件列表（plugins）

作用：定义 FullCalendar 需要加载的插件。FullCalendar 的许多功能都是通过插件来实现的。
示例：

javascript">plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin]

这里加载了日视图（dayGridPlugin）、时间网格视图（timeGridPlugin）和交互插件（interactionPlugin），后者允许用户拖拽、缩放等交互操作。

2. 默认视图（initialView）

作用：设置日历初始化时显示的视图。
示例：

javascript">initialView: 'dayGridMonth'

这将日历的初始视图设置为月视图，并以日网格（dayGrid）的形式展示。

3. 语言（locale）

作用：设置日历的语言。FullCalendar 支持多种语言，通过设置 locale 属性可以实现界面的国际化。
示例：

javascript">locale: 'zh-cn'

这将日历的语言设置为中文。

4. 头部工具栏（headerToolbar）

作用：自定义日历头部的工具栏布局和按钮。
示例：

javascript">headerToolbar: {  
  left: 'today prev,next',  
  center: 'title',  
  right: 'dayGridMonth,timeGridWeek,timeGridDay'  
}

这将在日历头部左侧放置“今天”、“上一个”、“下一个”按钮，中间显示标题，右侧放置月视图、周视图和日视图的切换按钮。

5. 按钮文本（buttonText）

作用：自定义头部工具栏中各按钮的显示文本。
示例：

javascript">buttonText: {  
  today: '今天',  
  month: '月',  
  week: '周',  
  day: '日',  
  prev: '‹',  
  next: '›'  
}

这将把头部工具栏中的按钮文本替换为中文或自定义符号。

6. 周起始日（firstDay）

作用：设置一周中哪一天作为起始日。FullCalendar 默认周日为一周的开始，但可以通过此属性进行自定义。
示例：

javascript">firstDay: 1

这将把周一设置为一周的开始（注意：FullCalendar 中周日是 0，周一是 1，以此类推）。

7. 事件（events）

作用：定义日历中要展示的事件数组。每个事件对象可以包含日期、标题、描述等信息。
示例：

javascript">events: [  
  { title: '事件1', date: '2024-09-28' },  
  { title: '事件2', start: '2024-09-29T10:00:00', end: '2024-09-29T12:00:00' }  
]

8. 其他常用属性

aspectRatio：设置日历单元格的宽高比。
eventColor：设置所有日历事件的背景颜色。
editable：是否允许用户通过拖拽、缩放等方式修改事件。
selectable：是否允许用户选择日历上的日期范围。
eventClick：点击事件时触发的回调函数。
dateClick：点击日期时触发的回调函数。

2. 日历中添加日期点击事件

javascript">//日期点击事件
        dateClick: this.handleDateClick,