最近项目要用到，兜兜转转看了一圈各种现有组件，感觉都不是很完美，要么功能不是很符合，要么就是太久没有维护了感觉不靠谱；

加上产品想要钉钉日历这种效果，就打算自己写一个支持滑动切换的日历组件；

开发思路

根据我们的业务需求，模仿钉钉打算做个简化版的，并不需要那种复杂的日历记录等，我们的日历组件主要用于切换日期以及展示每天的数据状态。

所以这个日历组件的核心功能就是可以滑动切换，非常简洁的一个组件；

核心思路就是做一个滑动的容器，然后把日历相关的数据提取出来，转换成需要的样式放入容器内部；

极其简洁吗，代码格式完也就100行不到；

开发步骤

滑动组件

作为核心的滑动切换功能，这里考虑到移动端的各种兼容性开发成本等等，经过挑选思考后使用了swiper组件；

<Swiper
  className="mySwiper"
  loop={true}
  onSlideChange={(e) => {
    set_activeIndex(e.realIndex);
  }}
>
  {list.map((item) => (
    <SwiperSlide key={item.str}></SwiperSlide>
  ))}
</Swiper>;

复制代码

为了达到滑动切换日历的视觉效果，这里采用的方案是使用三页SwiperSlide，加上loop模式支持循环播放，监听当前选中的对象，实时去修改另外两个对象，让其始终保持左边一页为上个月、右边一页为下个月；

日历数据

做完滑动效果，剩下的就是对于日历数据的处理，这里可以根据个人习惯，比较方便的是直接使用momentjs或者dayjs，通过各种现成api拿到每个月的天数，然后遍历出当前周几，保存成数据循环到页面即可；

对于周几排序的处理方法，我这边是最简单粗暴的在前面添加空白数据；

另外如果需要把上个月的数据显示进去，可以直接使用subtract这种api切换日期即可，把上面的空白数据填上日期就行；

整个流程可以说是极其简洁，对于我们要用的场景已经是满足了。

后面如果想对功能进行拓展也是很方便的

代码地址：github.com/CHU295/Swip…