fullCalendar日历，React-Hooks简单使用

1、安装依赖
react下载 yarn add @fullcalendar/react
安装日历周视图、日视图、列表等插件：
yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid
以下为整理过的代码可直接使用，根据需求自行调整

import React, { useState, useEffect } from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import timeGridPlugin from "@fullcalendar/timegrid";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
let calendarApi: any
const Index = () => {
  useEffect(() => {
    calendarApi = calendarRef.current.getApi();  // 获取api，使用内置方法
    FullCalendarDate(calendarApi.view.title,'month');  // calendarApi.view.title 获取当前时间，存储store
  }, []);
 const [fullCalendarType, setFullCalendarType] = useState("");
  const [eventSources, setEventSources] = useState([]); 
  const calendarRef: any = useRef(null);

  // 今天
  const getToday = () => {
    calendarApi.today(); // 调用内置方法
    FullCalendarDate(calendarApi.view.title);
  };
  // 下一月
  const getNext = () => {
    calendarApi.next();  // 调用内置方法
    FullCalendarDate(calendarApi.view.title);
  };
  // 上一月
  const getPrev = () => {
    calendarApi.prev();  // 调用内置方法
    FullCalendarDate(calendarApi.view.title);
  };
  // 月
  const month = () => {
    calendarApi.changeView("dayGridMonth");  // 调用内置方法
    FullCalendarDate(calendarApi.view.title,"month");
  };
  // 周
  const week = () => {
    calendarApi.changeView("timeGridWeek");  // 调用内置方法
    FullCalendarDate(calendarApi.view.title,"week");
  };
  // 列表
  const list = () => {
    calendarApi.changeView("listDay");  // 调用内置方法
    FullCalendarDate(calendarApi.view.title,"list");
  };
  // 页面内容点击事件
  const eventClick = (eventInfo: any) => {
     // 可控制弹窗显示等操作
  };

  const FullCalendarDate = (dateTime: any, type: any) => {
    if(type) setFullCalendarType(type)
    getFullCalendarData(dateTime, type ?? fullCalendarType)
  }

  const getFullCalendarData = (dateTime: any, type: any) => {
    // dateTime当前时间，type类型
    switch (type) {
      case "month":
        console.log("请求接口")
        break
      case "week":
        console.log("请求接口")
        break
      case "list":
        console.log("请求接口")
        break
      default:
    }
  }
  return (
    <Fragment>
      <FullCalendar
        ref={calendarRef}
        height={600} // 高度
        initialView="dayGridMonth" // 默认视图
        headerToolbar={{
          left: "getToday,getPrev,getNext", // 左侧按钮展示为下方自定义按钮名称
          center: "title", // 时间展示
          right: "month,week,list" // 右侧按钮展示
        }}
        eventClick={eventClick} // 事项点击事件
        firstDay={1} // 默认第一行展示第一周
        allDayText="全天" // 全部展示文字
        eventSources={[eventSources]} // 数据源
        customButtons={{
          // 自定义按钮触发回调函数
          getToday: { text: "今天", click: getToday },
          getNext: { text: ">", click: getNext },
          getPrev: { text: "<", click: getPrev },
          month: { text: "月", click: month },
          week: { text: "周", click: week },
          list: { text: "列表", click: list }
        }}
      />
    </Fragment>
  );
};
export default Index;

// 数据格式 title标题,  id,start, ,end 开始结束时间必须,backgroundColor背景色，textColor文字颜色，display: 'list-item'  加入此字段为二级
{ title: '女神节', start: '2022-12-01', end: "2022-12-31", backgroundColor: "#A5262A", id: "1", textColor: 'white' },
// 其他api
initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
locale: 'zh-cn', // 切换语言，当前为中文
firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
eventColor: '#3BB2E3', // 全部日历日程背景色
initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: '20', // 设置事件的最小高度
aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
eventLimit: true,
eventDrop: eventDrop, // 拖动日历日程事件
eventResize: eventResize, // 修改日历日程大小事件
select: handleDateSelect, // 选中日历格事件
eventDidMount: eventDidMount, // 安装提示事件
eventMouseEnter: eventMouseEnter, // 鼠标滑过
allowContextMenu: false,
editable: true, // 是否可以进行（拖动、缩放）修改
eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
selectable: true, // 是否可以选中日历格
selectMirror: true,
selectMinDistance: 0, // 选中日历格的最小距离
dayMaxEvents: true,
weekends: true,
navLinks: true, // 天链接
selectHelper: false,
slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许