WEB技术分享

准备

我们这个例子基于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也可以达到类似效果。