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"><Calendarlocale={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