先上一下需要实现的ui图
image.png
实现过程挺痛苦的。先是尝试了一下不用插件自己手写，在马上就能大功告成的时候，遇见了一个解决不动的坎，于是放弃，转去找插件。fullCalendar这个插件我看了demo之后发现和我们的需求很吻合，后期加功能的话也可以实现扩展，挺强大的，也一直保持更新，最近一次更新是2020-5-20。于是就是他啦。定了插件之后后面难就难在fullCalendar是全英文文档，可能国外的人的思维方式和我们也不太一样，找起方法、属性来费劲的一批。我用的时候刚好fullCalendar更新了V5，中文文档有滞后，只更新到了V4。
官网demo长这个样子，需要改造。
image.png
改造过程
- 安装相关插件
npm install --save @fullcalendar/core
npm install --save @fullcalendar/resource-timeline
npm install --save @fullcalendar/timeline
- 按需引入
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'
- 部分代码逻辑，我自己的业务逻辑有删减，copy可能运行不成功，主要是想记录一下用到的api。
export default {
name: '',
components: {
FullCalendar,
},
data() {
return {
meetData:[],
// 日历插件的配置
calendarOptions: {
headerToolbar: false, // 不显示头部按钮
// headerToolbar: {
// // 日历头部按钮位置
// // left: 'prev',
// // center: 'title',
// // right: 'next',
// },
// locale: 'zh-cn', // 语言
plugins: [ interactionPlugin, resourceTimelinePlugin],
initialView: 'resourceTimeline',
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
// Fullcalendar的日程调度timeline插件属于增值功能，意思是属于高级功能要貌似要收费，
// 但是用户可以将该插件用在非营利性项目中。使用timeline插件默认会在页面左下角有版权信息，
// 但是我们可以将一个参数schedulerLicenseKey的值设置为'GPL-My-Project-Is-Open-Source'就可隐藏左下角的版权内容。
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true, // 是否显示分钟
meridiem: 'short',
hour12: false,
},
slotDuration: '01:00:00', // 显示时间间隔，默认'00:30:00'，即30分钟。
resourceAreaHeaderContent: '会议室', // 纵轴的第一行 用来表示纵轴的名称
resourceAreaWidth: '10%',
resources: [], // 日历左侧第一列
events: [], // 日历右侧主体事件数据
selectable: true,
select: (selectInfo) => {
// console.log('触发了select-------');
// console.log(selectInfo);
// 获取日历对象 后面的api方法在此对象上使用
let calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
let obj = {
id: this.temNum,
resourceId: this.resourceId,
title: '新建会议',
start: this.startTime,
end: this.endTime,
// color: 'transparent', // 边框颜色
// textColor: '#fff', // 文字颜色
// backgroundColor:'#409EFF', // 背景颜色
// 创建一个新事件格子
calendarApi.addEvent(obj);
}
},
dayClick: (info) => {
// console.log('dayClick-------');
// console.log(info);
},
dateClick: (info) => {
// console.log('触发了dateClick-------');
// console.log(info);
},
// 鼠标移入效果
eventMouseEnter: (info) => {
// console.log('鼠标移入效果--------');
// console.log(info);
},
// 点击
eventClick: (info) => {
// console.log('点击弹出详情弹窗--------');
// console.log(info);
if (info.event._def.extendedProps.meeting_id) {
this.detailId = info.event._def.extendedProps.meeting_id;
this.$refs.meetDetailDialog.detailVisible = true;
}
},
},
};
},
created() {
// console.log('created--------');
this.$nextTick(() => {
this.calendarApi = this.$refs.fullCalendar.getApi();
});
// 这个是拿数据的方法
this.getMeetingRoomUsage();
},
methods:{
// 查询会议室使用情况 绑数据
getMeetingRoomUsage() {
// console.log('查询会议室使用情况----------');
this.loading = true;
let params = {
time: this.selectDate,
};
meetingRoomUsage(params).then((res) => {
this.loading = false;
if (res.code == 200) {
this.meetData = res.data;
// console.log(res.data);
let newFormatResources = [];
let newFormatEvents = [];
for (let item of this.meetData) {
let obj1 = {
id: item.meeting_room_id,
title: item.meeting_room_name,
};
if (item.meeting_list) {
for (let meet of item.meeting_list) {
let obj2 = {
meeting_id: meet.meeting_id, // 会议id
resourceId: meet.meeting_room_id, //会议室id
title: meet.meeting_title, // 会议名称
start: meet.begin_time,
end: meet.end_time,
color: 'transparent', // 边框颜色
textColor: meet.meeting_state == 2 ? '#1677FF' : '#F86403', // 文字颜色
backgroundColor:
meet.meeting_state == 2
? 'rgba(22, 119, 255, 0.2)'
: 'rgba(248, 100, 3, 0.3)', // 背景颜色
};
newFormatEvents.push(obj2);
}
}
newFormatResources.push(obj1);
}
this.calendarOptions.resources = newFormatResources;
this.calendarOptions.events = newFormatEvents;
} else {
this.$notify.error({
title: '错误',
message: res.msg,
});
}
});
},
},
};
- 鼠标hover事件利用的是tippy插件vue版本的 也是英文的。需要安装。
npm i tippy.js
然后在用到的文件里引入
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css';
然后在Fullcalendar里的eventMouseEnter里这样写：
eventMouseEnter:function (info) {
tippy(info.el, {
content:"ksljd"
// content: info.event.extendedProps.name,
// placement: "top-start",
// arrow: false,
// 鼠标放在提示中提示不消失
// interactive: true,
});
},
效果如图所示：
image.png
接下来就是配置啦，需要注意的点是配置需要引入相关的css才行，这一点可以参考官网哦。例如：
tippy(info.el, {
content:"ksljd",
animation: 'scale',//显示动画
theme:'light'//显示主题
});
则需要引入：
import 'tippy.js/themes/light.css';
import 'tippy.js/animations/scale.css';
如果需要自定义悬浮框的内容，在需要更多配置，下面是我的一种配置效果以及展示：
// 鼠标移入效果
eventMouseEnter: (info) => {
// console.log('鼠标移入效果--------');
// console.log(info);
let eve = info.event._def.extendedProps;
if (eve.meeting_id) {
// 鼠标移入的悬浮框效果
let instance = tippy(info.el, {
content:
"',
theme: 'light',
// trigger: 'click',
interactive: true,
placement: 'right-end',
allowHTML: true,
zIndex: 9999999,
});
}
},
效果图，还行哈哈哈
image.png
好记性不如烂笔头，最后贴一下官网和中文文档的地址，以及我参考到的博客地址。
- fullCalendar官网 https://fullcalendar.io/#demos
- fullCalendar中文文档 https://www.helloweba.net/javascript/623.html
- tippy官网 https://atomiks.github.io/tippyjs/
- 参考博客1 https://blog.csdn.net/Namaste_/article/details/106398247
- 参考2 悬浮框的参考博客 https://blog.csdn.net/mr_carry/article/details/107783961