微信小程序日历实现思路 代码

下面是一个简单的微信小程序日历实现示例代码：

WXML代码：

<view class="calendar">
  <view class="calendar-header">
    <view class="arrow" bindtap="prevMonth">←</view>
    <view class="header-text">{{year}}年{{month}}月</view>
    <view class="arrow" bindtap="nextMonth">→</view>
  </view>
  <view class="calendar-body">
    <view class="weekdays">
      <view class="weekday" wx:for="{{weekdays}}" wx:key="index">{{item}}</view>
    </view>
    <view class="days">
      <view class="day {{item.type}}" wx:for="{{days}}" wx:key="index" data-date="{{item.date}}" bindtap="selectDay">{{item.day}}</view>
    </view>
  </view>
</view>

CSS代码：

.calendar {
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, .1);
  padding: 20rpx;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  font-size: 36rpx;
  font-weight: bold;
}

.arrow {
  font-size: 48rpx;
  cursor: pointer;
}

.weekdays {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}

.weekday {
  font-size: 28rpx;
  color: #999;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 10rpx;
  align-items: center;
}

.day {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  cursor: pointer;
  height: 80rpx;
  border-radius: 50%;
}

.day.today {
  background-color: #4a90e2;
  color: #fff;
}

.day.selected {
  background-color: #4a90e2;
  color: #fff;
}

.day.disabled {
  color: #ccc;
  cursor: not-allowed;
}

JS代码：

Page({
  data: {
    year: 0,
    month: 0,
    days: [],
    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
    today: "",
    selectedDate: ""
  },

  onLoad: function () {
    const today = new Date();
    this.setData({
      year: today.getFullYear(),
      month: today.getMonth() + 1,
      today: today.toLocaleDateString().replace(/\//g, "-")
    });
    this.renderCalendar();
  },

  prevMonth: function () {
    const { year, month } = this.data;
    let prevYear = year;
    let prevMonth = month - 1;
    if (prevMonth === 0) {
      prevYear--;
      prevMonth = 12;
    }
    this.setData({
      year: prevYear,
      month: prevMonth
    });
    this.renderCalendar();
  },

  nextMonth: function () {
    const { year, month } = this.data;
    let nextYear = year;
    let nextMonth = month + 1;
    if (nextMonth === 13) {
      nextYear++;
      nextMonth = 1;
    }
    this.setData({
      year: nextYear,
      month: nextMonth
    });
    this.renderCalendar();
  },

  renderCalendar: function () {
    const { year, month, today, selectedDate } = this.data;
    const firstDay = new Date(year, month - 1, 1).getDay();
    const lastDate = new Date(year, month, 0).getDate();
    const days = [];
    for (let i = 0; i < firstDay; i++) {
      days.push({
        day: "",
        date: "",
        type: "disabled"
      });
    }
    for (let i = 1; i <= lastDate; i++) {
      const date = `${year}-${month}-${i < 10 ? "0" + i : i}`;
      const type = date < today ? "disabled" : date === selectedDate ? "selected" : "";
      days.push({
        day: i,
        date: date,
        type: type
      });
    }
    this.setData({
      days: days
    });
  },

  selectDay: function (e) {
    const selectedDate = e.currentTarget.dataset.date;
    this.setData({
      selectedDate: selectedDate
    });
    this.renderCalendar();
    // TODO: 根据selectedDate获取数据并展示在日历上
  }
})

这段代码实现了一个简单的日历组件，包括月份的切换、日期的选择、特定日期的任务展示等功能。您可以根据需求进行修改和扩展。