1、Fullcalendar安装
npm install --save @fullcalendar/vue
下面包是日历的周视图、日视图等插件包:
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid
安装后的fullcalendar源码和其它插件都会在@fullcalendar
2、html文件
<template>
<div>
<FullCalendar ref="myCalendar" :options="calendarOptions"/>
</div>
</template>
3、js文件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
4、data中配置日历所需要的属性:以下作为参考:
export default {
name: 'MaintenanceCalendarview',
components: {
FullCalendar
},
data () {
return {
calendarOptions: {
// 引入的插件,比如fullcalendar/daygrid,fullcalendar/timegrid引入后才可显示月,周,日
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth', // 默认为那个视图(月:dayGridMonth,周:timeGridWeek,日:timeGridDay)
firstDay: 1, // 设置一周中显示的第一天是哪天,周日是0,周一是1,类推
locale: 'zh-cn', // 切换语言,当前为中文
eventColor: '#3BB2E3', // 全部日历日程背景色
themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: '20', // 设置事件的最小高度
aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
// allDaySlot: false, // 周,日视图时,all-day 不显示
eventLimit: true, // 设置月日程,与all-day slot的最大显示数量,超过的通过弹窗显示
headerToolbar: { // 日历头部按钮位置
left: '',
center: 'prevYear,prev title next,nextYear',
right: 'today dayGridMonth,timeGridWeek,timeGridDay'
},
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false // 设置时间为24小时
},
eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
dayGrid: {
eventLimit: 5
},
timeGrid: {
eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
// 事件
// eventClick: this.handleEventClick, // 点击日历日程事件
eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
eventDrop: this.eventDrop, // 拖动日历日程事件
eventResize: this.eventResize, // 修改日历日程大小事件
select: this.handleDateSelect, // 选中日历格事件
eventDidMount: this.eventDidMount, // 安装提示事件
// loading: this.loadingEvent, // 视图数据加载中、加载完成触发(用于配合显示/隐藏加载指示器。)
// selectAllow: this.selectAllow, //编程控制用户可以选择的地方,返回true则表示可选择,false表示不可选择
eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
allowContextMenu: false,
editable: true, // 是否可以进行(拖动、缩放)修改
eventStartEditable: true, // Event日程开始时间可以改变,默认true,如果是false其实就是指日程块不能随意拖动,只能上下拉伸改变他的endTime
eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变,默认true,如果是false则表示开始结束时间范围不能拉伸,只能拖拽
selectable: true, // 是否可以选中日历格
selectMirror: true,
selectMinDistance: 0, // 选中日历格的最小距离
dayMaxEvents: true,
weekends: true,
navLinks: true, // 天链接
selectHelper: false,
slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠,默认true允许
}
}
},
methods: {
eventMouseEnter (event, jsEvent, view) { // 鼠标划过的事件
if (event.event.classNames.length) {
// console.log(event)
}
},
eventDrop (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
console.log(event)
}
}
}
(以上日历事件以及event事件差不多这些都是我个人感觉能用到的我才加进去了)
event: [ ] ==>(event能否进行操作真正取决于开始日期和结束日期的格式,即使是设置了editable,时间还是会影响 ,一共有四种情况,当日期时间为00:00到23:59时为全天)
events: [
{
title : '可以拖动但不能缩放',
start : '2019-07-01 12:30',
end : '2019-07-01 13:30', editable: true
},//可以拖动但不能缩放,但在周、日视图中是可以进行缩放的
{
title : '可以拖动、缩放',
start : '2019-07-02 00:00',
end : '2019-07-02 23:59',
color:'red', editable: true
}, //可以拖动、缩放
{
title : 'event 2',
start : '2019-07-02',
end : '2019-07-02',
color:'red', editable: true
},
{ title: 'event 1', date: '2020-06-01', classNames:['cal'], editable: true
},
{
start: '2020-07-24',
end: '2020-07-28',
overlap: false,
display: 'background',
color: '#ff9f89'
},//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
],
添加约束(日程只能在设置了 groupId: ‘availableForMonthStart’ 中进行拖动以及缩放功能)
{
id: '添加约束',
title: '添加约束',
start: '2020-07-11 00:00',
end: '2020-07-11 12:00',
classNames: ['continuousClass'],
color: '#75a7c8',
editable: true,
constraint: 'availableForMonthStart'
},
{
id: 'constraintDom',
groupId: 'availableForMonthStart',
start: '2020-07-11 00:00',
end: '2020-07-11 23:59',
display: 'background',
color: '#ff9f89'
}
完整的代码:
<template>
<div class="M_container">
<div class="D_down">
<FullCalendar ref="myCalendar" :options="calendarOptions"/>
<ul>
<li><span class="waiting"></span>待执行</li>
<li><i class="starting"></i>执行中</li>
<li><i class="finished"></i>已完成</li>
</ul>
</div>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
name: "index",
components: {
FullCalendar,
},
data(){
return {
calendarOptions: {
// 引入的插件,比如fullcalendar/daygrid,fullcalendar/timegrid引入后才可显示月,周,日
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
initialView: 'timeGridWeek', // 默认为那个视图(月:dayGridMonth,周:timeGridWeek,日:timeGridDay)
events: [
{
title : '黄娇变电站3020开关综合检修',
start : '2021-01-18 02:30',
end : '2021-01-18 03:30',
color:'#797979',
editable: true
},//可以拖动但不能缩放,但在周、日视图中是可以进行缩放的
{
title : '黄娇变电站3020开关综合检修',
start : '2021-01-19 00:30',
end : '2021-01-19 04:30',
color:'#5580EE',
editable: true
}, //可以拖动、缩放
{
title : '准备公司资料',
start : '2021-01-21 04:00',
end : '2021-01-21 07:00',
color: '#EDB378',
editable: true,
// overlap: true,
// display: 'background',
},
{
title : '准备公司资料',
start: '2021-01-23 04:00',
end: '2021-01-23 05:00',
overlap: false,
// display: 'background',
color: '#797979'
},//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
],
firstDay: 1, // 设置一周中显示的第一天是哪天,周日是0,周一是1,类推
locale: 'zh-cn', // 切换语言,当前为中文
eventColor: '#3BB2E3', // 全部日历日程背景色
themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
// initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: '20', // 设置事件的最小高度
aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
allDaySlot: false, // 周,日视图时,all-day 不显示
eventLimit: true, // 设置月日程,与all-day slot的最大显示数量,超过的通过弹窗显示
headerToolbar: { // 日历头部按钮位置
left: '',
center: 'prevYear,prev title next,nextYear',
// right: 'today dayGridMonth,timeGridWeek,timeGridDay'
right: ''
},
buttonText: {
// today: '今天',
// month: '月',
// week: '周',
// day: '日'
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false // 设置时间为24小时
},
eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
dayGrid: {
eventLimit: 5
},
timeGrid: {
eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
eventClick: this.handleEventClick,
},
workingTicketVisible: false //工作表票详情页面
}
},
mounted(){
},
methods: {
/**
* 点击日历日程事件
*
* info: 事件信息
* event是日程(事件)对象
* jsEvent是个javascript事件
* view是当前视图对象。
*/
handleEventClick(info){
console.log(info)
},
}
}
</script>
<style lang="scss" scoped>
.M_container {
width: 100%;
height: calc(100vh - 130px);
display: flex;
.P_left {
width: 20%;
margin-right: 10px;
height: 100%;
background: #ffffff;
padding: 10px;
> .el-radio-group {
margin-bottom: 10px;
}
.tree_Panel {
.asideTree_panel {
.el-tree-node {
position: relative;
}
.D_tree_icon {
width: 20px;
height: 20px;
float: right;
position: absolute;
right: 2px;
}
::v-deep .el-tree-node__expand-icon.is-leaf::before{
color: transparent;
cursor: default;
content: none;
}
.line {
width: 17px;
height: 14px;
display: inline-block;
background: url("../../../assets/images/common/icon-jx.png");
}
}
}
}
.el-icon-addJX {
width: 20px;
height: 20px;
background: #1890ff;
}
.P_right {
width: 80%;
height: 100%;
padding: 10px;
background: #ffffff;
.D_title {
display: flex;
justify-content: space-between;
}
.D_up {
width: 100%;
height: calc(100vh - 620px);
overflow-y: auto;
background: #EFF4FE;
padding: 0 10px;
font-size: 13px;
font-family: "Source Han Sans CN Regular";
>.el-row {
height: 150px;
display: flex;
flex-wrap: wrap;
.el-col {
width: 48%;
height: auto;
margin: 10px 1%;
}
}
.yuan {
width: 4px;
height: 15px;
display: inline-block;
opacity: 1;
margin-right: 5px;
border: unset !important;
background: #2275f2;
border-radius: 0;
}
}
.D_down {
width: 100%;
margin-top: 10px;
/*height: calc(100vh - 525px);*/
overflow-y: auto;
>ul {
list-style: none;
padding: 0;
margin: 5px 0 0 0;
float: right;
width: 20%;
display: flex;
justify-content: space-around;
font-family: "Source Han Sans CN Medium";
font-size: 13px;
>li {
width: 30%;
.waiting {
width: 15px;
height: 15px;
background: #5580EE;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
}
.starting {
width: 15px;
height: 15px;
background: #EDB378;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
}
.finished {
width: 15px;
height: 15px;
background: #797979;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
}
}
}
//日历样式
::v-deep .fc .fc-toolbar-title{
font-size: 15px !important;
font-family: "Source Han Sans CN Regular";
line-height: 24px;
}
::v-deep .fc .fc-button{
padding: 0;
}
::v-deep .fc-toolbar-chunk{
display: flex;
margin: 0 0 5px 0;
}
::v-deep .fc .fc-toolbar.fc-header-toolbar {
margin: 0 !important;
}
::v-deep .fc .fc-col-header-cell-cushion {
font-size: 15px;
font-family: "Source Han Sans CN Regular";
color: #333;
}
::v-deep .fc .fc-timegrid-slot-label-cushion{
font-size: 13px;
font-family: "Source Han Sans CN Regular";
}
::v-deep .fc .fc-view-harness {
height: 360px !important;
overflow: auto;
}
}
}
}
</style>
参考资料:
https://fullcalendar.io/
https://www.npmjs.com/package/vue-full-calendar
https://blog.csdn.net/supingemail/article/details/48371927
特别感谢:https://www.cnblogs.com/czk1634798848/p/13386178.html
原文链接:https://blog.csdn.net/qq_38244874/article/details/112832039