原标题：使用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也可以达到类似效果。返回搜狐，查看更多

责任编辑：