npm install @fullcalendar/corenpm install @fullcalendar/vue3vue文件中引用import FullCalendar from "@fullcalendar/vue3"必须安装一个：npm install @fullcalendar/daygridnpm install @fullcalendar/multimonthnpm install @fullcalendar/timegrid

在vue文件中的template中     

<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", // 默认为那个视图（月：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 - ThursdaystartTime: "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 - ThursdaystartTime: "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其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTimeeventDurationEditable: 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/