直接贴效果图😄

首先日历是用的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,
        })