使用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中的效果。