使用Fullcalendar管理时间计划调度安排

时间 2020-01-06

原文原文链接

Fullcalendar能够很好的管理日程安排事件，能够管理时间和任务调度，好比平常值班岗位安排、举办活动会议议程安排、项目行动安排、车间劳动岗位排班等等。今天咱们来了解一下使用Fullcalendar（v4），完成一个基于时间的行动任务调度，先看演示DEMO。javascript

【查看演示】php

准备

咱们这个例子基于Vue2和Fullcalendar4，所以你先能够了解本站文章：在Vue框架下使用Fullcalendar，或者到官网：https://fullcalendar.io/了解有关Fullcalendar的更多详情。css

咱们在本例中用到了事件调度插件：timeline，所以先安装好相关插件：html

npm install --save @fullcalendar/core 
npm install --save @fullcalendar/resource-timeline 
npm install --save @fullcalendar/timeline

使用

咱们先新建timeline.vue组件文件，添加组件代码：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文件。java

Fullcalendar的日程调度timeline插件属于增值功能，意思是属于高级功能要貌似要收费，可是用户能够将该插件用在非营利性项目中。使用timeline插件默认会在页面左下角有版权信息，可是咱们能够将一个参数schedulerLicenseKey的值设置为'GPL-My-Project-Is-Open-Source'就可隐藏左下角的版权内容。git

<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，本例是展现一个警方的破案行动计划，在计划调度表中左侧是行动分组，右侧是每一个分组对应的职责和在时间范围内要作的事情。web

在data部分，经过:resources能够设置调度表左侧部分，内容是一个数组，咱们也能够异步请求后台一个数据源，返回json格式数据便可。数据库

events：事件数据。咱们通常异步请求后台url，如url: 'timeline.php'，将返回json格式的数据源，Fullcalendar会直接将这些数据渲染到界面上。npm

后端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中的效果。