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

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

网上大多是在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 (
      


      
    );
  }
}

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 (
      

        
      
    );
  }
}

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 (
      

        
      
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

此时样式如下图：

截屏2019-12-0320.57.53.png

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

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

此时各窗口样式如下图

截屏2019-12-0321.01.57.png

截屏2019-12-0321.02.07.png

截屏2019-12-0321.02.16.png

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

截屏2019-12-0321.05.42.png

截屏2019-12-0321.06.31.png

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

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

此时样式如下图

截屏2019-12-0321.09.19.png

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