react-calendar日历的简单使用

最近遇到一个新的需求，是要求展示一个日历，而且每天都要显示当天的一个排班班次，UI给我的图就十分类似于钉钉的考勤日历，十分的美观。首先那肯定是找一个插件来改，挑来挑去，我最后选中了react-calendar这款功能强大的日历组件。
需求：
我司对于高保真的要求十分低，基本上只要功能实现，页面不丑，就OK，所以我最后组件的样式不能说是和设计图一模一样，可以说是毫不相干嗷。需求也很简单如下：

1. 能够在日历上展示每天对应的班次；
2. 班次不同，日期样式不同（颜色不一致）；
3. 可以查看不同月份的班次情况以及点击某一天显示对应的班次时间。

我封装的Calendar组件如下：

import React, { PureComponent } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default class MyCalendar extends PureComponent {
    render() {
        const { value, onChange, className, ...rest,} = this.props;
        return (
        <div>
            <Calendar
                className={className}
                onChange={onChange}
                value={value}
                {...rest}
            />
        </div>
    );
    }
}

官方文档上的demo是用hooks写的，但我还是用的类组件，因为移动端react版本太低了只有16.2，我还战战兢兢地升到了16.3，小tips:这个日历组件是建议大家在react16.3之后使用的哦。
主要用到了三个方法：

<MyCalendar
    className={styles.MyCalendar}
     value={this.state.date}
     onChange={this.onChange}
     onClickDay={this.onClickDay}
     tileClassName={this.tileClassName}
     tileContent={this.tileContent}
 />
// 初始化date
this.state = {date: new Date()} 
onChange = (value) => {this.setState({date: value})} 
// 点击日历上的某天
onClickDay = (value, event) => alert('Clicked day: ', value)
// 将应用于给定日历项(月日视图、年月视图等等)的类名。
tileClassName="aa bb cc"（给按钮 增加类名 可以是 String: "class1 class2" 或者给一个数组 Array of strings: ["class1", "class2 class3"] ,可以是function ： Function: ({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null）
// 在每一个格中显示的内容
tileContent={this.tileContent}
1.String: "Sample"
2.React element: <TileContent />
3.Function: ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null

最后给大家看看我做出来的亚子：

再给大家看看UI的图：

最后我的项目经理还和我说，比我想象的好多了，没有那么丑，那行，那我就不优化样式了嘻嘻嘻。
插件的简单介绍

本文地址：https://blog.csdn.net/qq_42775791/article/details/111924736