Vue组件中使用 fullcalendar

1. 首先下载安装所需要的包

   	npm i @fullcalendar/daygrid  @fullcalendar/interaction @fullcalendar/vue
   

2. 引入到当前vue 组件中

   import FullCalendar from "@fullcalendar/vue";
   import dayGridPlugin from "@fullcalendar/daygrid";
   import interactionPlugin from "@fullcalendar/interaction";
   

3. 注册组件

       <FullCalendar :options="calendarOptions" />
   

     components: {
       FullCalendar,
     },
   

4. 配置参数

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, // 点击 添加的日程触发事件
      },

5. 效果图如下所示