介绍👊
😃Fullcalendar是一个目前流行的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接，但目前文档还是英文为主，不过gym可以通过翻译（英语精通略过这句话~😂）进行浏览。
- FullCalendar官网：fullcalendar.io/👈
- FullCalendar官方文档：fullcalendar.io/docs👈
- 最新FullCalendar中文文档合集: 最新FullCalendar中文文档👈
原型图
需求背景
开发特制预约资源页面，宏观展示资源预约情况，解决预约业务痛点。
实操流程
✔安装
安装 FullCalendar 的 @fullcalendar/vue 与 3个基础模
块 @fullcalendar/interaction、@fullcalendar/core 与 @fullcalendar/daygrid：
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
后面用到什么模块就引入什么模块，这也是该组件的一大特性。相关模块功能详解可查阅文档
👉官方plugin文档链接：fullcalendar.io/docs/plugin…
✔开发
👉FullCalendar.vue
👇引入
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
...
👇渲染
<FullCalendar calss="fullCaleadear" ref="fullCalendar" :options="calendarOptions"/>
👇主要配置
data() {
return {
// 预约日历FullCalendar配置
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
iinteractionPlugin, // needed for dataClick
resourceTimeLinePlugin
],
initialDate: new Date(),
timeZone: 'UTC',
slotMinTime: '00:00:00', // 开始时间
slotMaxTime: '24:00:00', // 结束时间
headerToolbar: false,
selectable: true, // 是否可select拖动
aspectRatio: 1.5,
initialView: 'resourceTimelineDay', 视图类型
scrollTime: xxx, 滚动条展现位置
// 高级功能许可key，需要用到高级功能时候添加上，避免左下角出现警告提醒
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
// 不可预约背幕设置
businessHours: [
{
daysOfWeek: [1, 2, 3, 4, 5, 6, 7],
startTime: this.nowHours(), // 可接受字符串或处理函数
endTime: '24:00'
}
],
rerenderEvents: true,
nowIndicator: true, // 是否显示时间指示器
now: this.nowDateHander(), // 指示器时间，可随着时间自行移动，可接受字符串或处理函数
nowIndicatorClassNames: 'nowIndicator', // 指示器类名
resourceAreaWidth: '20%', 高级功能配置Column宽度
expandRows: true,
resourceAreaColumns: [
{
group: true,
field: 'building',
headerContent: '',
width: '60%'
},
{
filed: 'occupancy',
headerContent: '',
cellClassNames: 'fullCalendarCell'
}
],
events: [
{
resourceId: xxx, // 对应resource
title： xxx,
start: xxx, // 开始时间
end: xxx // 结束时间
}
], // 日程时间的json，初始化导入
resources: [ // resource配置
{
id: xxx,
building: xxx,
occupancy: xxx
}
],
eventStartEditable: true,
select: (info) => { do some thing }, // 拖动，可传处理函数
eventClick: (info) => { do some thing }, // 时间点击，可传处理函数，
}
}
}
👇卡点
👉卡点1：
时间显示无法做到覆盖，并且时间间存在缝隙
如图所示，时间无法覆盖整个格子，同时右侧存在明显缝隙。
👉解决方案：
目前由于技术有限，浏览文档多次并无很好的解决方案，只能做到去除缝隙，而整个格子覆盖效果没达到：
::v-deep .fc-timeline-event {
margin-right: 0;
}
希望后面有更好的解决方案，不知gym有没有更好建议！😃
👉卡点2：
过期时间无法预约显示背幕遮掩，但是由于fullcalendar并没有提供businessHours随着当前时间移动，故会出现下面这种情况：
👉解决方案：
通过js原生方法，通过定时器，每隔一段时间获取时间指示器的style，动态赋值给背幕dom，达到跟随效果。但是涉及到原生，感觉并不是最佳方案，奈何组件没有提供相关api，希望之后能有更好的方案进行优化。😂
👇注意点：
gym们特别注意开发时间相关的需求时候，尽可能让后端返回时间戳，而不是utc格式！！！因为你做到后面会发现，时间和现在时间相差8小时，不断转换会很难受！！！🤷♂️
如果时间格式比较多，推荐引入一些js日期库，下面给gym推荐几个比较流行的：
Moment：momentjs.com/
dayjs：day.js.org/
date-fns：date-fns.org/
✨最后
写这篇仅记录自己的一次实操经历，希望对gym有所帮助，共勉~😁
