最近项目要用到,兜兜转转看了一圈各种现有组件,感觉都不是很完美,要么功能不是很符合,要么就是太久没有维护了感觉不靠谱;
加上产品想要钉钉日历这种效果,就打算自己写一个支持滑动切换的日历组件;
根据我们的业务需求,模仿钉钉打算做个简化版的,并不需要那种复杂的日历记录等,我们的日历组件主要用于切换日期以及展示每天的数据状态。
所以这个日历组件的核心功能就是可以滑动切换,非常简洁的一个组件;
核心思路就是做一个滑动的容器,然后把日历相关的数据提取出来,转换成需要的样式放入容器内部;
极其简洁吗,代码格式完也就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切换日期即可,把上面的空白数据填上日期就行;
整个流程可以说是极其简洁,对于我们要用的场景已经是满足了。
后面如果想对功能进行拓展也是很方便的