Vue3中使用FullCalendae日历，实现鼠标悬浮日程上出现提示框

官网：https://fullcalendar.io/docs?login=from_csdn
参考文档：
https://devpress.csdn.net/vue/66cd7dd4c618435984a281a2.html
https://blog.csdn.net/qq_38543537/article/details/121360027

需求描述：修改日程的样式并且鼠标放在日程上出现提示框

<template>
  <div class="full-calendar">
    <FullCalendar ref="fullCalendarRef" :options="calendarOptions" />
    <div class="point">
      <div
        style="
          height: 16px;
          width: 16px;
          border-radius: 50%;
          background-color: #cc4545;
          margin-right: 5px;
        "
      ></div>
      <span>代办</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";

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";

// full calender 參數設置
const fullCalendarRef = ref(null);
const calendarOptions = {
  plugins: [dayGridPlugin], // 日历插件配置
  initialView: "dayGridMonth", // 日历模式
  handleWindowResize: true, //是否随窗口大小变化
  height: "auto",
  navLinks: false, // 日期是否可以被点击
  headerToolbar: {
    // 头部toolba
    center: "prev,next",
    left: "title",
    end: "",
  },
  selectable: true, //是否可以选中日历格
  dayMaxEvents: true,
  timeZone: "local", // 時區
  locale: "zh-tw", // 設置語言
  // 设置日程
  events: [
    {
      title: "你有一个代办事件",
      date: "2025-06-18",
      color: "#cc4545",
      description: "这是一个带有提示的日程",
    },
  ],
  views: {
    dayGrid: {
      dayMaxEventRows: 4,
    },
  },
  // 调整日程样式
  eventDidMount: function (info) {
    info.el.style.height = "15px";
    info.el.style.width = "15px";
    info.el.style.borderRadius = "50%";
  },
  // 设置日程提示框
  eventContent: function () {
    // return {
    //   html: `<div style="height:20px;"title="${info.event._def.extendedProps.description}">${info.event.title}</div>`,
    // };
  },
  // 日期选择触发钩子
  select: function (info) {
    console.log(info);
    alert("选择了日期:");
  },
  //   点击日程触发钩子
  eventClick: function () {
    alert("点击了日程");
  },
  // 鼠标移入日程初发钩子
  eventMouseEnter: function (info) {
    // console.log("infon=>", info);
    info.el.style.cursor = "pointer";
    tippy(info.el, {
      content: `日程：${info.event.title || "无标题"}`, // 提示内容
      theme: "tomato", // 主题
      allowHTML: true, // 允许 HTML 内容
      placement: "top", // 弹出位置
      animation: "scale", // 动画效果
      duration: 300, // 持续时间
    });
  },
};
</script>

<style lang="scss" scoped>
.full-calendar {
  position: relative;
  width: 50%;
  height: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.point {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep(.fc .fc-toolbar) {
  justify-content: flex-start;
}
::v-deep(.fc-toolbar-title) {
  color: #0078d4;
}
::v-deep(.fc-prev-button) {
  background-color: rgba(0, 120, 212, 0.3);
  border: none;
  border-radius: 5px 0 0 5px;
  margin: 0 10px;
}
::v-deep(.fc-next-button) {
  background-color: rgba(0, 120, 212, 0.3);
  border: none;
  border-radius: 0 5px 5px 0;
}
</style>

日历上的提示框借助了tippy.js组件，如果不想借入其他组件，可以使用原生方法，具体代码如下：