一、功能以及用途

FullCalendar提供的API可以快速完成一个日历日程相关功能的开发

二、在vue中的使用

2.1

下载以及安装

vue2下载npm install --save @fullcalendar/vue @fullcalendar/core
vue3下载npm install --save @fullcalendar/vue3 @fullcalendar/core
options里面配置FullCalendar需要的属性

插件根据需要下载

npm install @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid

 <FullCalendar ref="fullCalendar" :options='calendarOptions'></FullCalendar>
import FullCalendar from '@fullcalendar/vue'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
components: {
    FullCalendar,
  },

根据功能下载插件

interactionPlugin：交互
dayGridPlugin：日期
timeGridPlugin：时间
listPlugin：列表

calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin,
          listPlugin
        ],
        locale: 'zh-cn',// 切换语言，当前为中文
        navLinks: false,
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'today prev next cal list',
        },
        height: '77vh',
        headerToolbar: true,
        dateClick: this.dayClick,//当用户点击日期或时间时触发的事件
        views: {
          dayGridMonth: {
            displayEventTime: false,//是否显示时间
            dayCellContent(item) {
              let _date = formatDate(item.date).split('-')
              let _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
              return {
                html: `<div>
          <div style="font-size: 18px;">${_dateF.cDay}</div>
          ${item.isToday ?
                    (_dateF.Term ? `<span>${_dateF.Term}</span>` : `<span>${_dateF.IDayCn}</span>`) :
                    (_dateF.Term ? `<div>${_dateF.Term}</div>` : `<div>${_dateF.IDayCn}</div>`)
                  }
          ${item.isToday ? '<span style="display: inline-block;width: 8px;height: 8px;background: #00F4C3;border-radius: 50%;"></span>' : ''}
        </div>`
              }
            },
          },
          listMonth: {
            displayEventTime: false,//是否显示时间
            dayHeaderContent(item) {
              return { html: `<div style="text-align:left;background: #fff;"><label>${item.text}</label><span style="display: inline-block;margin-left: 15px;width: 1050px;height: 0px;border-top: 1px solid #DBDBDB;"></span></div>` }
            },
          }
        },
        allDaySlot: false,
        editable: false, //是否可编辑
        selectable: true,
        moreLinkClassNames: "more-btns",
        moreLinkContent: "查看更多",
        dayMaxEvents: true,
        aspectRatio: 1.35,
        eventDidMount: this.eventRender,
        eventClick: this.eventClick, //日程点击事件
        nextDayThreshold: '01:00:00',
        events: [],
        buttonText: {
          today: '今天',
          cal: '日历',
          list: '列表',
        },
        customButtons: {
          cal: {
            text: '日历',
            click: () => {
              this.$refs.fullCalendar.getApi().changeView('dayGridMonth')
            }
          },
          list: {
            text: '列表',
            click: () => {
              this.$refs.fullCalendar.getApi().changeView('listMonth')
            }
          },
        }
      },

2.2 日历常用参数

参数列表：参数和含义

参数	含义
firstDay	设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
weekends	是否显示周末，设为false则不显示周六和周日。
hiddenDays	隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
initialView: 'dayGridMonth'	初始化插件显示
locale	'zh-cn'，切换语言，当前为中文
aspectRatio	设置日历单元格宽度与高度的比例。

2.3日历事件

dayClick：

date是用户点击的那一天的Date对象，用户点击日程周视图和日程天视图的时间槽也一样的。

当用户点击日程周视图和日程天视图的时间槽时，allDay是false，其他全是true。

jsEvent 是原生的 javascript 事件，包含“点击坐标”之类的信息。

view 是当前的 View Object

function(date, jsEvent, view) {
        
    }

三、日程

3.1日程数据以及可以配置的参数

参数	含义
id	可选，事件唯一标识，重复的事件具有相同的id
title	必须，事件在日历上显示的title
allDay	可选，true or false，是否是全天事件。
start	必须，事件的开始时间。
end	可选，结束时间。
url	可选，当指定后，事件被点击将打开对应url。
className	指定事件的样式。
editable	事件是否可编辑，可编辑是指可以移动, 改变大小等。
color	背景和边框颜色。
backgroundColor	背景颜色。
borderColor	边框颜色。
textColor	文本颜色。

dealEvents(param) {
      let backgroundColor = this.getColor(param.typeTableName)
      let name = param.agroName
      let end = +(new Date(param.startDate)) + param.taskPeriod * 24 * 3600000
      let val = {
        id: param.id,
        title: name,
        start: this.parseTime(param.startDate, '{y}-{m}-{d}'),
        end: this.parseTime(end, '{y}-{m}-{d}'),
        textColor: '#FFFFFF',
        backgroundColor: backgroundColor,
        borderColor: '#fff',
        overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
      }
      this.calendarOptions.events.push(val)
    },
    或this.calendarOptions.events = []

3.2日程事件

eventClick：

点击日历中某个事件

event 是 Event Object 对象，包含了日程的信息（例如日期，标题等）

jsEvent 是原生的 javascript 事件，包含“点击坐标”之类的信息。

view 是当前的 View Object 。

function( event, jsEvent, view ) { 
}

eventDidMount&&eventRender（坑）

日程事件被渲染的时候触发

eventDidMount（info）{
}
eventRender( event, element, view ) {

 }

三、文档地址

最新中文文档：www.helloweba.net/javascript/…

FullCalendar应用文档