微信小程序日历实现思路 代码，要求点击两个时间要拿到时间段。并且中间的时间到点击的时间有active 颜色效果。

实现思路：

1. 使用 WXML、WXSS 和 JavaScript 实现日历 UI 和交互效果。

2. 使用小程序自带的日期函数获取当前月份和天数，计算出当月第一天和最后一天的日期，并存储在全局变量中。

3. 在 WXML 中循环渲染日期表格，每个日期格子使用一个 view 标签表示，同时根据日期是否在当前月份决定是否添加“disabled”类名。

4. 给每个日期格子绑定一个 tap 事件，用于选择日期，并在 JavaScript 中将选择的日期存储在全局变量中。

5. 实现时间段选择功能。首先，需要给每个日期格子绑定一个 longpress 事件，用于选择时间段的起始日期。然后，在选择起始日期后，再次点击一个日期格子，将该日期和起始日期之间的日期格子都标记为选中状态，同时将选中的日期存储在全局变量中。

6. 实现 active 颜色效果。在 JavaScript 中，根据当前选中的日期和起始日期之间的日期，动态添加“active”类名，用于设置选中日期格子的样式。

代码实现：

WXML：

<view class="calendar">
  <view class="header">
    <text class="prev" bindtap="prevMonth">上个月</text>
    <text class="title">{{month}}</text>
    <text class="next" bindtap="nextMonth">下个月</text>
  </view>
  <view class="weekdays">
    <text class="weekday" wx:for="{{weekdays}}" wx:key="{{index}}">{{item}}</text>
  </view>
  <view class="days">
    <view class="day {{item.disabled}}" wx:for="{{days}}" wx:key="{{index}}" bindtap="selectDate" bindlongtap="startSelectDate" data-date="{{item.date}}" data-index="{{index}}" data-disabled="{{item.disabled}}" class="{{item.active}}">{{item.day}}</view>
  </view>
</view>

WXSS：

.calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20rpx;
}

.weekdays {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20rpx;
  background-color: #f2f2f2;
}

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

.days {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20rpx;
}

.day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 7);
  height: 100rpx;
  font-size: 32rpx;
  color: #333;
  cursor: pointer;
}

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

.day.active {
  background-color: #ccc;
}

JavaScript：

Page({
  data: {
    month: '', // 当前月份
    weekdays: ['日', '一', '二', '三', '四', '五', '六'], // 星期数组
    days: [], // 日期数组
    startDate: null, // 时间段选择的起始日期
    endDate: null, // 时间段选择的结束日期
  },

  onLoad() {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const daysInMonth = new Date(year, month, 0).getDate()
    const firstDayOfMonth = new Date(`${year}-${month}-01`).getDay()
    const lastDayOfMonth = new Date(`${year}-${month}-${daysInMonth}`).getDay()
    const prevMonthDays = new Date(year, month - 1, 0).getDate()
    const nextMonthDays = 7 - lastDayOfMonth - 1
    const days = []
    for (let i = prevMonthDays - firstDayOfMonth + 1; i <= prevMonthDays; i++) {
      days.push({
        day: i,
        date: `${year}-${month - 1}-${i}`,
        disabled: true,
        active: '',
      })
    }
    for (let i = 1; i <= daysInMonth; i++) {
      days.push({
        day: i,
        date: `${year}-${month}-${i}`,
        disabled: false,
        active: '',
      })
    }
    for (let i = 1; i <= nextMonthDays; i++) {
      days.push({
        day: i,
        date: `${year}-${month + 1}-${i}`,
        disabled: true,
        active: '',
      })
    }
    this.setData({
      month: `${year}年${month}月`,
      days,
    })
  },

  prevMonth() {
    // 上一个月
  },

  nextMonth() {
    // 下一个月
  },

  selectDate(e) {
    // 选择日期
  },

  startSelectDate(e) {
    // 开始选择时间段
  },
})