vue FullCalendar插件使用详情

 如上图是实现的效果图，项目需求是从早上8点到下午18点这个时间段可以预约会议室，有冲突的时间段背景颜色用红色表示出来，鼠标放上去显示当前会议的基本信息，日期的话显示第一天都是当前日期。

使用的是vue2来开发的，用到的插件有@fullcalendar/core、@fullcalendar/daygrid、@fullcalendar/interaction、@fullcalendar/list、@fullcalendar/resource-timeline、@fullcalendar/timegrid、@fullcalendar/vue  版本的话都是5.11.3。

使用命令npm  install来下载上面的插件就行。

calendarOptions: {

        plugins: [

          dayGridPlugin,

          timeGridPlugin,

          listPlugin,

          resourceTimelinePlugin,

          interactionPlugin, // needed for dateClick

        ], // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日

        height: "auto",

        dragScroll: false,

        headerToolbar: {

          left: null,

          center: "prev,title,next",

          right: null,

        },

        headerToolbar: false, // 隐藏头部的导航栏

        initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）

        slotMinTime: "08:00",  //开始时间 

        slotMaxTime: "18:00",  //结束时间

        allDaySlot: false, //是否显示日历上方的allDay

        dayMaxEvents: true, // allow "more" link when too many events,只能选中或拖动一次

        firstDay: new Date().getDay(), // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推  new Date().getDay()当前天

        locale: "zh-cn", // 切换语言，当前为中文

        unselectAuto: false, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消

        handleWindowResize: true,

        slotLabelFormat: {

          hour: "2-digit",

          minute: "2-digit",

          meridiem: false,

          hour12: false, // 设置时间为24小时

        },

        initialEvents: [], // alternatively, use the `events` setting to fetch from a feed

        editable: false,

        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: "查看更多",

        events: [],

        eventColor: "#34D98A",

        slotDuration: "00:30:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）

        eventStartEditable: false,

        customButtons: {

          prev: {

            click: () => {

              this.prevWeekClick();

            },

          },

          next: {

            click: () => {

              this.nextWeekClick();

            },

          },

        },

        //   eventColor: '#3BB2E3', // 全部日历日程背景色  事件的颜色，拖动日历或者点击日历时事件区域背景颜色

      },

      calendarApi: null,

      title: "",

    };

以上是它的一些配置项，配置项网上百度一下有很多博主写的比较详细可以参考看看。

下面是它的一些方法。  这个是点击上面的上一周和下一周的api。

 这个是选择预约的时间段的事件

 这个是初始化数据，后台返回的数据渲染到日历上

 color  就是它的背景颜色，id和title属性好像是必须要有的属性值。

以上就是主要的一些需要的内容。基本可以实现需求。