使用Fullcalendar管理时间计划调度安排
source link: https://www.helloweba.net/javascript/623.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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也可以达到类似效果。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK