React日历组件fullcalendar使用指北

一、使用

参照 官方文档
中文参数文档
中文参数文档2
其他示例

1.安装依赖

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

2.引入页面

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default class DemoApp extends React.Component {
  render() {
    return (
      <FullCalendar
        plugins={[ dayGridPlugin ]}
        initialView="dayGridMonth"
      />
    )
  }
}

3.常用参数说明

headerToolbar：用于定义日历头部的按钮和标题
示例：

{
    left:   'title',
    center: '',
    right:  'today prev,next'
}

header置为false，则不会显示头部内容。
值是字符串类型的，使用逗号或者空格分隔开，区别在于：空格分隔，按钮之间有间隙；逗号分隔，按钮之间没有间隙，即紧邻。字符串的值可以使用下面的：
title：包含当前月/周/日内容
prev：按钮，用于切换到上一 月/周/日
next： 按钮，用于切换到下一 月/周/日
prevYear：按钮，用于切换到上一年
nextYear ：按钮，用于切换到下一年
today：按钮，返回当前月/周/日
[a View Name]：用于切换到指定View
如果为这些属性指定一个空字符串，则不会显示任何内容。

locale：自定义语言和本地化选项。字符串，默认是"en"。
使用需引入

import locale from '@fullcalendar/core/locales/zh-cn';

initialView：初始视图
包括dayGridMonth, dayGridWeek, dayGridDay, dayGrid 视图

plugins：提供视图插件

views：自定义视图

firstDay：设置一周中显示的第一天是哪天，周日是0，周一是1，类推

contentHeight：设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应

weekMode：在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定

event
events（Object）：事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的
event属性：
title：必须，事件在日历上显示的title
id：可选，事件唯一标识，重复的事件具有相同的id
allDay：可选，true or false，是否是全天事件。
start：必须，事件的开始时间。
end：可选，结束时间。
url：可选，当指定后，事件被点击将打开对应url。
className：指定事件的样式。
editable：事件是否可编辑，可编辑是指可以移动, 改变大小等。
source：指向次event的eventsource对象。
color：背景和边框颜色。
backgroundColor：背景颜色。
borderColor：边框颜色。
textColor：文本颜色。

datesSet
datesSet（callback）：视图变化后的回调，切换月份年份也会触发

完整代码
jsx代码

<FullCalendar
          // ref={withFullCalendar}
          plugins={[dayGridPlugin]}
          locale={locale} // 中文插件
          initialView="dayGridMonth"
          headerToolbar={{
            left: null,
            center: 'prev,title,next',
            right: null
          }}
          views={{
            dayGridMonth: {
              dayCellContent(item) {// 设置日历展示内容
                let text = '';
                if(new Date(item.date).getTime() == new Date(new Date().setHours(0, 0, 0, 0)).getTime()){
                  text = '今';
                }else{
                  text = item.date.getDate();
                }
                return (
                  <>
                    <label
                      className="fc-daygrid-day-solar"
                      data-date={moment(item.date).format()}
                    // onClick={handleNavLink}
                    >
                      {text}
                    </label>
                  </>
                );
              },
            },
          }}
          firstDay={1}
          contentHeight={544}
          weekMode="liquid"
          // 事件点击方法
          // eventClick={(data) => { console.log('eventClick,', data) }} 
          //  events={calenderData} // 一次性获取数据
          events={(arg, callback) => {
            var events = [];
            let today = new Date().getTime();
            // calenderData异步获取的数据，会同步更新日历
            calenderData.forEach(ele => {
                let attendDatetime = ele.date;
                let bgc = 'transparent';
                let color = '#B2B2B2';
                let text = '';
                let thisDay = new Date(ele.date).getTime();
                let classNameStr = '';
                if(thisDay <= today){
                  if(ele.title && parseInt(ele.title) > 0){
                    bgc = '#D9FBE7';
                    color = '#22CC76';
                    text = formatCount(ele.title) + '字';
                    classNameStr = 'updated';
                  }else{
                    bgc = '#FFD4AF';
                    color = '#FFA033';
                    text = '未更新';
                    classNameStr = 'not-updated'
                  }
                }else{
                  bgc = '#F5F5F5';
                }
                events.push({
                	title: text,
					start: attendDatetime,
					display: 'background',
					color: bgc,
                    classNames: classNameStr
				});
            });
            callback(events);
          }}
          datesSet={(dateInfo) => {
          	// 可异步调用接口获取数据
            // console.log('dateInfo',dateInfo, dateInfo.view.currentStart, dateInfo.view.currentEnd) //start of the range the calendar date
            setTimes([new Date(dateInfo.view.currentStart), new Date(dateInfo.view.currentEnd).getTime() - 1000]);
        }}
 />

scss代码

.chapterContainer {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;
  .chapterContent {
    padding-top: 16px;
    flex: 1;
    overflow-y: auto;
    .searchBox {
      display: flex;
      > div {
        display: flex;
      }
    }
  }
  :global {
    .fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid{
      border: 0px;
    }
    .fc .fc-toolbar.fc-header-toolbar{
      margin-top: 16px;
      margin-bottom: 0;
      border: 1px solid #EFEFEF;
      border-bottom: hidden;
    }
    .fc-header-toolbar{
      height: 70px;
    }
    .fc-toolbar-chunk:nth-child(2){
      width: 100%;
    }
    .fc-toolbar-chunk:nth-child(2) > div{
      display: flex;
      justify-content: center;
      h2{
        margin: 0 56px;
        font-size: 16px;
        color: #494949;
        line-height: 30px;
      }
      button{
        width: 24px;
        height: 24px;
        padding: 0;
        background-color: #22CC76;
        border-color: #22CC76;
        .fc-icon{
          font-size: 16px;
          line-height: 13px;
        }
      }
    }
    table.fc-scrollgrid thead .fc-scroller-harness{
      border: 1px solid #EFEFEF;
      border-top: hidden;
      line-height: 70px;
      a.fc-col-header-cell-cushion{
        color: #494949;
        font-size: 16px;
        font-weight: 400;
      }
    }
    table.fc-scrollgrid{
      thead{
        height: 70px;
        table.fc-col-header {
            height: 70px;
        }
      }
    }
    .fc-scrollgrid .fc-daygrid-body{
      margin-top: 16px;
      border: 1px solid #EFEFEF;
    }
    .fc .fc-daygrid-day-frame{
      // width: 160px !important;
      height: 80px !important;
      min-height: 80px;
      max-height: 80px;
      background: transparent;
      margin: 13px;
      box-sizing: border-box;
    }
    .fc .fc-daygrid-day.fc-day-today{
      background-color: transparent;
    }
    .fc .fc-bg-event{
      opacity: 1;
      .fc-event-title{
        font-size: 16px;
        text-decoration: none;
        font-style: normal;
        text-align: center;
        margin-top: 43px;
      }
      &.updated{
        .fc-event-title{
          color: #22CC76;
        }
      }
      &.not-updated{
        .fc-event-title{
          color: #FFA033;
        }
      }
    }

    .fc .fc-daygrid-day-top{
      flex-direction: row;
      justify-content: center;
      margin-top: 12px;
      .fc-daygrid-day-number{
        color: #494949;
        font-size: 16px;
      }
    }

    .fc.fc-media-screen.fc-direction-ltr.fc-theme-standard{
      min-width: 800px;
    }
  }
}

效果图