Fullcalendar日历插件+vue 基本属性

初始化日历属性

data(){
  return{
    calendarOptions : {
      plugins: [
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
      dragScroll: false,
      headerToolbar: {
        left: null,
        center: 'prev,title,next',
        right: null
      },
      initialView: 'timeGridWeek',// 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
      allDaySlot:false,//是否显示日历上方的allDay
      dayMaxEvents: false,// allow "more" link when too many events,只能选中或拖动一次
      firstDay: new Date().getDay(), // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
      locale:'zh-cn',// 切换语言，当前为中文
      // eventColor: 'red', // 事件的颜色
      //nowIndicator: false, // 当前的时间线显示

      // axisFormat:'H:(mm)',
      // slotLabelFormat:'H:mm',
      // soltDuration:'01:00:00',
      // soltMinutes:40,
      initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
      editable: true,
      selectable: true,
      selectMirror: true,
      weekends: true,
      select: this.handleDateSelect,//当用户拖拽日期或时间时传递的参数
      //dateClick: this.handleEventClick,//当用户点击日期或时间时触发的事件
      // eventClick: this.handleEventClick,
      viewRender:this.handleViewRender,
      datesRender:this.handleViewRender,
      selectOverlap: true,
      moreLinkClassNames:'more-btns',
      moreLinkContent  : "查看更多",
      // validRange: {
      //   start: new Date()
      // },
      events:[],
      customButtons: {
        prev: {
          click: () => {
            this.prevWeekClick();
          }
        },
        next: {
          click: () => {
            this.nextWeekClick();
          }
        }
      },
      //  hiddenDays: [3,6], //隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
      slotMinTime: "08:00:00",
      slotMaxTime: "18:00:00",
      unselectAuto:false,//当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
      slotLabelFormat: {
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false,
        hour12: false // 设置时间为24小时
      },//设置左侧栏为08:00，而不是8时
      disableAllweekTime:false,//设置今天之前的页面不可选------5月18新加的
      slotDuration: "01:00:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）
      eventStartEditable: false,
      //   eventColor: '#3BB2E3', // 全部日历日程背景色
      //    themeSystem: 'bootstrap', // 主题色
      //  timeGridEventMinHeight: '20', // 设置事件的最小高度
      //   aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
      // displayEventTime: true, // 是否显示时
      //    eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
    },
  }
},

面板不可选置灰

// 今天之前的日期置灰
this.calendarOptions.selectable=false
srt.push({
  startTime:'00:00',
  endTime:'00:00',
  daysOfWeek:[0,1,2,3,4,5,6]
})
//面板灰色
this.calendarOptions.businessHours = this.calendarOptions.selectConstraint =srt

面板已选日期回显色块
let newD = data.map((item,index)=>{
      return {
        id:,
        start: ,//开始时间
        end: ,//结束时间
        color:,//设置不同状态所选区域背景色
        className:,//所选区域class
        num: ,//小时
        status: ,//状态
        isCurrData:,//编辑时是不是当前要编辑的色块
        flag:,//是否为当前审核
       
      }
    

  })
this.$refs.calendar.pushData(newD);