使用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组件文件，添加组件代码：

接着在

我们看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中的效果。