FullCalendar日历控件vue使用记录

关注

原创 2022-01-26 15:14:33 3.8k 阅读 AI 写同款· GEO 优化 ›

Fullcalendar+vue3 日历组件【代码】Fullcalendar+vue3 日历组件。阅读详情

推荐一个Fullcalendar的api地址
Fullcalendar中文文档
Fullcalendar安装
1、安装所需要的npm包

npm install --save @fullcalendar/vue 
下面包是日历的周视图、日视图等插件包：
npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid

安装后的fullcalendar源码和其它插件都会在@fullcalendar

2、导入HTML

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

3、导入JS

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'

export default {
  name: 'MaintenanceCalendarview',
  components: {
    FullCalendar
  },
  data () {
    return {
      calendarOptions: {
      calendarOptions: {
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: "zh-cn", // 切换语言，当前为中文
        eventColor: "#3BB2E3", // 全部日历日程背景色
        themeSystem: "bootstrap", // 主题色(本地测试未能生效)
        initialDate: this.$moment().format("YYYY-MM-DD"), // 自定义设置背景颜色时一定要初始化日期时间
        // timeGridEventMinHeight: "20", // 设置事件的最小高度
        aspectRatio: 1.198, // 设置日历单元格宽度与高度的比例。
        displayEventTime: true, // 是否显示时间
        allDaySlot: false, // 周，日视图时，all-day 不显示
        // eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        // unselectAuto: false, //当点击页面日历以外的位置时，是否自动取消当前的选中状态。
        headerToolbar: {
          // 日历头部按钮位置
          left: "",
          center: "title",
          // right: "timeGridWeek",
          right: "",
        },
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
        },
        slotLabelFormat: {
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false, // 设置时间为24小时
        },
        // 事件
        datesSet: this.datesSet,
        customButtons: {
          myCustomButton: {
            text: "自定义按钮",
            click: function () {
              alert("点击了自定义按钮!");
            },
          },
        },
        eventClick: this.handleEventClick, // 点击日历日程事件
        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
        eventDragStart: this.eventDragStart, // 拖动事件开始的时候
        eventDrop: this.eventDrop, // 拖动日历日程事件
        updateEvent: this.updateEvent,
        eventResize: this.eventResize, // 修改日历日程大小事件
        select: this.handleDateSelect, // 选中日历格事件
        eventDidMount: this.eventDidMount, // 安装提示事件
        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        // allowContextMenu: false,
        editable: false, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: false, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        dragRevertDuration: 500,
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        dayMaxEvents: false,
        weekends: true,
        navLinks: false, // 天链接
        // selectHelper: false,
        slotEventOverlap: true, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        // 后台返回的数据结构
        events: [],
        // 新增时间段数组
      }
    }
  },
  methods: {
     eventMouseEnter({ event, jsEvent, view }) { // 鼠标划过的事件
      if (event.event.classNames.length) {
        // console.log(event)
      }
    },
    eventDrop({ event, revert }) {
      console.log(event)
    }

  }
}

event的数据格式

events: [
      {
        title : '可以拖动但不能缩放',
        start : '2019-07-01 12:30',
        end : '2019-07-01 13:30',
　　     editable: true
      },//可以拖动但不能缩放，但在周、日视图中是可以进行缩放的
      {
        title : '可以拖动、缩放',
        start : '2019-07-02 00:00',
        end : '2019-07-02 23:59',
        color:'red',
        editable: true
      }, //可以拖动、缩放
　　   {
        title : 'event 2',
        start : '2019-07-02',
        end : '2019-07-02',
        color:'red',
        editable: true
      }, 
  { title: 'event 1', date: '2020-06-01', classNames:['cal'],
        editable: true
      },
      {
        start: '2020-07-24',
        end: '2020-07-28',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      },//背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
    ],