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

网上大多是在JQuery中使用FullCalendar，很多API使用的例子不清晰，记录一下本人在React中使用到的方法
官网地址：https://fullcalendar.io/docs#toc

按官网文档说明，首先安装相关依赖

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

先粘贴一个本人习惯的项目构建模板代码

import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './index.less';

class CalendarDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div className={styles.container}>

      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

然后一个最简单的使用方式

import React, { Component } from 'react';
import { connect } from 'dva';

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

import styles from './index.less';

// 必须引入的样式文件
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";

class CalendarDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div className={styles.container}>
        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin]}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

此时样式为 截屏2019-12-0320.47.47.png

然后我这里需求是需要月周天视图
所以继续安装一个插件

npm i @fullcalendar/timegrid

代码如下

import React, { Component } from 'react';
import { connect } from 'dva';

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

class CalendarDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div className={styles.container}>
        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

此时样式如下图：

截屏2019-12-0320.57.53.png

到此主体内容基本完成，后续代码为单独部分

我们是中国人，所以当然先来汉化一下，什么都不用引入了，直接加属性即可

        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
          locale='zh-cn'
        />

此时各窗口样式如下图 截屏2019-12-0321.01.57.png
截屏2019-12-0321.02.07.png
截屏2019-12-0321.02.16.png

我们继续使用属性使其汉化完全

        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
        />

截屏2019-12-0321.05.42.png
截屏2019-12-0321.06.31.png

然后我本人不是很喜欢周日为一周开始
继续加属性

        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几
        />

也不喜欢上午X时这种表现方式

        <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1}
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
        />

此时样式如下图

截屏2019-12-0321.09.19.png
到此为止样式方面基本改造完毕，下篇文章我们添加一些日程
https://www.jianshu.com/p/a499348ffe5a