Fullcalendar

飞蚊發表於2024-11-03

月光光

使用Fullcalendar管理時間計劃排程安排

月光光

2020-01-05

閱讀 4 分鐘

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);