FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果
文章目录
前言
一、FullCalendar是什么？
二、使用步骤
1.引入库
2.html部分代码
3.css样式代码（样式我单独写个scss文件引入的）
4.逻辑代码部分
总结
前言
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。
基本的功能可以新建个日程看看样式，可以拖拽日程进去。
提示：以下是本篇文章正文内容，下面案例可供参考
一、FullCalendar是什么？
Fullcalendar是一个非常受欢迎的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接。
官网链接：https://fullcalendar.io/demos
主要是针对于jq为基础写的插件，官网文档是全英文的，所以还要靠万能的度娘。
这里附个链接，在Vue框架下使用Fullcalendar_Helloweba
里面是详细讲解用vue写法的插件用法，只不过我原封照搬的时候遇到很多问题，后面我会总结一下。
二、使用步骤
1.引入库
代码如下（示例）：
npm install @fullcalendar/core
npm install @fullcalendar/vue
npm install @fullcalendar/daygrid
npm install @fullcalendar/interaction
npm install @fullcalendar/timegrid
npm install @fullcalendar/list
（这个也可以一次npm install 由于我一次性安装出问题了我就一个一个安装的）
import '@fullcalendar/core'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import moment from "moment";2.html部分代码
这部分没啥说的，做的页面布局，我搞的都是纯静态的，有需要的直接复制粘贴就行，css样式我是用scss文件引入的，代码放在下面。
+ 新建日程
日程状态图例
未开始
进行中
已完成
已延时
可拖动列表
{{ item.name }}
{{ item.value }}
取 消
确 定
3.css样式代码（样式我单独写个scss文件引入的）
.calendar{
padding: 0 20px;
.el-button{
width: 100px;
}
.calendar_header{
display: flex;
margin: 30px 0;
.el-input{
width: 200px;
margin-right: 16px;
}
}
.calendar_body{
display: flex;
.calendar_body_left{
display: flex;
flex-direction: column;
width: 10%;
.el-button{
margin-left: 0 !important;
color: #fff;
margin-bottom: 4px;
}
.unstart_btn{
background-color: #ffcc99;
}
.doing_btn{
background-color: #5580ee;
}
.success_btn{
background-color: #87d068;
}
.delay_btn{
background-color: #FF0033;
}
}
.calendar_body_right{
width: 85%;
}
}
.el-dialog{width: 30%;}
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange{
width: 100%;
}
.el-select{
width: 100%;
}
.calendar_body_left_top{
.calendar_body_left_top_title{
margin-bottom: 15px;
font-size: 18px;
font-weight: bolder;
}
}
.calendar_body_left_bottom{
padding: 0 25px;
margin-top: 20px;
.calendar_body_left_bottom_title{
font-size: 18px;
font-weight: bolder;
}
.circle {
background-color: #3788d8;
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 12px;
height: 18px;
line-height: 18px;
padding: 0 6px;
text-align: center;
white-space: nowrap;
border: 1px solid #fff;
}
.holiday {
background-color: #FF6600;
}
.work{
background-color: #66CCCC;
}
.date-box {
//border: 1px solid #ccc;
border-radius: 5px;
}
.box {
margin-top:15px;
border: 1px solid #FFFFCC;
padding: 10px 20px;
border-radius: 5px;
display: flex;
justify-content: space-between;
cursor: pointer;
background-color: #FFFFCC;
}
}
}4.逻辑代码部分
先上代码
5.踩坑部分
以上代码直接cv应该就可以实现一个静态的日历排班表了。下面来说说我实现的过程遇到那些问题：
（1）这一块看别人写的都是 import ‘@fullcalendar/core/vdom’ // solves problem with Vite
但是咱是vue2写的不适用。但是nodemodules包中有core文件我就把后面去掉了
（2）在安装的时候总是会出现以下报错
viewType “” is not available. Please make sure you’ve loaded all neccessary plugins
不要指定安装版本直接install就行。报错不行就全部uninstall，重新下载。package.json文件里面没了才是卸载完成。我遇到的问题就是一次性下载后报错，我没卸载，看别人的版本可以，我直接又下载了别人的版本，结果还是不行，一定卸载干净再重新下载。我觉得安装我上面的代码应该不会报错，前提是你的node版本什么的和我差不多哈哈
（3）这块这些Fullcalendar日历插件的事件的Info可以打印出当前拖拽的信息，比如拖拽前后的时间，还有样式什么的都可以在这里修改。打印出来附在下面啦 event就是拖拽后的信息，oldevent就是拖拽前的。我主要拿时间所以截图下面了。
（4）drop这块的拖拽主要是实现将左侧可拖拽列表中的日程拖放到Fullcalendar日历中。拖拽左侧日程块后打印date也可以获得好多有用的信息啦
总结
以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
