React移动端h5日历组件能用的插件不多，不想自己手写，只能使用插件了。react-h5-calendar还不错，长的不丑，切换也流畅。

文档：

github简易介绍：https://github.com/kokiy/react-h5-calendar

另外补充：react-hash-calendar插件文档
github详细地址：https://github.com/TangSY/react-hash-calendar

DEMO：（实际不抖）

查看：

或

浏览器打开：https://kokiy.github.io/react-h5-calendar/calendar

参数配置：

• 支持周视图,周日历（参数disableWeekView禁用周视图）
• 支持月视图,月日历
• 支持左右滑动切换月份
• 支持上下滑动切换日历视图（参数disableWeekView禁用周视图）
• 支持日历上打点标记（当前、标记2种）
• 基于dayjs处理日历逻辑

参数设置

参数	说明	默认值	备注
currentDate	当前选择的日期	今天	格式：2022-02-02
showType	展示类型（参数：month 和 week）	month	disableWeekView={true} 禁用：周视图、上下滑动收缩
transitionDuration	切换日期的动画过渡时间（单位：秒）	0.3
markType	标记类型（参数：dot和circle）	dot	可根据标记点样式追加伪元素自定义样式
markDates	需要标记的日期数组	[]
disableWeekView	禁用周视图	false	disableWeekView={true} 禁用：周视图、上下滑动收缩
onDateClick	日期点击回调	(e)=>{}	日期对象信息
onTouchStart	滑动开始回调	(e)=>{}
onTouchMove	滑动过程中回调	(e)=>{}
onTouchEnd	滑动结束回调	(e)=>{}

markDates 参数说明

const markDates = [
  { color: '#459', date: '2021-12-12', markType: 'circle' },
  { color: '#a8f', markType: 'dot', date: '2021-12-23' },
  { color: '#a5f', markType: 'circle', date: '2021-12-22' },
  { date: '2022-1-22' },
]

• 单个日期不传markType 默认取传入的Marktype
• 单个日期不传color 默认是#f00

disableWeekView 参数说明

设为true时。禁用：周视图、上下滑动收缩。可以锁定月视图日历

实战案例：

可以自定义，有点考验css基本功。

核心代码附带：

js部分：

// 监听当前月份
  const [calendarOperate, setCalendarOperate] = useState('');

// 日历滑动
  function onCalendarDateTouchEnd() {
    setTimeout(() => {
      const getHTML = document.getElementsByClassName("calendar-operate")[0]?.childNodes[1]?.innerHTML;
      setCalendarOperate(getHTML)
    })
  }
  
{/* 日历 */}
      <div className="calendar">
        <Calendar
          disableWeekView={true}
          markDates={planList}
          onDateClick={onCalendarDateClick}
          onTouchEnd={onCalendarDateTouchEnd} //用于拼接全日期 - 跳转页面带参用
        />
      </div>

calendar.less部分： 可以直接复制拿去用，专门抽离用于日历样式重置。
我的项目用了postcss插件，自动px转vw。可以根据设计稿1:1写死单位。

.react-h5-calendar {
  padding-bottom: 30px;

  .calendar-operate {
    width: 686px;
    height: 108px;
    background: #fff;
    padding: 0 42px;

    div {
      font-size: 32px;
      font-weight: bold;
      color: #333333;
      line-height: 44px;
    }

    .icon {
      justify-content: end;

      img {
        height: 24px;
      }
    }
  }

  .calendar-head {
    font-size: 32px;
    color: #333333;
    line-height: 44px;

    .head-cell {
      padding: 36px 34px;
      margin-bottom: 20px;
    }
  }

  .week-mode {
    height: 120px !important;
  }

  .calendar-body {
    height: 660px;

    .month-cell {
      .day-cell {
        width: 98px;
        height: 88px;
        font-size: 32px;
        font-weight: bold;
        color: #333333;
        line-height: 44px;
        position: relative;
        z-index: 20;
        margin-bottom: 20px;

        .day-text {
          width: 100%;
          height: 100%;
          align-items: start;
          padding-top: 8px;
        }

        .current-day {
          width: 56px;
          height: 56px;
          background: #008AFF;
          padding-top: 0;
          align-items: center;
          margin-top: -30px;
        }

        .circle-mark {
          width: 98px;
          height: 100%;
          background: rgba(26, 182, 107, 0.1);
          border-radius: 8px;
          border: none;
          position: relative;
        }

        .circle-mark::before,
        .dot-mark::before {
          content: '';
          position: absolute;
          top: 8px;
          left: 20px;
          width: 12px;
          height: 12px;
          background: #1AB66B;
          border-radius: 100%;
        }

        .dot-mark {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 8px;
          background: rgba(255, 143, 33, 0.1) !important;
          z-index: -1;
        }

        .dot-mark::before {
          background: #FF8F21;
        }

        .dot-mark::after,
        .circle-mark::after {
          content: '复诊';
          width: 100%;
          height: 34px;
          font-size: 24px;
          font-weight: 400;
          color: #333333;
          line-height: 34px;
          position: absolute;
          bottom: 8px;
          left: 0;
          text-align: center;
        }
      }
    }
  }

  .bottom-operate {
    display: none;

    img {
      height: 5vw;
    }
  }

  .dateActive {
    .day-text {
      width: 56px !important;
      height: 56px !important;
      background: linear-gradient(180deg, #FF334B 0%, #FF9B9B 100%) !important;
      padding-top: 0 !important;
      align-items: center !important;
      margin-top: -30px !important;
      border-radius: 50% !important;
      color: #fff;
    }

    .circle-mark::before, .circle-mark::after, .dot-mark::before, .dot-mark::after{
      display: none !important;
    }

    .dot-mark{
      display: none !important;
    }
  }
}

其他：

有兴趣可以看看其他相关博客

react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw：https://blog.csdn.net/weixin_44461275/article/details/122490874