微信小程序实现自定义日历功能步骤详解

<!-- calendar.wxml -->
<navigation-bar title="日历控件" back="{{false}}" color="#ffffff" background="#e6142c"></navigation-bar>
  <!-- 日历部分 -->
  <view class="calendar">
    <!-- 日历头部 -->
    <view class="calendar-header">
      <view class="arrow" bindtap="prevmonth">〈</view>
      <view class="date-title">{{year}}年{{month}}月</view>
      <view class="arrow" bindtap="nextmonth">〉</view>
    </view>
    <!-- 星期标题 -->
    <view class="weekday-row">
      <view class="weekday" wx:for="{{weekdays}}" wx:key="*this">{{item}}</view>
    </view>
    <!-- 日期格子 -->
    <view class="date-rows">
      <view class="date-row" wx:for="{{datelist}}" wx:for-item="row" wx:key="index">
        <view class="date-cell {{item.currentmonth ? '' : 'other-month'}} {{item.istoday ? 'today' : ''}} {{item.selected ? 'selected' : ''}}" wx:for="{{row}}" wx:key="date" bindtap="selectdate" data-date="{{item.date}}">
          {{item.day}}
        </view>
      </view>
    </view>
  </view>

/* calendar.wxss */
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.calendar {
  background: #f5f5f5;
  border-radius: 10rpx;
  padding: 20rpx;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}
