VueFullcalendar详解

一、什么是VueFullcalendar

1、VueFullcalendar是一个基于vue.js和FullCalendar.js的日历组件。

2、FullCalendar是一个开源的日历插件，可以用于在网站上显示日历、行程、活动等信息，支持多种视图模式和事件选择交互方式。

3、VueFullcalendar提供了一种方便快捷的方式来集成 FullCalendar 功能到 Vue.js 应用程序中，从而轻松地创建动态、交互性的日历/行程/活动。

二、VueFullcalendar的使用

1、要使用VueFullcalendar，我们首先需要安装FullCalendar这个插件

//安装FullCalendar
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid moment

2、然后，我们需要在组件中导入FullCalendar和日历所需要的视图，以及事件交互的插件

//引入FullCalendar插件以及相应的VueFullcalendar组件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'

//在Vue.js组件中声明FullCalendar组件
  components: {
    FullCalendar
  },

//为FullCalendar注册所需的插件
  calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],

3、最后，在模板中使用FullCalendar标记，通过props将所需的选项传递给FullCalendar组件，其中最重要的是eventSources，它是一个承载日历事件信息的数组，FullCalendar将根据这个数组来动态渲染日历事件。

<!--在模板中使用FullCalendar标记，并为其props传递配置信息-->
  <FullCalendar
    defaultView="dayGridMonth"
    :plugins="calendarPlugins"
    :events="eventSources"
    @eventClick="handleEventClick"
  />

// 将eventSources传递给FullCalendar组件
  data() {
    return {
      eventSources: [
        {
          events: [
            {
              title: 'Meeting',
              start: '2022-04-07T19:00:00',
              end: '2022-04-07T21:00:00',
              extendedProps: {
                description: 'Meeting for discussing the new project',
              },
            },
            {
              title: 'Appointment',
              start: '2022-04-08T10:30:00',
              extendedProps: {
                description: 'Doctor appointment at 10:30 AM',
              },
            },
            {
              title: 'Interview',
              start: '2022-04-09T14:00:00',
              extendedProps: {
                description: 'Interview for the new job position',
              },
            },
          ],
        },
      ],
    };
  },

三、VueFullcalendar的配置选项

1、eventSources：用于指定日历所需的事件数据，是一个数组类型

eventSources:[
  {
    events: [
     {
       title: 'Meeting',
       start: '2022-04-07T19:00:00',
       end: '2022-04-07T21:00:00',
       extendedProps: {
         description: 'Meeting for discussing the new project',
       },
     },
     //...
    ],
    color: 'red', //设置事件颜色
    textColor: 'white', //设置事件文本颜色
    backgroundColor: 'green' //设置事件背景颜色
 }
 //...
]

2、initialView：用于指定日历的初始视图，有dayGridMonth、dayGridWeek、dayGridDay、timeGridWeek、timeGridDay等多种视图可供选择。

initialView: 'dayGridMonth'

3、headerToolbar：用于配置日历的标题栏，可以自定义按钮和视图的组合。

headerToolbar: {
  left: 'prev,next today',
  center: 'title',
  right: 'dayGridMonth,timeGridWeek,timeGridDay',
},

4、slotLabels：用于指定日历视图显示的文字信息，包括周、月、日等视图的显示信息。

slotLabels: {
  day: '日',
  week: '周',
  month: '月',
}

5、slotDuration：用于指定日历视图中的时间间隔，比如‘00:30:00’指每30分钟一个时间间隔。

slotDuration: '00:30:00'

四、VueFullcalendar的时间处理

1、FullCalendar.js基于Moment.js库进行日期时间的处理，因此，需要提前安装Moment.js

npm install --save moment

2、在VueFullcalendar中，可以通过slotProps和eventRender等选项，对日历事件的显示进行自定义处理。

// slotProps用于传递日历事件信息和当前视图等信息到插槽中
  <template v-slot:eventContent="event">
    <div class="fc-content">
      <div class="fc-title">{{ event.event._def.title }}</div>
      <div class="fc-time">
        {{ event.event.start.format('h:mm a') }} -
        {{ event.event.end.format('h:mm a') }}
      </div>
    </div>
  </template>

// eventRender用于指定日历事件的渲染方式
eventRender(info) {
  const tooltip = new Tooltip(info.el, {
    title: info.event.extendedProps.description,
    placement: 'top',
    trigger: 'hover',
    container: 'body',
  });
},

五、VueFullcalendar的交互功能

1、FullCalendar.js支持用户交互操作，包括事件拖拽、调整、改变大小等。

// eventDrop用于指定日历事件被拖拽时的处理方式
eventDrop(arg) {
  console.log(arg.event.start);
  console.log(arg.event.end);
  console.log(arg.event.allDay);
},

// selectable用于指定日历是否允许被选择，select用于指定选择范围后的处理方式
selectable: true,
select(info) {
  console.log(info.startStr, info.endStr);
},

2、FullCalendar.js还支持日历事件的单击、双击、右键菜单等交互方式。

// eventClick用于指定日历事件被单击时的处理方式
eventClick(info) {
  console.log(info.event.title);
},

// dateClick用于指定日历中日期被单击时的处理方式
dateClick(info) {
  console.log(info.dateStr);
},

六、总结

VueFullcalendar基于Vue.js和FullCalendar.js实现了一个功能丰富的日历组件，可以方便地在Vue.js应用程序中集成交互性日历，支持多种视图模式和事件交互方式。在使用VueFullcalendar时，需要注意配置项的使用和事件的处理方式，可以根据需要自定义日历的样式和交互行为。