一般使用日历插件vue-fullcalendar都会修改插件的源码，为了防止 npm install 覆盖掉日历插件vue-fullcalendar的内容，在本地引入（不是全局引入）。
1.npm install vue-fullcalendar 下载插件，只引用node_modules/vue-fullcalendar/src文件夹，改名为vue-fullcalendar  可放到src下，只要引用得到的位置，相当于写好的vue组件。（我的路径 src>components>vue-fullcalendar）

2.引用日历的组件，在需要的用到日历组件的文件引入



3.结合功能需求自己修改事件触发

fullcalendar 一款 star高达12.6K+ 基于jQuery实现的管理日程安排、工作计划的日历工具。今天给大家分享如何在Vue框架下使用FullCalendar。
fullcalendar-vue 基于FullCalendar.js的Vue版本实现。支持增删改查及拖拽式管理日程安排。
安装
$ npm i @fullcalendar/vue @fullcalendar/daygrid -S
使用插件
Fullcalendar官网还提供了在React和Angular框架下使用方法。
react版本
https://fullcalendar.io/docs/reacthttps://github.com/fullcalendar/fullcalendar-react
angular版本
https://fullcalendar.io/docs/angularhttps://github.com/fullcalendar/fullcalendar-angular
# fullcalendar文档https://fullcalendar.io/https://www.helloweba.net/search.html?keys=fullcalendar# 项目地址https://github.com/fullcalendar/fullcalendar
最后附上fullcalendar的vue版本项目地址
# 文档地址https://fullcalendar.io/docs/vue# 仓库地址https://github.com/fullcalendar/fullcalendar-vue
ok，就介绍到这里。感兴趣的可以去看下哈，欢迎一起交流讨论！

vue 使用fullcalendar组件的时候，标题过长，导致被overflow: hidden;

我们可以换行；

先找到它的css样式

在该页面下的css中加入这个。（>>>是穿透)

.fc-unthemed >>> .fc-content{

white-space: normal;

}



最后效果是这样的

或者溢出…隐藏

.fc-unthemed >>> .fc-content{

text-overflow: ellipsis;

}

首先下载安装所需要的包
	npm i @fullcalendar/daygrid  @fullcalendar/interaction @fullcalendar/vue


引入到当前vue 组件中
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";


注册组件
    <FullCalendar :options="calendarOptions" />

  components: {
    FullCalendar,
  },


配置参数

calendarOptions: {
        locale: "zh", // 中文
        buttonText: {
          // 按钮文本
          today: "今天",
          month: "月视图",
          week: "周视图",
          //   day: "日视图",
        },
        plugins: [dayGridPlugin, interactionPlugin],
        headerToolbar: {
          left: "prev,next today", // 左侧按钮  点击触发对应顺序的字符串代表的事件
          center: "title", // 中间标题
          right: "dayGridMonth,dayGridWeek", // 右侧按钮 点击触发对应顺序的字符串代表的事件
        },
        initialView: "dayGridMonth",  // 初始化 开始视图类型
        editable: false,  // 是否可以拖拽编辑
        selectable: true, 
        dateClick: this.handleDateClick, // 点击日期触发事件
        events: [ // 存储 添加的日程
	        {title: "放假",
	         start:"2021-03-05",
	         end:"2021-03-08",  // 结束日期（不包含当天）
	         id: "bianhao1111",
	         color: "#f00",
	         }
		], 
        eventClick: this.handleEventClick, // 点击 添加的日程触发事件
      },


效果图如下所示