React dva项目 日程/日历插件 FullCalendar的使用（3）

整理不易，转载请注明出处！！！

此文章展示点击上一年，上一月，下一月，下一年 今天按钮来获取数据的方式
这里直接粘贴代码，具体使用的就是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 (
      

         this.getDate()} // 这个要放在eventSources前，不然eventSources数据会被覆盖
          //  events={(dateInfo) => this.getDate(dateInfo)}  // 这里也可以获取到dateInfo
          eventSources={[matchList, repeatMatchList]}
          eventClick={this.eventClick}
        />
      
    );
  }
}

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);

dateInfo数据如下图

截屏2019-12-0322.50.40.png

到此为止，本人用到的属性方法基本展示完毕，因为英文不好，找起官方文档很痛苦，所以完成这些功能大概耗时两天，希望这三篇文章可以帮到有需要的人