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

<FullCalendar
            v-if="calendarOptions"
            style="margin-top: 30px"
            class="calenderCon"
            ref="fullCalendar"
            :options="calendarOptions"
          >
</FullCalendar>

import resourceTimelinePlugin from "@fullcalendar/resource-timeline";// 引入需要的視圖
    let calendarOptions = ref();
// 使用resourceTimelineMonth需安裝
onMounted(() => {
    calendarOptions.value = {
      plugins: [dayGridPlugin, timeGridPlugin, resourceTimelinePlugin],
      initialView: "resourceTimelineMonth", // 默認(rèn)為那個視圖（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
      headerToolbar: {
        left: "prev",
        center: "title",
        right: "today,next",
      },
      locale: "zh-cn", // 切換語言，當(dāng)前為中文
      eventColor: "#ffffff", // 全部日歷日程背景色
      initialDate: proxy.$dayjs().format("YYYY-MM-DD"), // 自定義設(shè)置背景顏色時一定要初始化日期時間
      allDaySlot: false,
      height: "422px",
      buttonText: {
        today: "當(dāng)前月",
        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)
      },
      // 強(qiáng)調(diào)日歷上的特定時間段。默認(rèn)為周一至周五，上午9點(diǎn)至下午5點(diǎn)。
      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, // 點(diǎn)擊日歷日程事件
      // eventDrop: eventDrop, // 拖動日歷日程事件
      // eventResize: eventResize, // 修改日歷日程大小事件
      // select: handleDateSelect, // 選中日歷格事件
      // eventDidMount: this.eventDidMount, // 安裝提示事件
      // loading: loading, // 視圖數(shù)據(jù)加載中、加載完成觸發(fā)（用于配合顯示/隱藏加載指示器。）
      // selectAllow: selectAllow, //編程控制用戶可以選擇的地方，返回true則表示可選擇，false表示不可選擇
      // eventMouseEnter: eventMouseEnter, // 鼠標(biāo)滑過
      editable: true, // 是否可以進(jìn)行（拖動、縮放）修改
      eventStartEditable: true, // Event日程開始時間可以改變，默認(rèn)true，如果是false其實(shí)就是指日程塊不能隨意拖動，只能上下拉伸改變他的endTime
      eventDurationEditable: true, // Event日程的開始結(jié)束時間距離是否可以改變，默認(rèn)true，如果是false則表示開始結(jié)束時間范圍不能拉伸，只能拖拽
      selectable: true, // 是否可以選中日歷格
      selectMinDistance: 0, // 選中日歷格的最小距離
      dayMaxEvents: true,
      weekends: true, // 是否在任何日歷視圖中包括周六/周日列。
      navLinks: false, // 確定日名和周名是否可單擊
      schedulerLicenseKey: "GPL-My-Project-Is-Open-Source", // 此配置是為了消除右下角的版權(quán)提示
      slotEventOverlap: false, // 相同時間段的多個日程視覺上是否允許重疊，默認(rèn)true允許
      resourceAreaColumns: [
        {
          headerContent: "車型",
          field: "room_name",
        },
        {
          headerContent: "車牌",
          field: "car_code",
        },
      ],
      resourceAreaWidth: "15%",
      resources: resourcesData.value,  // 后臺給 渲染的數(shù)據(jù)
      events: matchList.value,// 后臺給 渲染的數(shù)據(jù)
    };
})
數(shù)據(jù)格式（根據(jù)實(shí)際情況來,均為后臺返回）：
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",
    }