Vue3使用fullcalendar日历插件

npm install @fullcalendar/core

npm install @fullcalendar/vue3

vue文件中引用

import FullCalendar from "@fullcalendar/vue3"

必须安装一个：

npm install @fullcalendar/daygrid

npm install @fullcalendar/multimonth

npm install @fullcalendar/timegrid

在vue文件中的template中     

            v-if="calendarOptions"

            style="margin-top: 30px"

            class="calenderCon"

            ref="fullCalendar"

            :options="calendarOptions"

          >

import resourceTimelinePlugin from "@fullcalendar/resource-timeline";// 引入需要的视图

    let calendarOptions = ref();

// 使用resourceTimelineMonth需安装
onMounted(() => {
    calendarOptions.value = {
      plugins: [dayGridPlugin, timeGridPlugin, resourceTimelinePlugin],
      initialView: "resourceTimelineMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
      headerToolbar: {
        left: "prev",
        center: "title",
        right: "today,next",
      },
      locale: "zh-cn", // 切换语言，当前为中文
      eventColor: "#ffffff", // 全部日历日程背景色
      initialDate: proxy.$dayjs().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
      allDaySlot: false,
      height: "422px",
      buttonText: {
        today: "当前月",
        day: "日",
      },
      // 日程
      businessHours: {
        daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
        startTime: "10:00", // a start time (10am in this example)
        endTime: "18:00", // an end time (6pm in this example)
      },
      // 强调日历上的特定时间段。默认为周一至周五，上午9点至下午5点。
      selectConstraint: {
        daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
        startTime: "10:00", // a start time (10am in this example)
        endTime: "18:00", // an end time (6pm in this example)
      },

      // 限制用户选择特定的时间窗口。
      // 事件
      // eventClick: eventClick, // 点击日历日程事件
      // eventDrop: eventDrop, // 拖动日历日程事件
      // eventResize: eventResize, // 修改日历日程大小事件
      // select: handleDateSelect, // 选中日历格事件
      // eventDidMount: this.eventDidMount, // 安装提示事件
      // loading: loading, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
      // selectAllow: selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
      // eventMouseEnter: eventMouseEnter, // 鼠标滑过
      editable: true, // 是否可以进行（拖动、缩放）修改
      eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
      eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
      selectable: true, // 是否可以选中日历格
      selectMinDistance: 0, // 选中日历格的最小距离
      dayMaxEvents: true,
      weekends: true, // 是否在任何日历视图中包括周六/周日列。
      navLinks: false, // 确定日名和周名是否可单击
      schedulerLicenseKey: "GPL-My-Project-Is-Open-Source", // 此配置是为了消除右下角的版权提示
      slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      resourceAreaColumns: [
        {
          headerContent: "车型",
          field: "room_name",
        },
        {
          headerContent: "车牌",
          field: "car_code",
        },
      ],
      resourceAreaWidth: "15%",
      resources: resourcesData.value,  // 后台给 渲染的数据
      events: matchList.value,// 后台给 渲染的数据
    };
})
数据格式（根据实际情况来,均为后台返回）：
resourcesData.value  
    {
      id: item.id,
      room_name: item.car_type,
      car_code: item.car_code,
    }

matchList.value
{
      id: item.id,
      resourceId: item.id,
      title:
        "用车人：" +
        item.use_person_name +
        " 用车时间：" +
        item.start_time +
        "~" +
        item.end_time +
        "用途：" +
        item.purpose,
      start: item.start_time,
      end: item.end_time,
      color: "yellow",
      textColor: "black",
    }

 文档内容比较丰富,可以自行去官网查看

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