从开始到放弃,从放弃到开始,哥们我已经折腾两个早上了,都有点怀疑人生了。
首先,安装Fullcalendar插件,这个东西只能看官网,官网:https://fullcalendar.io/docs#toc。因为它更新快,向下也不兼容哦,一般中文文档啥的更不上官网的速度。有一个小妙招,下个有道词典,不认识的指一下就可以翻译了。具体的安装过程就不详细记录了,今天说一下鼠标hover日历事件显示悬浮框这个东东怎么实现。
因为Fullcalendar文档基本是基于jquery的,所以jquery的同学很好弄,但是今天哥用的vue框架。痛就痛苦在这里。
话不多说,记录下配置:
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
这一句就是初始化日历插件的东西了。配置如下,这是基于Fullcalendar V5版本的哦,其他版本可能不适合:
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin,timeGridPlugin],//加载插件,V5采用插件模块方式加入
editable: true,//是否可编辑
droppable: true,//可拖拽的
initialView: 'dayGridMonth',//日插件
// initialDate:""//初始化日期
timeZone: 'local',//采用时区
locale:"zh-cn",//采用中文
height:700,//日历高度
dateClick: this.handleDateClick,//日期方格点击事件
eventClick:this.handleEventClick,//日程点击事件
eventMouseEnter:function (info) {//鼠标hover事件,对应也有其他鼠标事件监听
// console.log(info)
let col = info.event.borderColor;
let eve = info.event._def.extendedProps
tippy(info.el, {//tippy hover插件
content:"<div style='width: 2rem;'>" +
"<div style='border-bottom: 0.01rem solid #CCCCCC;line-height: 0.3rem;color: "+col+"'>"+info.event.title+"</div>" +
"<div style='color: #666666'>训练名称:"+eve.trainName+"</div>" +
"<div style='color: #666666'>训练日期:"+eve.trainDate+"</div>" +
"<div style='color: #666666'>开始时间:"+eve.starttime+"</div>" +
"<div style='color: #666666'>结束时间:"+eve.endtime+"</div>" +
"<div style='color: #666666'>训练地点:"+eve.address+"</div>" +
// "<div style='color: #666666'>参训成员:"+eve.remember+"</div>" +
"<div style='color: #666666'>备注:"+eve.remark+"</div>" +
"</div>",//允许Html配置
theme:'light',//主题选取
// trigger: 'click',//触发类型
interactive: true,//可交互的
placement: 'right-end',//悬浮框位置
allowHTML: true,//是否允许html文本
});
},
titleFormat: { year: 'numeric', month: 'long'},//日期title格式
headerToolbar:{//头部toolbar
start: '',
center: 'prev title next',
end: ''
},
dayCellClassNames:"bgTd",//日期方格样式设置
events:[]//日程事件的json
}
鼠标hover时间利用的是tippy插件vue版本的哈,官网:https://atomiks.github.io/tippyjs/ 也是英文的。
首先运行安装:
# npm
npm i tippy.js
# Yarn
yarn add 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,
});
},
效果如图所示:
接下来就是配置啦,需要注意的点是配置需要引入相关的css才行,这一点可以参考官网哦。例如:
tippy(info.el, {
content:"ksljd",
animation: 'scale',//显示动画
theme:'light'//显示主题
});
则需要引入:
import 'tippy.js/themes/light.css';
import 'tippy.js/animations/scale.css';
如果需要自定义悬浮框的内容,在需要更多配置,下面是我的一种配置效果以及展示:
tippy(info.el, {
content:"<div style='width: 2rem;'>" +
"<div style='border-bottom: 0.01rem solid #CCCCCC;line-height: 0.3rem;color:
"+col+"'>"+info.event.title+"</div>" +
"<div style='color: #666666'>训练名称:"+eve.trainName+"</div>" +
"<div style='color: #666666'>训练日期:"+eve.trainDate+"</div>" +
"<div style='color: #666666'>开始时间:"+eve.starttime+"</div>" +
"<div style='color: #666666'>结束时间:"+eve.endtime+"</div>" +
"<div style='color: #666666'>训练地点:"+eve.address+"</div>" +
"<div style='color: #666666'>参训成员:"+eve.remember+"</div>" +
"<div style='color: #666666'>备注:"+eve.remark+"</div>" +
"</div>",
theme:'light',
// trigger: 'click',
interactive: true,
placement: 'right-end',
allowHTML: true,
});
效果图,还不错吧!嘻嘻
特此记录用到过的两个方法:
this.$refs.fullCalendar.getApi().today();//回到今天
this.$refs.fullCalendar.getApi().gotoDate(val);//去到某天
效果图,基本功能都实现了哦:
总结:首先就是必须确定tippy安装成功,最好是最新版本,其次就是需要确定引入文件有效,然后就是保证插件运行正常,然就就可以任意配置啦。 tippy是一款可以高度自定义配置的插件,可以好好研究,本文意在搞出这个效果,抛砖迎玉。如有小白有问题的话可以问问小编哦,愿这世界少点坑,多点分享。