Fullcalendar可以很好的管理日程安排事件，可以管理时间和任务调度，比如日常值班岗位安排、举办活动会议议程安排、项目行动安排、车间劳动岗位排班等等。今天我们来了解一下使用Fullcalendar（v4），完成一个基于时间的行动任务调度，先看演示DEMO。
左下角阅读原文可以查看演示
准备
我们这个例子基于Vue2和Fullcalendar4，因此你先可以了解本站文章：在Vue框架下使用Fullcalendar，或者到官网：https://fullcalendar.io/了解有关Fullcalendar的更多详情。
我们在本例中用到了事件调度插件：timeline，因此先安装好相关插件：
npm install --save @fullcalendar/core
npm install --save @fullcalendar/resource-timeline
npm install --save @fullcalendar/timeline
使用
我们先新建timeline.vue组件文件，添加组件代码：
<FullCalendar defaultView="resourceTimeline" locale="zh-cn" weekNumberCalculation="ISO"
showNonCurrentDates="false"
:schedulerLicenseKey="licenseKey"
:slotLabelFormat="slotLabelFormat"
:eventTimeFormat="evnetTime"
:header="header"
:aspectRatio="aspectRatio"
:plugins="calendarPlugins"
resourceAreaWidth="20%"
resourceLabelText="项目"
:resources="resources"
:events="calendarEvents"
>
接着在<script>
先导入组件插件以及相关css文件。
Fullcalendar的日程调度timeline插件属于增值功能，意思是属于高级功能要貌似要收费，但是用户可以将该插件用在非营利性项目中。使用timeline插件默认会在页面左下角有版权信息，但是我们可以将一个参数schedulerLicenseKey
的值设置为'GPL-My-Project-Is-Open-Source'
就可隐藏左下角的版权内容。
<script>
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import '@fullcalendar/core/main.css';
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
export default {
components: {
FullCalendar
},
data() {
return {
licenseKey: 'GPL-My-Project-Is-Open-Source',
calendarPlugins: [
resourceTimelinePlugin
],
aspectRatio: 2.4,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
evnetTime: {
hour: 'numeric',
minute: '2-digit',
hour12: false
},
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false
},
resources: [
{
id: 1,
eventColor: 'green',
title: '侦查组'
},
{
id: 2,
eventColor: '#369',
title: '抓捕组'
},
{
id: 3,
title: '警戒组'
},
{
id: 4,
eventColor: '#f60',
title: '机动组'
},
{
id: 5,
eventColor: '#e90',
title: '取证组'
},
{
id: 6,
eventColor: '#360',
title: '审查组'
}
],
calendarEvents: {
url: 'timeline.php'
}
}
},
mounted() {
},
created() {
},
methods: {
//
}
}
</script>
我们看DEMO，本例是展示一个警方的破案行动计划，在计划调度表中左侧是行动分组，右侧是每个分组对应的职责和在时间范围内要做的事情。
在data
部分，通过:resources
可以设置调度表左侧部分，内容是一个数组，我们也可以异步请求后台一个数据源，返回json格式数据即可。
events
：事件数据。我们一般异步请求后台url，如url: 'timeline.php'
，将返回json格式的数据源，Fullcalendar会直接将这些数据渲染到界面上。
后端timeline.php
我们后端使用PHP提供数据接口，本例只是演示，没有用到数据库。实际项目中，应该使用PHP或Python等后端语言操作数据库，为Fullcalendar提示数据源。
$data = [
'0' => [
'resourceId' => 1,
'title' => '前期侦查',
'start' => date('Y-m-d 00:30:00'),
'end' => date('Y-m-d 09:00:00')
],
'1' => [
'resourceId' => 2,
'title' => '雷霆抓捕行动',
'start' => date('Y-m-d 06:00:00'),
'end' => date('Y-m-d 10:00:00')
],
'2' => [
'resourceId' => 3,
'title' => '负责区域警戒安防',
'start' => date('Y-m-d 05:00:00'),
'end' => date('Y-m-d 18:00:00')
],
'3' => [
'resourceId' => 4,
'title' => '机动特别组，随时待命',
'start' => date('Y-m-d 05:00:00'),
'end' => date('Y-m-d 12:00:00')
],
'4' => [
'resourceId' => 5,
'title' => '抓捕行动结束后现场取证',
'start' => date('Y-m-d 10:00:00'),
'end' => date('Y-m-d 18:00:00')
],
'5' => [
'resourceId' => 6,
'title' => '提审嫌疑人',
'start' => date('Y-m-d 15:00:00'),
'end' => date('Y-m-d 23:00:00')
]
];
echo json_encode($data);
注意，在后端返回的数据列表中，resourceId
要和Fullcalendar的resources
中的id
值对应。
保存，运行项目你将可以看到Demo中的效果。其实我们在几个项目中已经应用到类似这样的时间任务调度，比如机场运营岗位排班，前端不用Fullcalendar也可以达到类似效果。
