1.安装插件
官网地址：Documentation | FullCalendar
demo：GitHub - fullcalendar/fullcalendar-examples: Simple example projects for FullCalendar
安装所需要的npm包：
vue2：npm install --save @fullcalendar/vue @fullcalendar/core
vue3: npm install --save @fullcalendar/vue3 @fullcalendar/core
视图插件包：npm install --save @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
- html
<FullCalendar ref="myCalendar" :options="calendarOptions">
// 自定义事件显示内容
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>- 导入js
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'配置项（详细请参考官网文档）
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], //引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
initialView: 'timeGridWeek', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
locale: 'zh-cn', // 切换语言，当前为中文
eventColor: '#FFA34E', // 全部日历日程背景色
initialDate: dayjs().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
// aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
slotDuration: '01:00:00', // 显示时隙的频率
allDaySlot: false,
height: 'auto',
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false, // 设置时间为24小时
},
events: [
{
title: '一个测试日程',
start: '2023-01-22 12:00',
end: '2023-01-23 13:00',
editable: true,
color: '#2EB09A',
},
], // 日程
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, // 确定日名和周名是否可单击
slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
}- 功能点的实现
1.新增一个事件 文章来源：https://www.toymoban.com/news/detail-723984.html
handleDateSelect(selectInfo: DateSelectArg) {
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
calendarApi.addEvent({
id: createEventId(),
title: '新增一个日程',
start: selectInfo.startStr,
end: selectInfo.endStr,
})
},2.修改限制用户可选择的事件范围文章来源地址https://www.toymoban.com/news/detail-723984.html
changeLimit() {
const calendarApi =this.$refs['myCalendar'].getApi()
// false 也可改为一个对象为其他时间段
calendarApi.setOption('businessHours', false)
calendarApi.setOption('selectConstraint', false)
}到了这里，关于Fullcalendar 在vue项目的使用--详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
