原标题：使用Fullcalendar管理时间计划调度安排
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组件文件，添加组件代码：
showNonCurrentDates= "false"
:schedulerLicenseKey= "licenseKey"
:slotLabelFormat= "slotLabelFormat"
:eventTimeFormat= "evnetTime"
:header= "header"
:aspectRatio= "aspectRatio"
:plugins= "calendarPlugins"
resourceAreaWidth= "20%"
resourceLabelText= "项目"
:resources= "resources"
:events= "calendarEvents"
/>
接着在 <> 先导入组件插件以及相关css文件。
< >
importFullCalendar from'@fullcalendar/vue'
importresourceTimelinePlugin from'@fullcalendar/resource-timeline';
import'@fullcalendar/core/main.css';
import'@fullcalendar/timeline/main.css'
import'@fullcalendar/resource-timeline/main.css'
exportdefault{
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: {
//
}
}
>
我们看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')
]
];
echojson_encode($data);
注意，在后端返回的数据列表中， resourceId 要和Fullcalendar的 resources 中的 id 值对应。
保存，运行项目你将可以看到Demo中的效果。其实我们在几个项目中已经应用到类似这样的时间任务调度，比如机场运营岗位排班，前端不用Fullcalendar也可以达到类似效果。返回搜狐，查看更多
责任编辑：
