Fullcalendar可以很好的管理排程事件，可以管理时间和任务排程，比如日常值班岗位排程、活动会议议程排程、项目行动排程、车间人工作业排程等。.今天，我们就来看看使用Fullcalendar(v4)完成一个基于时间的动作任务调度。我们先来看演示DEMO。【查看Demo】我们的例子是基于Vue2和Fullcalendar4的，所以大家可以先了解本站文章：Vue框架下使用Fullcalendar，或者去官网：https://fullcalendar.io/了解更多全日历。本例中我们使用了事件调度插件：timeline，所以先安装相关插件：npminstall--save@fullcalendar/corenpminstall--save@fullcalendar/resource-timelinenpminstall--save@fullcalendar/timeline使用新建一个timeline.vue组件文件，添加组件代码：:eventTimeFormat="evnetTime":header="header":aspectRatio="aspectRatio":plugins="calendarPlugins"resourceAreaWidth="20%"resourceLabelText="Project":resources="resources":events="calendarEvents"/>然后在从'@fullcalendar/vue'导入FullCalendar从'@fullcalendar/resource-timeline'导入resourceTimelinePlugin;导入'@fullcalendar/core/main.css';导入'@fullcalendar/timeline/main.css'导入'@fullcalendar/resource-timeline/main.css'exportdefault{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:{小时:'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:'MobilityTeam'},{id:5,eventColor:'#e90',title:'取证团队'},{id:6,eventColor:'#',title:'ReviewTeam'}],calendarEvents:{url:'timeline.php'}}},mounted(){},created(){},methods:{//}}让我们看一下DEMO。此示例显示了警察破案的行动计划。计划表中，左边是行动组，右边是每个组对应的职责和时间范围内要做什么。在数据部分，可以通过:resources设置调度表的左边部分。内容是一个数组。我们也可以在后台异步请求一个数据源，返回json格式的数据。事件：事件数据。我们一般会异步请求后台url，比如url:'timeline.php'，会返回json格式的数据源，Fullcalendar会直接将数据渲染到界面上。后端timeline.php我们的后端使用PHP来提供数据接口。本例只是演示，没有使用数据库。在实际项目中，需要使用PHP或者Python等后端语言来操作数据库，提示数据源为Fullcalendar。$data=['0'=>['resourceId'=>1,'title'=>'初步调查','start'=>date('Y-m-d00:30:00'),'end'=>date('Y-m-d09:00:00')],'1'=>['resourceId'=>2,'title'=>'雷击行动','start'=>date('Y-m-d06:00:00'),'end'=>date('Y-m-d10:00:00')],'2'=>['resourceId'=>3,'title'=>'负责区域安全','start'=>date('Y-m-d05:00:00'),'end'=>date('Y-m-d18:00:00')],'3'=>['resourceId'=>4,'title'=>'机动特战队，随时待命','start'=>date('Y-m-d05:00:00'),'end'=>date('Y-m-d12:00:00')],'4'=>['resourceId'=>5,'title'=>'抓捕后现场取证','start'=>date('Y-m-d10:00:00'),'end'=>date('Y-m-d18:00:00')],'5'=>['resourceId'=>6,'title'=>'讯问嫌疑人','start'=>date('Y-m-d15:00:00'),'end'=>date('Y-m-d23:00:00')]];echojson_encode($数据);注意后台返回的数据列表中，resourceId必须与Fullcalendar对应保存的资源中的id值，运行项目即可在Demo中看到效果。
