Vue中使用Fullcalendar日历开发日程安排

一、效果图

image.png

官网地址：Vue Component - Docs | FullCalendar

二、安装使用

1、使用 npm install 安装下列依赖

image.png

2、在需要使用的页面中引入

<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>

3、在页面中引入需要的插件

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

4、在data中设置日历的一些配置及属性

data(){
  return{
     calendarOptions:{
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh',
        firstDay: 1,
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
          // list: "列表",
        },
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        weekNumberCalculation: 'ISO',
        nowIndicator: true,
        height:500,
        validRange: this.validRange,  //设置可显示的总日期范围
        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric', // numeric:2022,2-digit:22
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        customButtons: {
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          }
        },
        editable: false, //允许拖动缩放，不写默认就是false
        overlap: false, //允许时间重叠，即可以与其他事件并存，不写默认就是false
        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
        eventClick: this.handleEventClick, //点击日程触发
        dateClick: this.handleDateClick, //点击日期触发
        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
        eventResize: this.calendarEventDropOrResize, //缩放事件触发
        displayEventTime: false, //不显示具体时间
      }
  }
}

5、在methods中添加点击上一月、下一月和今天的事件

method:{
    nextClick() {
      this.$refs.fullCalendar.getApi().next() // 将日历向前移动一步（例如，一个月或一周）。
    },
    prevClick() {
      this.$refs.fullCalendar.getApi().prev() // 将日历后退一步（例如，一个月或一周）。
    }
}

6、在页面初始化数据完成后进行数据整合 让数据符合要求

  形如：
  obj={ id,title,start,end}
  this.calendarOptions.events.push(obj);

三、至此日历模型已完成 后续有其他的修改可在此基础上微调。