もう0202年になりましたが、あなたはまだ他の人の家のカレンダーのコンポーネントを使っていますか?

import React, {
     Component} from "react";
import {
     
  View,
  Text,
  Image,
  Button, IconSvg
} from "app/components";
import moment from "moment"; //      
import y from "app/utils/yunfeiStyle"; //      

export default class Index extends Component {
     
  constructor(props) {
     
    super(props);
    this.state = {
     
      date: new Date(),
      allDayArr: [],
      taday: new Date().getDate(),        //  
      lastMonth: [],
      nextMonth: [],
      years: new Date().getFullYear(),                      //  
      month: new Date().getMonth() + 1,                      //  
      today: moment(), //    
      curMonth: props.defaultDate ? moment(props.defaultDate) : moment(), //     
      acDay: props.defaultDate ? moment(props.defaultDate) : moment() //           ,        
    };
  }

  /**
   *       
   */
  before() {
     
    const date = moment(this.state.curMonth).date(1);
    const count = date.day();
    date.subtract(count + 1, "day");
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
     
      date.add(1, "day");
      views.push(
        <View key={
     i + "_before"} style={
     [y.wRatio(100 / 7), y.uac]}>
          <View
            style={
     [y.w(50), y.h(50), y.ujc, y.uac]}>
            <Text
              style={
     [y.color("#bebebe"), y.fSize(13)]}>{
     date.date()}</Text>
          </View>
        </View>
      );
    }
    return views;
  }

  /**
   *       
   */
  after() {
     
    //       1 ,    1  
    const date = moment(this.state.curMonth).date(1).add(1, "months");
    const count = 7 - date.day();
    if (count === 7) {
     
      return null;
    }
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
     
      views.push(
        <View key={
     i + "_after"} style={
     [y.wRatio(100 / 7), y.uac]}>
          <View
            style={
     [y.w(50), y.h(50), y.ujc, y.uac]}>
            <Text
              style={
     [y.color("#bebebe"), y.fSize(13)]}>{
     date.date()}</Text>
          </View>
        </View>
      );
      date.add(1, "day");
    }
    return views;
  }

  /**
   *       
   */
  thisM() {
     
    const date = moment(this.state.curMonth).date(1);
    const count = date.daysInMonth();//          
    //       ,  1 ,+1 -1 =      
    let views = [] as any[];
    for (let i = 0; i < count; i++) {
     
      const todayMoment = moment(date);
      const isSame = this.state.acDay && todayMoment.isSame(this.state.acDay, "day");
      let disable = false;
      if (this.props.min && todayMoment.isBefore(this.props.min, "day")) {
     
        disable = true;
      }
      if (this.props.max && todayMoment.isAfter(this.props.max, "day")) {
     
        disable = true;
      }
      views.push(
        <Button
          key={
     i + "_this"}
          style={
     [y.wRatio(100 / 7), y.uac]}
          onPress={
     () => {
     
            if (disable) {
     
              return;
            }
            this.setState({
     
              acDay: todayMoment
            });
            this.props.onPressDay && this.props.onPressDay(todayMoment);
          }}>
          <View style={
     [y.w(50), y.h(50), y.ujc, y.uac]}>
            <View
              style={
     [y.bgColor(isSame ? "#00aea9" : "rgba(0,0,0,0)"), y.radiusA(40), y.w(30), y.h(30), y.ujc, y.uac]}>
              {
     disable ?
                <Text
                  style={
     [y.color("#bebebe"), y.fSize(13)]}>{
     todayMoment.date()}</Text>
                :
                <Text style={
     [y.color(isSame ? "#fff" : "#000"), y.fSize(13)]}>
                  {
     todayMoment.date()}
                </Text>
              }
            </View>
          </View>
        </Button>
      );
      date.add(1, "day");
    }
    return views;
  }

  render() {
     
    return (
      <View style={
     [y.bgColor("#fff"), this.props.style]}>
        <View style={
     [y.udr, y.ujb, y.uac, y.plr(10)]}>
          <Button
            style={
     [y.h(40), y.ujc, y.uas]}
            onPress={
     () => {
     
              this.state.curMonth.subtract(1, "year");
              this.forceUpdate();
            }}>
            <IconSvg type={
     "iconfanye_shuang_L"} size={
     18}/>
          </Button>
          <Button
            style={
     [y.h(40), y.ujc, y.uas]}
            onPress={
     () => {
     
              this.state.curMonth.subtract(1, "months");
              this.forceUpdate();
            }}>
            <IconSvg type={
     "iconfanye_dan_L"} size={
     18}/>
          </Button>
          <Text style={
     [y.fSize(14), y.color("#1D1D26")]}>
            {
     this.state.curMonth.format("YYYY MM ")}
          </Text>
          <Button
            style={
     [y.h(40), y.ujc, y.uas]}
            onPress={
     () => {
     
              this.state.curMonth.add(1, "months");
              this.forceUpdate();
            }}>
            <IconSvg type={
     "iconfanye_dan_R"} size={
     18}/>
          </Button>
          <Button
            style={
     [y.h(40), y.ujc, y.uas]}
            onPress={
     () => {
     
              this.state.curMonth.add(1, "year");
              this.forceUpdate();
            }}>
            <IconSvg type={
     "iconfanye_shuang_R"} size={
     18}/>
          </Button>
        </View>
        <View style={
     [y.udr, y.btb(1), y.bdColor("#EEEEEE"), y.minh(35), y.uac]}>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
          <Text style={
     [y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}> </Text>
        </View>
        <View style={
     [y.udr, y.uf1, y.w100, y.uWrap, y.mb(10)]}>
          {
     
            //        
            this.before()
          }
          {
     
            //         
            this.thisM()
          }
          {
     
            //        
            this.after()
          }
        </View>
      </View>
    );
  }
}