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

2019年12月28日 21:27helloweba.net 作者:月光光 标签:Vue.js  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组件文件,添加组件代码:

<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也可以达到类似效果。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/623.html

3条评论

  • 当时的时代发生

    1

  • dsfssdfdsf

    关于 FullCalendar 的 businessHours, 只能设置开始, 结束时间, 请问有没有设置关于 中午午休时间段的设置(午休时间段 也是灰色背景)

    月光光 回复: 试下这个:businessHours: [{daysOfWeek: [ 1, 2, 3, 4,5 ], startTime: '09:00', endTime: '12:00'},{daysOfWeek: [ 1, 2, 3, 4,5 ], startTime: '14:00', endTime: '18:00'}],
  • atf38dhr

    保存,运行项目你将可以看到Demo中的效果。其实我们在几个项目中已经应用到类似这样的时间任务调度,比如机场运营岗位排班,前端不用Fullcalendar也可以达到类似效果。