使用 dayjs 构建日历组件：轻松实现月视图日历功能

1.项目场景：

项目中需要实现一个月日历的功能,通过dayjs进行封装实现获取一个月共有多少天,通过获取到的数据渲染生成日历

---

2.功能流程

1. 根据输入的时间,利用dayjs获取每月第一天及最后一天
2. 在while循环中使用isBefore方法,生成当月数据
3. 通过dayjs中的day()方法获取星期,根据星期添加日历中上月天数
4. 日历中下月天数通过 42减去 dayjs中daysInMonth()方法加上月天数
5. 最后将moment格式日期进行格式化处理

---

3.使用注意事项

使用前，请注意项目中是否已经下载了 dayjs

npm install dayjs

4.数据结构说明

每一条记录（对象）包含以下三个属性：

1. day： 一个 dayjs 日期对象，可以用来获取该日期的相关时间信息。例如，可以使用 day.format() 方法来格式化日期字符串，或者使用其他 dayjs 提供的方法来进行日期计算和比较。
2. isMonth： 一个布尔值，表示该日期是否属于当前月份。如果该日期属于当前月份，则值为 true；否则为 false。这个属性可以帮助你在显示或处理数据时过滤出特定月份的数据。
3. id：当条记录中的日期。它是一个字符串，格式为 "YYYY-MM-DD"，可以当做列表唯一标识符，在列表循环时作为key使用

5.代码实现

  //e 指定的日期 格式：YYYY-MM
  const getMonth = e => {
    const startDay = dayjs(e).startOf('month');
    const endDay = dayjs(e).endOf('month');
    let list = [];

    let currentDay = startDay;
    while (currentDay.isBefore(endDay)) {
      list.push({ day: currentDay, isMonth:true,  id: endDay.add(i, "day").format("YYYY-MM-DD"), });
      currentDay = currentDay.add(1, 'day');
    }

    //上个月补充
    let week = list[0].day.day();
    if (week == 0) {
      week = 7;
    }
    for (let i = 1; i < week; i++) {
       // ishow:区分是否是本月日期
      list.unshift({ day: startDay.add(-i, 'day'),isShow:false,  id: endDay.add(i, "day").format("YYYY-MM-DD"), });
    }
    
   //下个月补充   42:日历中的六周 * 一周七天
    let nextWeek = 42 - (dayjs(e).daysInMonth() + week - 1);
    for (let i = 1; i <= nextWeek; i++) {
       // ishow:区分是否是本月日期
      list.push({ day: endDay.add(i, 'day'), isMonth: false,  id: endDay.add(i, "day").format("YYYY-MM-DD"), })
    }

    console.log(list)
   	return list
  };

6.效果展示