React+AntDesign做一个日历，展示节假日，节气，并且在某几个时间上添加活动备注

直接贴效果图😄

首先日历是用的AntDesign提供的Calendar组件，这个组件还是蛮强大的，可以自定义头部时间下拉；渲染每个时间段，或者重置时间段内容，玩的空间是很大的

直接贴代码，结尾最后我会将开发中遇到的问题贴出来解答一下

第一步：下载js-calendar-converter添加到项目中，用于获取节假日等信息

yarn add  js-calendar-converter

第二步：样式我就不贴了，开发代码如下

import React, { PureComponent } from 'react';
import { Calendar, message } from 'antd';
import { Moment } from 'moment';
import moment from 'moment';
// @ts-ignore
import calendar from 'js-calendar-converter';
import './index.less';

export interface MarketingCalendarPageSettingStates {
    /**
     * 开始渲染日历（在改变updateLocale之后渲染，周日才会展示在前面）
     */
    isStartLoadingCalendar: boolean;
}

export class MarketingCalendarPageSetting extends PureComponent<
    any,
    MarketingCalendarPageSettingStates
> {
    constructor(props: any) {
        super(props);
        this.state = {
            isStartLoadingCalendar: false,
        };
    }

    componentDidMount() {
        moment.updateLocale('zh-cn', { week: { dow: 0 } });
        this.setState({
            isStartLoadingCalendar: true,
        });
    }

    componentWillUnmount() {
        moment.updateLocale('zh-cn', { week: { dow: 1 } });
    }

    getListData = (value: Moment) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    { type: 'warning', content: '内容1' },
                    { type: 'success', content: '内容2' },
                ];
                break;
            case 10:
                listData = [
                    { type: 'warning', content: '内容1' },
                    { type: 'success', content: '内容2' },
                ];
                break;
            case 15:
                listData = [
                    { type: 'warning', content: '内容1' },
                    { type: 'success', content: '内容2' },
                ];
                break;
            default:
        }
        return listData || [];
    };

    onChangeDate = (date?: Moment) => {
        if (date) {
            message.success('改变后的时间' + date);
        }
    };

    render() {
        const { isStartLoadingCalendar } = this.state;
        if (!isStartLoadingCalendar) {
            return null;
        }
        const dateCellRender = (value: Moment) => {
            const listData = this.getListData(value); //活动
            const month = value.month() + 1;
            const info: any = calendar.solar2lunar(value.year(), month, value.date()); //当天信息(比如是否是节假日)
            return (
                <div className="marketing-calendar-page-setting__calendar-date">
                    <div className="marketing-calendar-page-setting__calendar-date__tag">
                        {info && info.Term && <span>{info.Term}</span>}
                        {info && info.festival && <span>{info.festival}</span>}
                        {info && info.lunarFestival && <span>{info.lunarFestival}</span>}
                    </div>
                    {listData.map((item: any) => {
                        return <div key={item.content}>{item.content}</div>;
                    })}
                </div>
            );
        };
        return (
            <div className="marketing-calendar-page-setting">
                <div className="marketing-calendar-page-setting__top">门店名称</div>
                <div className="marketing-calendar-page-setting__center">
                    <div className="marketing-calendar-page-setting__center__left">
                        <Calendar
                            locale={moment}
                            dateCellRender={dateCellRender}
                            onChange={this.onChangeDate}
                        />
                    </div>
                    <div className="marketing-calendar-page-setting__center__right"></div>
                </div>
            </div>
        );
    }
}

简单说说我问到的问题
1.Calendar默认“周日”一行在最后面，但产品要求周日必须在最前面
采用的方法是：

componentDidMount() {
    moment.updateLocale('zh-cn', { week: { dow: 0 } });
  
}
componentWillUnmount() {
    moment.updateLocale('zh-cn', { week: { dow: 1 } });
}

处理过程中发现，加载完还是周日在最后面，但是一点击其中一个日期里面周日跑第一列去了
于是state了一个字端isStartLoadingCalendar， 等updateLocale完之后再加载日历组件，完美解决～
关于isStartLoadingCalendar代码看上方完整代码即可

this.setState({
     isStartLoadingCalendar: true,
 });

2.第二个问题是产品要求将节假日，节气都展示在对应的日期中，节假日好说，节气随着每年，日期不固定，于是网上各种找
比如：https://www.jiejiariapi.com/（跨域，而且不稳定，有时候都访问不到）
比如：https://github.com/YangH9/ChinaHolidayCalender/blob/master/models/calendar.js（这ChinaHolidayCalender个库下的js，引入项目改成React发现节假日没问题，特殊节日没展示，定位底层代码自己动手改了一下，出来了，但是节气怎么修改都没展示，说实话 也不是很看的懂）
最终：https://blog.csdn.net/a99101/article/details/130321624（感谢这位同学，使用了js-calendar-converter，完美解决～）

3.第三个问题,关于Calendar日历上方自带的年月下拉选择，产品不要自带的，要自定义。
具体代码实现我发到这个链接上去了，有需要的可以打开看看～
链接：https://blog.csdn.net/weixin_43517190/article/details/141198131?spm=1001.2014.3001.5501