整理不易针贬，轉(zhuǎn)載請注明出處；≡病８潮！

網(wǎng)上大多是在JQuery中使用FullCalendar搔预，很多API使用的例子不清晰霹期，記錄一下本人在React中使用到的方法
官網(wǎng)地址：https://fullcalendar.io/docs#toc

按官網(wǎng)文檔說明，首先安裝相關(guān)依賴

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

先粘貼一個本人習(xí)慣的項(xiàng)目構(gòu)建模板代碼

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} // 此處高度為方便截圖拯田，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin]}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

截屏2019-12-0320.47.47.png

然后我這里需求是需要月周天視圖
所以繼續(xù)安裝一個插件

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} // 此處高度為方便截圖历造，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 當(dāng)前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}

export default connect(mapStateToProps)(CalendarDemo);

此時樣式如下圖：

截屏2019-12-0320.57.53.png

到此主體內(nèi)容基本完成冯勉，后續(xù)代碼為單獨(dú)部分

我們是中國人侈玄，所以當(dāng)然先來漢化一下，什么都不用引入了壹若，直接加屬性即可

        <FullCalendar
          height={500} // 此處高度為方便截圖，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月邑蒋，下一月，下一年 今天
            center: "title", // 當(dāng)前年月
            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

我們繼續(xù)使用屬性使其漢化完全

        <FullCalendar
          height={500} // 此處高度為方便截圖吞鸭，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年寺董，上一月，下一月刻剥，下一年 今天
            center: "title", // 當(dāng)前年月
            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

然后我本人不是很喜歡周日為一周開始
繼續(xù)加屬性

        <FullCalendar
          height={500} // 此處高度為方便截圖遮咖，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月造虏，下一月御吞，下一年 今天
            center: "title", // 當(dāng)前年月
            right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六為1～6麦箍，周日為0，喜歡周幾開始就填幾
        />

也不喜歡上午X時這種表現(xiàn)方式

        <FullCalendar
          height={500} // 此處高度為方便截圖陶珠，可不設(shè)置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today", // 上一年挟裂，上一月，下一月揍诽，下一年 今天
            center: "title", // 當(dāng)前年月
            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