React日历组件fullcalendar使用指北

一、使用

参照 官方文档
中文参数文档
中文参数文档2
其他示例

1.安装依赖

npm install --save \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/daygrid

2.引入页面

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default class DemoApp extends React.Component {
   
  render() {
   
    return (
      <FullCalendar
        plugins={
   [ dayGridPlugin ]}
        initialView="dayGridMonth"
      />
    )
  }
}

3.常用参数说明

headerToolbar：用于定义日历头部的按钮和标题
示例：

{
   
    left:   'title',
    center: '',
    right:  'today prev,next'
}

header置为false，则不会显示头部内容。
值是字符串类型的，使用逗号或者空格分隔开，区别在于：空格分隔，按钮之间有间隙；逗号分隔，按钮之间没有间隙，即紧邻。字符串的值可以使用下面的：
title：包含当前月/周/日内容
prev：按钮，用于切换到上一 月/周/日
next： 按钮，用于切换到下一 月/周/日
prevYear：按钮，用于切换到上一年
nextYear ：按钮，用于切换到下一年
today：按钮，返回当前月/周/日
[a View Name]：用于切换到指定View
如果为这些属性指定一个空字符串，则不会显示任何内容。

locale：自定义语言和本地化选项。字符串，默认是"en"。
使用需引入

import locale from '@fullcalendar/core/locales/zh-cn';

initialView：初始视图
包括dayGridMonth, dayGridWeek, dayGridDay, dayGrid 视图

plugins：提供视图插件

views：自定义视图

firstDay：设置一周中显示的第一天是哪天，周日是0，周一是1，类推

contentHeight：设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应

weekMode：在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定

event
events（Object）：事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的
event属性：
title：必须，事件在日历上显示的title
id：可选，事件唯一标识，重复的事件具有相同的id
allDay：可选，true or false，是否是全天事件。
start：必须，事件的开始时间。
end：可选，结束时间。
url：可选，当指定后，事件被点击将打开对应url。
className：指定事件的样式。
editable：事件是否可编辑，可编辑是指可以移动, 改变大小等。
source：指向次event的eventsource对象。
color：背景和边框颜色。
backgroundColor：背景颜色。
borderColor：边框颜色。
textColor：文本颜色。

datesSet
datesSet（callback）：视图变化后的回调，切换月份年份也会触发

完整代码
jsx代码

<FullCalendar
          // ref={withFullCalendar}
          plugins={
   [dayGridPlugin]}
          locale={
   locale} // 中文插件
          initialView="dayGridMonth"
          headerToolbar={
   {
   
            left: null,
            center: 'prev,title,next',
            right: null
          }