首先，Fullcalendar的安裝使用就不再贅述了，我是在已有這個日曆外掛的基礎上 新增的懸浮框。

本篇注重懸浮框的內容

懸浮框的引入：

直接在package.js中加上tippyjs的資訊，然後 npm install。tippyjs 就已經安裝上了

"tippy.js": "6.3.0"

　　在vue檔案中進行引入：

import tippy from "tippy.js";    //引入 tippy.js
import 'tippy.js/dist/tippy.css';//引入 tippy.js
import 'tippy.js/themes/light.css';    //引入主題
import 'tippy.js/animations/scale.css';

　　Fullcalendar有 事件：

config: {
                    eventMouseover:this.eventMouseover,//滑鼠放上時候的事件
                },

下面是滑鼠放上的事件：

/**
           * @param calEvent   裡面包含日曆中顯示的一些資料
           * @param jsEvent    jsEvent.currentTarget 是懸浮在哪個上面的元素
           * @param view
           */
          eventMouseover: function (calEvent, jsEvent, view) {//滑鼠在日程區塊上時觸發
            let content = ""; //content中可以直接設定懸浮框中內容的樣式
            content = "<div style=''>" + calEvent.user_name + "</div>";
            content = content + "<div style=''>" + "研發任務：" + calEvent.name1 + "<div>";
            content = content + "<div style=''>" + "快速研發任務：" + calEvent.name2+ "<div>";

            tippy(jsEvent.currentTarget, {
              content: content,  //懸浮框展示的內容
              // theme: 'light',  //懸浮框主題，預設主題中的light主題（白底黑字）
              theme: 'tomato',    //自定義主題，顏色在style中設定
              allowHTML: true,    //為true的時候，可以識別content中的html
            });
          },　

　　這樣以來，基礎的懸浮樣式就可以展示：

但是預設的light主題的懸浮框，在多次不停的使用懸浮框的時候 ，會有越來越重的邊框陰影，例如：

經過不斷的實驗，發現只有light這個主題的樣式會有這種動畫效果 ，使用自定義主題的懸浮框就不會有陰影

自定義懸浮框使用方法：

https://atomiks.github.io/tippyjs/v6/themes/

使用自定義主題之後有個小提示：

在直接使用完之後，會發現小尖尖箭頭的地方依然是預設的主題的顏色，

這個時候就需要把尖尖箭頭的css進行修改：

<style>
.tippy-box[data-theme~='tomato'] { //自定義主題，這裡的tomato是自定義主題的名稱
  background-color: tomato; //自定義主題的背景色
  color: yellow;   //自定義主題的字型顏色
}

.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {  //修改箭頭的顏色
  border-top-color: tomato;
}

</style>

　　然後箭頭已經改好：

本篇文章引用到的大佬的連結有：

1，vue 日曆外掛的引入和使用：
https://www.cnblogs.com/bllx/p/9850577.html

2，日曆加懸浮框使用tippyjs外掛：

https://blog.csdn.net/Mr_carry/article/details/107783961

3，tippyjs官網文件：

https://atomiks.github.io/tippyjs/v6/themes/