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中
<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 - 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/