在vue项目中使用日历插件FullCalendarFullCalendar 是最受欢迎的js calendar组件，本文

概览

FullCalendar 是最受欢迎的js calendar组件

安装

使用 NPM 或 Yarn 安装软件包core以及您计划使用的任何插件(按需安装) 插件列表：fullcalendar.io/docs/plugin…

标题	描述	示意
@fullcalendar/core	必须
@fullcalendar/vue	vue2项目
@fullcalendar/vue3	vue3项目
@fullcalendar/interaction	支持点击、拖拽等事件
@fullcalendar/daygrid	DayGrid 视图
@fullcalendar/timegrid	timegrid视图
@fullcalendar/resource-timeline	时间轴视图

npm install \
  @fullcalendar/core \ 
  @fullcalendar/vue  \  
  @fullcalendar/daygrid \   
  @fullcalendar/timegrid \   
  @fullcalendar/interaction \

如果是vue3项目用@fullcalendar/vue3

使用

引入组件

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

<script>
  // 引入已经安装好的，页面所需要的 FullCalendar 插件
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  // 日历参数配置
  const calendarOptions = {}

  export default {
    name: "my-calendar",
    components: {
      FullCalendar
    },
    data () {
      return {
        calendarOptions
      }
    }
  }
</script>

参数配置

dayGridMonth视图的简单配置参考：

calendarOptions = {
        locale: 'zh-cn',
        plugins: [
          dayGridPlugin,
          // interactionPlugin, // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth',
        },
        buttonText: { today: '今天', prev: '上个月', next: '下个月', dayGridMonth: '月' }, // 设置按钮文本内容
        initialView: 'dayGridMonth',
        initialEvents: [], // alternatively, use the `events` setting to fetch from a feed

        firstDay: 1,
        aspectRatio: 1.35, // 日历单元格宽高比 默认值：1.35
        eventColor: '#3a79eb', // 日历中事件的默认背景色颜色，优先级低于添加事件时设置的背景色
        dayMaxEvents: true,
        editable: false,
        selectable: false,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        events: this.fetchEvents, // 获取事件
        eventClick: this.handleEventClick, // 点击事件
        eventsSet: this.handleEvents,
        // you can update a remote database when these fire:
        // eventChange: this.handleEventChange        // eventAdd:
        // eventRemove:

详细的配置可参考文章：blog.csdn.net/FlowGuanEr/…

slot模板

<template>
  <FullCalendar :options="calendarOptions">
    <template v-slot:eventContent='arg'>
      <b>{{ arg.event.title }}</b>
    </template>
  </FullCalendar>
</template>

Calendar API

let calendarApi = this.$refs.myCalendar.getApi() 
calendarApi.next()

事件

1. 事件对象

var calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  events: [
    {
      id: 'a',
      title: 'my event',
      start: '2018-09-01',
      end: '2018-09-01'
    }
  ]
})

更多字段详解：fullcalendar.io/docs/event-…

2. 初始化事件

可以在initialEvents配置初始化事件列表

也可以用events中配置方法，调用接口去获取数据，将数据格式化成事件对象规范的格式，显示事件列表

fetchEvents (info, successCallback, failureCallback) {
      console.log(info, info.start.getTime())
      requestJanusAPI(api.marketingProjectServiceQueryForCalendar, {
        startDate: info.start.getTime(),
        endDate: info.end.getTime()
      }).then(data => {
        if (data?.length) {
          let list = data.map((item) => {
            return {
              id: item.projectNo,
              title: item.projectName,
              start: moment(item.startTime).format('YYYY-MM-DD'),
              end: moment(item.endTime + MS_PER_DAY).format('YYYY-MM-DD'),
            }
          })
          console.log(list)
          successCallback(list)
        } else {
          failureCallback()
        }
        // console.log(data)
      }).catch(failureCallback)
    }

在vue项目中使用日历插件FullCalendar

概览

安装

使用