Fullcalendar

news/2024/12/24 11:30:39/文章来源:https://www.cnblogs.com/feiwenstyle/p/18524257

月光光

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