.date-title {
  font-size: 32rpx;
  font-weight: bold;
}
.arrow {
  padding: 10rpx 20rpx;
  color: #666;
}
.weekday-row {
  display: flex;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 10rpx;
  margin-bottom: 10rpx;
}
.weekday {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
.date-rows {
  display: flex;
  flex-direction: column;
}
.date-row {
  display: flex;
  margin: 5rpx 0;
}
.date-cell {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  position: relative;
  height: 65rpx;
  line-height: 65rpx;
  margin: 5rpx;
}
.selected {
  background: #e6142c;
  color: #fff !important;
  /* 确保选中时文字颜色为白色 */
  border-radius: 50%;
}
/* 确保今天的样式和选中样式可以共存 */
.today {
  color: #e6142c;
  font-weight: bold;
}
.today.selected {
  color: #fff !important;
  background: #e6142c;
}
/* 其他月份日期的样式 */
.other-month {
  color: #ccc;
}
.other-month.selected {
  background: #1aad19;
  color: #fff !important;
}

// calendar.js
page({
  data: {
    year: 2024,
    month: 1,
    day: 1,
    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
    datelist: [],
    selecteddate: null,
    datestr: '',
  },
  onload() {
    // 初始化当前日期
    const now = new date()
    this.setdata({
      year: now.getfullyear(),
      month: now.getmonth() + 1,
      selecteddate: now // 设置当前日期为选中状态
    }, () => {
      this.generatedatelist()
    })
    wx.showtoast({
      title: this.data.selecteddate.tolocaledatestring(),
      icon:"none"
    })
  },
  // 生成日历数据
  generatedatelist() {
    const {
      year,
      month
    } = this.data
    const datelist = []
    // 获取当月第一天和最后一天
    const firstday = new date(year, month - 1, 1)
    const lastday = new date(year, month, 0)
    // 获取当月第一天是星期几
    const firstdayweek = firstday.getday()
    // 获取上个月的最后几天
    const prevmonthlastday = new date(year, month - 1, 0).getdate()
    // 当前日期
    const today = new date()
    const currentdatestr = today.todatestring()
    // 填充上个月的日期
    let row = []
    for (let i = 0; i < firstdayweek; i++) {
      const day = prevmonthlastday - firstdayweek + i + 1
      const date = new date(year, month - 2, day)
      row.push({
        day,
        date: date,
        currentmonth: false,
        istoday: date.todatestring() === currentdatestr,
        selected: this.data.selecteddate && date.todatestring() === this.data.selecteddate.todatestring()
      })
    }
    // 填充当月日期
    for (let day = 1; day <= lastday.getdate(); day++) {
      const date = new date(year, month - 1, day)
      row.push({
        day,
        date: date,
        currentmonth: true,
        istoday: date.todatestring() === currentdatestr,
        selected: this.data.selecteddate && date.todatestring() === this.data.selecteddate.todatestring()
      })
      if (row.length === 7) {
        datelist.push(row)
        row = []
      }
    }
    // 填充下个月的日期
    let nextmonthday = 1
    while (row.length < 7) {
      const date = new date(year, month, nextmonthday)
      row.push({
        day: nextmonthday++,
        date: date,
        currentmonth: false,
        istoday: date.todatestring() === currentdatestr,
        selected: this.data.selecteddate && date.todatestring() === this.data.selecteddate.todatestring()
      })
    }
    datelist.push(row)
    this.setdata({
      datelist
    })
  },
  // 选择日期
  selectdate(e) {
    const selecteddate = new date(e.currenttarget.dataset.date)
    this.setdata({
      selecteddate: selecteddate
    }, () => {
      this.generatedatelist()
      //格式化日期
      const date = new date(selecteddate.tolocaledatestring())
      wx.showtoast({
        title: selecteddate.tolocaledatestring(),
        icon:"none"
      })
    })
  },
  // 生成日历数据
  generatedatelist() {
    const {
      year,
      month
    } = this.data
    const datelist = []
    // 获取当月第一天和最后一天
    const firstday = new date(year, month - 1, 1)
    const lastday = new date(year, month, 0)
    // 获取当月第一天是星期几
    const firstdayweek = firstday.getday()
    // 获取上个月的最后几天
    const prevmonthlastday = new date(year, month - 1, 0).getdate()
    // 当前日期
    const today = new date()
    const currentdatestr = today.todatestring()
    // 选中的日期字符串（用于比较）
    const selecteddatestr = this.data.selecteddate ? this.data.selecteddate.todatestring() : ''
    // 填充上个月的日期
    let row = []
    for (let i = 0; i < firstdayweek; i++) {
      const day = prevmonthlastday - firstdayweek + i + 1
      const date = new date(year, month - 2, day)
      const datestr = date.todatestring()
      row.push({
        day,
        date: datestr,
        currentmonth: false,
        istoday: datestr === currentdatestr,
        selected: selecteddatestr && datestr === selecteddatestr
      })
    }
    // 填充当月日期
    for (let day = 1; day <= lastday.getdate(); day++) {
      const date = new date(year, month - 1, day)
      const datestr = date.todatestring()
      row.push({
        day,
        date: datestr,
        currentmonth: true,
        istoday: datestr === currentdatestr,
        selected: selecteddatestr && datestr === selecteddatestr
      })
      if (row.length === 7) {
        datelist.push(row)
        row = []
      }
    }
    // 填充下个月的日期
    let nextmonthday = 1
    while (row.length < 7) {
      const date = new date(year, month, nextmonthday)
      const datestr = date.todatestring()
      row.push({
        day: nextmonthday++,
        date: datestr,
        currentmonth: false,
        istoday: datestr === currentdatestr,
        selected: selecteddatestr && datestr === selecteddatestr
      })
    }
    if (row.length > 0) {
      datelist.push(row)
    }
    this.setdata({
      datelist
    })
  },
  // 上个月
  prevmonth() {
    let {
      year,
      month
    } = this.data
    if (month === 1) {
      year--
      month = 12
    } else {
      month--
    }
    this.setdata({
      year,
      month
    }, () => {
      this.generatedatelist()
    })
  },
  // 下个月
  nextmonth() {
    let {
      year,
      month
    } = this.data
    if (month === 12) {
      year++
      month = 1
    } else {
      month++
    }
    this.setdata({
      year,
      month
    }, () => {
      this.generatedatelist()
    })
  }
});