fullCalendar日历插件玩法解析

Fullcalendar安装

• 安装需要的npm包

 npm install --save @fullcalendar/vue 
 // 日历的周视图、日视图：
npm install --save  @fullcalendar/core
					@fullcalendar/daygrid // 月视图
 					@fullcalendar/interaction
  					@fullcalendar/list  // 列表
  					@fullcalendar/timegrid // 周视图

导入

<template>
  <div class="boxWidth">
    <FullCalendar ref="myCalendar" :options="calendarOptions" />
  </div>
</template>

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

components: {
    FullCalendar//
  },
 

data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        initialView: 'dayGridMonth', 
        // 选择日期事件，可响应一个新建日程的事件
        select: this.handleDateSelect, 
        // 点击事件对象事件
        eventClick: this.handleEventClick, 
        // 点击删除标签事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, 
        // 切换语言，当前为中文
        locale: 'zh-cn', 
         // 设置一周中显示的第一天是哪天，周日是0，周一是1，
        firstDay: 0,
        // 日历日程背景色
        eventColor: '#3BB2E3', 
        // 设置事件的最小高度
        timeGridEventMinHeight: '20', 
        // 设置日历单元格宽度与高度的比例。
        aspectRatio: 1.2, 
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives', // 试用证书
        events: [
          { title: 'event 1', date: '2020-06-01', classNames: ['cal'] },
          { title: 'event 2', date: '2021-03-10', classNames: ['inv'] },
          { title: '公司会议', start: '2021-03-10 09:05', end: '2020-06-23 12:00', classNames: ['cal'] },
          { title: '部门会议', start: new Date(), classNames: ['cal'] }
        ],
        // views: {
        // // 对应月视图
        //   dayGridMonth: {
        //     displayEventTime: false, // 是否显示时间
        //     dayCellContent(item) {
        //       const _date = formatDate(item.date).split('-')
        //       const _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
        //       return { html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
        //     }
        //   }

        // },
        // 时隙标签格式 ，确定将在时间段内显示的文本。
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        // // 日历头部按钮位置
        headerToolbar: {
          left: 'today',
          center: 'prev title next',
          right: 'dayGridMonth,timeGridWeek,listDay'
        },
        // 标题按钮的名字
        buttonText: {
          prev: '',
          next: '',
          today: '今天',
          month: '月视图',
          week: '周视图',
          day: '日视图',
          list: '列表视图'
        },
        editable: true, // 是否可以进行（拖动、缩放）修改
        allDaySlot: false, // 周，日视图时，all-day 不显示
        displayEventTime: true, // 是否显示时间
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        displayEventEnd: false, // 所有视图显示结束时间
        allowContextMenu: false,
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      }
    }
  },
  mounted() {
    this.getMyEchart()
  },
  methods: {
    handleDateClick: function(arg) {
      alert('date click! ' + arg.dateStr)
    },
    getMyEchart() {
      console.log('啥也没有')
    },

    // methods中定义相应的事件
    handleDateSelect(selectInfo) {
      const title = prompt('请添加今日日程')
      const calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: '13213541344131841324da1',
          title: '',
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
          classNames: ['cal']
        })
      }
    },
    handleEventClick(clickInfo) {
      if (confirm(`确定删除吗 '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    }

  }

<style lang="scss">

.fc-daygrid-event{
  .fc-daygrid-event-dot{
    display:none;
  }
  &.cal{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    font-size: 12px;
    height: 30px;
    border-left: 2px solid #5289FF;
    background-color:#EEF3FF;
    .fc-event-title{
      color:#333;
    }
  }
  &.inv{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    height: 30px;
    line-height: 16px;
    font-size: 16px;
    border-left: 2px solid #FFA327;
    background-color:#FFF6E9;
    .fc-event-title{
      color:#333;
    }
  }
}
.fc-timegrid-event{
  .fc-daygrid-event-dot{
    display:none;
  }
  &.cal{
    padding-left:5px;
    color:#333;
    height: 30px;
    font-size: 13px;
    border-radius: 0;
    border:none;
    border-left: 2px solid #5289FF;
    background-color:#EEF3FF;
    .fc-event-title{
      color:#333;
    }
  }
  &.inv{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    height: 30px;
    line-height: 16px;
    font-size: 13px;
    border-left: 2px solid #FFA327;
    background-color:#FFF6E9;
    .fc-event-title{
      color:#333;
    }
  }
}
.fc .fc-toolbar-title{
  display: inline-block;
  vertical-align: middle;
}
.fc-theme-standard td{
  border-top-color:transparent;

}
.boxWidth{
  width: 800px;
}
</style>

手动添加点击删除日程的事件