基于FullCalendar日历插件实现演播室（会议室）使用情况查看

功能需求：

演播室预约申请后，以视图（日历）形式显示当天各个录课室的占用情况

实现过程：

安装插件（可能会出现版本问题，具体情况按项目选取对应版本运行命令）

npm install --save @fullcalendar/core 
npm install --save @fullcalendar/resource-timeline 
npm install --save @fullcalendar/timeline

引入

import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'

html部分

<FullCalendar ref="calendar" defaultView="resourceTimelineDay" locale="zh-cn"
			  slot-width="38"
			  :headerToolbar="header"
			  :button-text="buttonText"
			  aspect-ratio=" 1.5"
			  :now="currentDate"
			  scrollTime="08:00:00"
			  :plugins="calendarPlugins"
			  resource-area-width="350px"
			  :resources="resources"
			  :events="calendarEvents"
			  :resource-columns="resourceAreaColumns"
/>

 data部分

currentDate:"2020-09-10",
//日历头部
header: {
	left: 'prev,next',
	center: 'title',
	right: 'today prev,next'
},
resources: [
	{eventColor: "orange",id: 43,locationName: "安慧桥录课室（一区）",remark:"",roomName: "108"},
	{eventColor: "orange",id: 23,locationName: "石家庄",remark:"测试",roomName: "SJZ01（小）"},
	{eventColor: "orange",id: 37,locationName: "安慧桥录课室（一区）",remark:"",roomName: "102"},
	{eventColor: "orange",id: 37,locationName: "安慧桥录课室（一区）",remark:"",roomName: "102"},
	{eventColor: "orange",id: 23,locationName: "石家庄",remark:"测试",roomName: "SJZ01（小）"}
],
calendarEvents: [
	{end: "2020-09-10 11:00:00",id: 1,resourceId: 43,start: "2020-09-10 08:00:00",title: "测试"},
	{end: "2020-09-10 13:45:00",id: 2,resourceId: 23,start: "2020-09-10 13:45:00",title: "测试"},
	{end: "2020-09-10 18:00:00",id: 3,resourceId: 37,start: "2020-09-10 15:00:00",title: "测试"},
	{end: "2020-09-10 19:00:00",id: 4,resourceId: 37,start: "2020-09-10 18:00:00",title: "测试"},
	{end: "2020-09-10 18:00:00",id: 5,resourceId: 23,start: "2020-09-10 17:30:00",title: "测试"}
],
resourceAreaColumns:[
	{
		labelText: '录课室地点',
		field: 'locationName'
	},
	{
		labelText: '录课室',
		field: 'roomName'
	},
	{
		labelText: '备注',
		field: 'remark'
	}
],
buttonText: {day: '天',today: '今天'},
calendarPlugins: [
	resourceTimelinePlugin, interactionPlugin
],

//注册组件
components: {
	FullCalendar
},

实现效果：

本例参考以下网址：

https://github.com/fullcalendar/fullcalendar/blob/master/examples/timeline.html

https://fullcalendar.io/docs/timeline-standard-view-demo

https://blog.csdn.net/namaste_/article/details/106398247

拓展性功能开发可参考以下网址： https://www.cnblogs.com/czk1634798848/p/13386178.html