日历日程组件fullcalendar基本使用

1.fullcalendar组件效果图如下所示

官网地址：https://fullcalendar.io/

2.下载安装

npm install --save @fullcalendar/vue
//下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid
//安装后的fullcalendar源码和其它插件都会在@fullcalendar
npm install --save dayjs 
//安装dayjs用于格式化时间格式

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

<script>
  import FullCalendar from "@fullcalendar/vue"
  import dayGridPlugin from "@fullcalendar/daygrid"
  import timeGridPlugin from "@fullcalendar/timegrid"
  import interactionPlugin from "@fullcalendar/interaction"
  import listPlugin from "@fullcalendar/list"
  import dayjs from "dayjs"
  export default {
    name: "MaintenanceCalendarview",
    components: {
      FullCalendar
    },
    data() {
      return {
        calendarOptions: {
          defaultView: "agendaWeek", //初始化时默认视图，默认是月month，agendaWeek是周，agendaDay是当天
          // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
          plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
          initialView: "dayGridMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
          firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
          locale: "zh-cn", // 切换语言，当前为中文
          eventColor: "#3BB2E3", // 全部日历日程背景色
          themeSystem: "bootstrap", // 主题色(本地测试未能生效)
          initialDate: dayjs().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
          aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
          //   displayEventTime: true, // 是否显示时间
          //   allDaySlot: true, // 周，日视图时，all-day 不显示
          headerToolbar: {
            // 日历头部按钮位置
            left: "",
            center: "prevYear,prev title next,nextYear",
            right: "today dayGridMonth,timeGridWeek,timeGridDay"
          },
          buttonText: {
            today: "今天",
            month: "月",
            week: "周",
            day: "日"
          },
          slotLabelFormat: {
            hour: "2-digit",
            minute: "2-digit",
            meridiem: false,
            hour12: false // 设置时间为24小时
          },

          // 事件
          eventClick: this.handleEventClick, // 点击日历日程事件
          eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
          eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
          eventDrop: this.eventDrop, // 拖动日历日程事件
          eventResize: this.eventResize, // 修改日历日程大小事件
          select: this.handleDateSelect, // 选中日历格事件
          eventDidMount: this.eventDidMount, // 安装提示事件
          // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
          // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
          eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
          editable: false, // 是否可以进行（拖动、缩放）修改
          eventStartEditable: false, // Event日程是否可以拽动
          eventDurationEditable: false, // Event日程是否可以拉伸
          selectable: true, // 是否可以选中日历格
          selectMirror: true,
          selectMinDistance: 50, // 选中日历格的最小距离
          dayMaxEvents: true,
          weekends: true,
          navLinks: true, // 天链接
          slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
          events: [
            {
              title: "任务1",
              start: "2024-08-01 12:30",
              end: "2024-08-01 14:30",
              duration: "03:00",
              url: "https://www.baidu.com/"
            },
            {
              title: "任务11",
              start: "2024-08-01 12:30",
              end: "2024-08-01 14:30",
              duration: "03:00",
              url: "https://www.baidu.com/"
            },
            {
              title: "任务111",
              start: "2024-08-01 12:30",
              end: "2024-08-01 14:30",
              duration: "03:00",
              url: "https://www.baidu.com/"
            },
            {
              title: "任务2",
              start: "2024-08-02 00:00",
              end: "2024-08-02 23:59",
              color: "red"
            },
            {
              title: "任务3",
              start: "2024-08-12",
              end: "2024-08-16",
              color: "green"
              //   editable: true
              //   url: "https://www.baidu.com/"
            },
            { title: "任务4", date: "2024-08-19", classNames: ["cal"] },
            {
              title: "任务5",
              start: "2024-08-27",
              end: "2024-08-29",
              overlap: false,
              display: "background", //整个背景填充
              color: "#ff9f89"
            }
          ]
        }
      }
    },
    methods: {
      eventMouseEnter(event, jsEvent, view) {
        // 鼠标划过的事件
        if (event.event.classNames.length) {
          // console.log(event)
        }
      },
      eventDrop(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
        console.log(event)
      },
      handleEventClick(ev, a, b) {
        console.log(ev, a, b)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .fc-toolbar-chunk {
    display: flex;
  }
</style>