微信小程序日历组件

// pages/signCalendar/signCalendar.js
const dayjs = require('../../utils/dayjs.min')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    calendarData: [],
    // 构建顶部日期时使用
    date: ['一', '二', '三', '四', '五', '六', '日'],
    currentYear: '',
    currentMonth: '',
    currentDate: '',
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const currentDate = dayjs();
    const currentYear = currentDate.year();
    const currentMonth = currentDate.month() + 1;
    this.setData({
      currentYear,
      currentMonth,
      currentDate
    })
    this.getCalendar(currentYear,currentMonth)

  },
  getCalendar(year, month) {
    const calendarData = [];
    // 获取当前月份的第一天
    const firstDayOfMonth = dayjs().year(year).month(month - 1).startOf('month')
    // 获取当前月份的最后一天
    const lastDayOfMonth = firstDayOfMonth.endOf('month');
    // 获取当前月份的第一天是星期几
    let firstDayOfWeek = firstDayOfMonth.day();
    //dayjs 周天为0
    if (firstDayOfWeek === 0) {
      firstDayOfWeek = 7;
    }

    // 填充上个月的空余部分
    for (let i = firstDayOfWeek; i > 1; i--) {
      const prevDay = dayjs(firstDayOfMonth).subtract(i - 1, 'day');
      calendarData.push({
        date: prevDay.date(),
        month: prevDay.month() + 1,
        year: prevDay.year(),
        isCurrentMonth: false,
      });
    }
    // 填充当前月份的数据
    let currentDateToAdd = firstDayOfMonth;
    while (currentDateToAdd.isBefore(lastDayOfMonth)) {
      calendarData.push({
        date: currentDateToAdd.date(),
        month: currentDateToAdd.month() + 1,
        year: currentDateToAdd.year(),
        isCurrentMonth: true,
      });

      currentDateToAdd = currentDateToAdd.add(1, 'day');
    }
    // 当当前月份数据不足42个时，填充下个月的数据
    while (calendarData.length < 42) {
      const nextDate = currentDateToAdd.date();
      const nextMonth = currentDateToAdd.month() + 1;
      const nextYear = currentDateToAdd.year();
      calendarData.push({
        date: nextDate,
        month: nextMonth,
        year: nextYear,
        isCurrentMonth: false,
      });

      currentDateToAdd = currentDateToAdd.add(1, 'day');
    }
    this.setData({
      calendarData
    })

  },
  preMonth() {
    const previousMonth = this.data.currentDate.subtract(1, 'month');
    const previousMonthYear = previousMonth.year();
    const previousMonthMonth = previousMonth.month() + 1;
    this.setData({
      currentYear: previousMonthYear,
      currentMonth: previousMonthMonth,
      currentDate: previousMonth
    })
    this.getCalendar(previousMonthYear, previousMonthMonth)
  },
  nextMonth() {
    const nextMonth = this.data.currentDate.add(1, 'month');
    const nextMonthYear = nextMonth.year();
    const nextMonthMonth = nextMonth.month() + 1;
    this.setData({
      currentYear: nextMonthYear,
      currentMonth: nextMonthMonth,
      currentDate: nextMonth
    })
    this.getCalendar(nextMonthYear, nextMonthMonth)

  },

})

<!--pages/signCalendar/signCalendar.wxml-->
<view class="container">
  <view style="display: flex;flex-direction: row;align-items: center;">
    <button bind:tap="preMonth" size="mini" plain="{{true}}" class="btn">上月</button>
    <view>日期：{{currentYear}}年{{currentMonth}}月</view>
    <button bind:tap="nextMonth" size="mini" plain="{{true}}" class="btn">下月</button>
  </view>


  <view class="calendar bg-cadetblue" style="margin-top: 20rpx;">
    <view wx:for="{{date}}" wx:key="index" class="block">
      <view class="week">
        {{item}}
      </view>
    </view>
  </view>
  <view class="calendar">
    <view wx:for="{{calendarData}}" wx:key="index" class="block">
      <view class="{{item.isCurrentMonth?'block-content-current':'block-content'}}">
        {{item.date}}
      </view>
    </view>
  </view>
</view>

/* pages/signCalendar/signCalendar.wxss */
.container{
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  
}

.calendar {
  display: flex;
  flex-wrap: wrap;
}

.block {
  flex-basis: calc(100% / 7); /* 每行展示7个块 */
  height: 100rpx;
  box-sizing: border-box;
}
.bg-cadetblue{
   background-color:cadetblue;
}
.week{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.block-content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
.block-content-current{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-weight: 700;
}