日历签到实现（H5）

html 代码

  <div class="calendar">
            <!-- 星期标题 -->
            <div class="calendar-grid">
              <div v-for="w in weekNames" class="day-name">{{ w }}</div>
            </div>

            <!-- 日期 -->
            <div class="calendar-grid">
              <div
                v-for="day in days"
                :class="['day',
                    day.isToday ? 'today' : '',
                    day.isSigned ? 'signed' : '',
                    day.isMarked ? 'marked' : '',
                    day.isEmpty ? 'empty' : '']"
              >
                <div class="dayCon">{{ day.text }}</div>
              </div>
            </div>
          </div>

JS data 字段

 data() {
        return {
          customerId: "", // 用户id
          queryString: "", // 问号后所有参数
          current: dayjs(), // 当前月份
          weekNames: ["日", "一", "二", "三", "四", "五", "六"],
          // 指定活动参与区间
          markedRanges: [{ start: "2025-08-10", end: "2025-08-25" }],
          // 已签到的日期 // "2025-08-01", "2025-08-03", "2025-08-10"
          signedDates: [],
          alldays: 0,
          alloval: 0,
          continuedays: 0,
          isTodaySign: 0,
        };
      },

JS 核心代码：

computed: {
        days() {
          const startOfMonth = this.current.startOf("month");
          const endOfMonth = this.current.endOf("month");
          const startWeekday = startOfMonth.day();
          const daysInMonth = this.current.daysInMonth();

          let days = [];

          // 前面空白
          for (let i = 0; i < startWeekday; i++) {
            days.push({ text: "", isEmpty: true });
          }

          // 当前月份的天数
          for (let d = 1; d <= daysInMonth; d++) {
            const date = this.current.date(d);
            const dateStr = date.format("YYYY-MM-DD");
            // 判断是否是今天
            const isToday = date.isSame(dayjs(), "day");
            // 判断是否在标记区间内
            let isMarked = this.markedRanges.some((range) => {
              return (
                date.isAfter(dayjs(range.start).subtract(1, "day")) &&
                date.isBefore(dayjs(range.end).add(1, "day"))
              );
            });
            days.push({
              text: d,
              isSigned: this.signedDates.includes(dateStr),
              isToday,
              isMarked,
              isEmpty: false,
            });
          }

          return days;
        },
      },

效果图如下：