Fullcalendar 在vue中鼠标hover显示悬浮框（tippy.js插件）

从开始到放弃，从放弃到开始，哥们我已经折腾两个早上了，都有点怀疑人生了。

首先，安装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是一款可以高度自定义配置的插件，可以好好研究，本文意在搞出这个效果，抛砖迎玉。如有小白有问题的话可以问问小编哦，愿这世界少点坑，多点分享。