整理不易，轉載請注明出處！！！

此文章展示點擊上一年，上一月，下一月，下一年 今天按鈕來獲取數據的方式
這里直接粘貼代碼，具體使用的就是events={() => this.getDate()}

import React, { Component } from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from "@fullcalendar/timegrid";
import styles from './index.less';

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import moment from 'moment';

function tips(type, title) {
  message.destroy();
  message[type](title);
}

const repeatMap = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];


class Fullcalendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oldYM: null, // 上次的年月
    };
    // 日歷實例
    this.myRef = React.createRef();
  }

  // 獲取非重復任務列表
  getMatchList = (year, month) => {
    this.props.dispatch({
      type: 'main/getMatchList',
      payload: {
        year: year || new Date().getFullYear(),
        month: month || new Date().getMonth() + 1,
      },
      onResult: err => {
        if (err) {
          tips('error', err);
        }
      },
    });
  }

  // 獲取重復任務列表
  getRepeatList = () => {
    this.props.dispatch({
      type: 'main/getRepeatList',
      payload: {},
      onResult: err => {
        if (err) {
          tips('error', err);
        }
      },
    });
  }

  componentDidMount() {
    // 重復列表不需要年月，所以直接在DidMount時就請求
    this.getRepeatList();
  }

  formartRepeat = (value) => {
    switch (value) {
      case '星期一':
        value = 1;
        break;
      case '星期二':
        value = 2;
        break;
      case '星期三':
        value = 3;
        break;
      case '星期四':
        value = 4;
        break;
      case '星期五':
        value = 5;
        break;
      case '星期六':
        value = 6;
        break;
      case '星期日':
        value = 0;
        break;
    }
    return value;
  }

  includes = (arr1, arr2) => {
    return arr2.every(val => arr1.includes(val));
  }

  eventClick = eventInfo => {
    console.log(eventInfo);
    console.log(eventInfo.event._def);
  }

  // getDate = (dateInfo) => {
  getDate = () => {
    // console.log(dateInfo);
    console.log(this.myRef.current);
    if (this.myRef.current) {
      const { oldYM } = this.state;
      const timer = setTimeout(() => {
        clearTimeout(timer);
        // 獲取日歷標題展示的年月
        const YM = this.myRef.current.calendar.view.title;
        // 這里如果切換為周視圖和天視圖標題會變為年月日和時間段，后端目前只根據年月查詢數據，所以長度大于8直接return掉
        if (YM.length > 8) {
          return
        }
        // 如果老年月不等于新年月，那么切換年月了
        if (oldYM !== YM) {
          this.setState({
            oldYM: YM
          })
          const ym = YM.replace('年', '-').replace('月', '');
          const YYYY = moment(ym).format('YYYY');
          const MM = moment(ym).format('MM');
          console.log(YYYY, MM);
          this.getMatchList(YYYY, MM);
        }
      }, 0)
    }
  }

  render() {
    // 此處兩個列表為后端獲取數據
    const { matchList, repeatMatchList } = this.props;
    matchList && matchList.filter(match => !match.repeatExecute).forEach(item => {
      item.title = item.name;
      item.start = item.startTime;
      item.end = item.endTime;
      item.borderColor = 'red';
    })
    repeatMatchList && repeatMatchList.filter(match => match.repeatExecute).forEach(item => {
      if (this.includes(repeatMap, item.repeatDates)) {
        item.title = item.name;
        item.borderColor = 'black';
        item.daysOfWeek = [];
        item.startRecur = new Date();
        item.repeatDates.forEach(date => {
          item.daysOfWeek.push(this.formartRepeat(date))
        })
      }
    })

    return (
      <div className={styles.container}>
        <FullCalendar
          ref={this.myRef}
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay"
          }}
          firstDay={1}
          locale='zh-cn'
          eventLimit={true}
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
          eventTimeFormat={
            {
              hour: '2-digit',
              minute: '2-digit',
              meridiem: false,
              hour12: false
            }
          }
          displayEventEnd
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          events={() => this.getDate()} // 這個要放在eventSources前，不然eventSources數據會被覆蓋
          //  events={(dateInfo) => this.getDate(dateInfo)}  // 這里也可以獲取到dateInfo
          eventSources={[matchList, repeatMatchList]}
          eventClick={this.eventClick}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    matchList: state.main && state.main.matchList ? state.main.matchList : [],
    repeatMatchList: state.main && state.main.repeatMatchList ? state.main.repeatMatchList : [],
  }
}

export default connect(mapStateToProps)(Fullcalendar);

截屏2019-12-0322.50.40.png

到此為止，本人用到的屬性方法基本展示完畢，因為英文不好，找起官方文檔很痛苦，所以完成這些功能大概耗時兩天，希望這三篇文章可以幫到有需要的人