ant design calendar自定义增加[箭头切换]

最近在写一个项目，用的是技术栈是React, 用的组件库是Antd.其中有使用到日历组件。组件和涉及图纸有很大区别： 有显示今天按钮， 上下切换年和月。

antd的日历组件，默认是这样的：

我修改之后是这样的

完成代码：

import React from 'react'
import { Calendar, Button, Icon, Badge} from 'antd';
import moment from 'moment';
class Diy extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    getListData = (value) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    { type: 'M', content: '门' },
                    { type: 'Z', content: '住' },
                ];
                break;
            case 10:
                listData = [
                    { type: 'M', content: '门' },
                ];
                break;
            case 19:
                listData = [
                    { type: 'M', content: '门' },
                    { type: 'Z', content: '住' },

                ];
                break;
            default:
        }
        return listData || [];
    }

    //根据类型获取北京颜色 
    getColor = (type) => {
        let color = 'red';
        switch (type) {
            case 'M':
                color = '#1890ff';
                break;
            case 'Z':
                color = 'orange';
                break;
            default:
                break;
        }
        return color;
    }
    dateCellRender = (value) => {
        const listData = this.getListData(value);
        return (
            <p className="events">
                {listData.map((item, index) => (
                    <Badge count={item.content} className='badge' style={{ backgroundColor: this.getColor(item.type) }} onClick={this.props.showDrawer} key={index} />
                ))}
            </p>
        );
    }
    render() {
        return (
            <div >
                <Calendar
                    fullscreen={true}
                    dateCellRender={this.dateCellRender} 
                    headerRender={({ value, onChange }) => {
                        //   getCurrentDate(moment(value).format('YYYY-MM-DD'), getWeek(value))
                        let currentYear = value.format('YYYY')
                        let currentMonth = value.format('MM')
                        let showTodayBtn;
                        //   控制今日按钮是否显示  面板选中今日时不显示按钮 反之 显示按钮 点击并跳转到今日
                        if (
                            moment(value).format('YYYY-MM-DD') ===
                            moment(new Date()).format('YYYY-MM-DD')
                        ) {
                            showTodayBtn = false
                        } else {
                            showTodayBtn = true
                        }


                        const prev = () => {
                            let newMonth = moment(value).subtract(1, 'months')
                            onChange(newMonth)
                        }
                        // 下月 --------     >
                        const next = () => {
                            let newMonth = moment(value).add(1, 'months')
                            onChange(newMonth)
                        }
                        //上一年 --------     《
                        const prevYear = () => {
                            let newYear = moment(value).subtract(1, 'years')
                            onChange(newYear)
                        }
                        //上一年 --------     》
                        const nextYear = () => {
                            let newYear = moment(value).add(1, 'years')
                            onChange(newYear)
                        }
                        // 显示今天
                        const showTotay = () => {
                            let today = moment(new Date())
                            onChange(today)
                        }

                        return (
                            <div className='header-line'>
                                <div className={('header-day')}>
                                    {showTodayBtn && (
                                        <Button onClick={() => showTotay()} >
                                            今日
                                        </Button>
                                    )}
                                </div>
                                <div className={('picker-header')}>
                                    <span onClick={() => prevYear()}>
                                        <Icon type="double-left" />
                                    </span>
                                    <span onClick={() => prev()}>
                                        <Icon type="left" />
                                    </span>
                                    <span className={('picker-header-view')}>
                                        <span>{currentYear}年</span>
                                        <span>{currentMonth}月</span>
                                    </span>
                                    <span onClick={() => next()}>
                                        <Icon type="right" />
                                    </span>
                                    <span onClick={() => nextYear()}                                    >
                                        <Icon type="double-right" />
                                    </span>
                                </div>
                            </div>
                        )
                    }}

                />
            </div>
        );
    }
}

export default Diy;