微信小程序日历组件（可滑动，可展开收缩，可标点）

效果图

1.component/ calendar.wxml

<!-- component/calendar/calendar.wxml -->
<wxs src="./calendar.wxs" module="calculate" />
<view class="calendar">
  <view class="header">
    <view class="title">
      <view class="header-wrap">
        <view class="flex">
          <view class="title">{
  {title}}</view>
          <view class="month">
            <block wx:if="{
  {title}}">(</block>
            {
  {selectDay.year}}年{
  {selectDay.month}}月
            <block wx:if="{
  {title}}">)</block>
          </view>
        </view>
        <block wx:if="{
  {goNow}}">
          <view wx:if="{
  {open && !(nowDay.year==selectDay.year&&nowDay.month==selectDay.month&&nowDay.day==selectDay.day)}}" class="today" bindtap="switchNowDate">
            今日
          </view>
        </block>
      </view>
    </view>
  </view>
  <!-- 日历头部 -->
  <view class="flex-around calendar-week">
    <view class="calendar-week-item" wx:for="{
  {calendarHeadDate}}" wx:key="item">
      {
  {calendarHeadDate[(index-firstDayOfWeek+7)%7]}}
    </view>
  </view>
  <!-- 日历主体 -->
  <swiper class="swiper" style="height:{
  {swiperHeight}}rpx" bindchange="swiperChange" circular="{
  {true}}" current="{
  {swiperCurrent}}" duration="{
  {swiperDuration}}">
    <swiper-item wx:for="{
  {[dateList0, dateList1, dateList2]}}" wx:for-index="listIndex" wx:for-item="listItem" wx:key="listIndex">
      <view class="flex-around flex-wrap calendar-main" style="height:{
  {listItem.length/7*82}}rpx">
        <view wx:for="{
  {listItem}}" wx:key="dateList" class="day">
          <view class="bg {
  {calculate.spot(item,selectDay,spotMap)}} {
  {calculate.hasNow(item,nowDay)}} {
  {calculate.hasNowMonth(item,selectDay)}} {
  {calculate.hasSelect(item,selectDay,oldCurrent,listIndex)}} {
  {calculate.hasDisable(item,disabledDateList)}}" catchtap="selectChange" data-day="{
  {item.day}}" data-year="{
  {item.year}}" data-month="{
  {item.month}}">
            {
  {item.day}}
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
  <!-- 展开收缩 -->
  <view wx:if="{
  {showShrink}}" catchtap="openChange" class="flex list-open">
    <view class="icon {
  {open?'fold':'unfold'}}"></view>
  </view>
</view>

2.component/ calendar.js

// component/calendar/calendar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    spotMap: {
      //标点的日期
      type: Object,
      value: {},
    },
    defaultTime: {
      //标记的日期，默认为今日 注意：传入格式推荐为'2022/1/2'或'2022/01/02', 其他格式在ios系统上可能出现问题
      type: String,
      value: '',
    },
    title: {
      //标题
      type: String,
      value: '',
    },
    goNow: {
      // 是否有快速回到今天的功能
      type: Boolean,
      value: true,
    },
    defaultOpen: {
      // 是否是打开状态
      type: Boolean,
      value: false,
    },
    showShrink: {
      // 是否显示收缩展开功能
      type: Boolean,
      value: true,
    },
    // 指定不可用日期
    disabledDate:null,
    changeTime: {
      // 要改变的日期
      type: String,
      value: '',
    },
    firstDayOfWeek: {
      // 周起始日
      type: Number,
      value: 7,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectDay: {}, //选中的日期
    nowDay: {}, //现在的日期
    open: false,
    swiperCurrent: 1, //选中的日期
    oldCurrent: 1, //之前选中的日期
    dateList0: [], //0位置的日历数组
    dateList1: [], //1位置的日历数组
    dateList2: [], //2位置的日历数组
    swiperDuration: 500,
    swiperHeight: 0,
    backChange: false, //跳过change切换
    disabledDateList: {}, //禁用的日期集合
    calendarHeadDate: ['一', '二', '三', '四', '五', '六', '日'] //日历头部的渲染数组
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 日历滑动时触发的方法
    swiperChange(e) {
      if (this.data.backChange) {
        this.setData({
          backChange: false,
        });
        return;
      }
      //计算第三个索引
      let rest = 3 - e.detail.current - this.data.oldCurrent;
      let dif = e.detail.current - this.data.oldCurrent;
      let date;
      if (dif === -2 || (dif > 0 && dif !== 2)) {
        //向右划的情况，日期增加
        if (this.data.open) {
          date = new Date(this.data.selectDay.year, this.data.selectDay.month);
          this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined);
          this.getIndexList({
            setYear: this.data.selectDay.year,
            setMonth: this.data.selectDay.month,
            dateIndex: rest,
          });
        } else {
          date = new Date(
            this.data.selectDay.year,
            this.data.selectDay.month - 1,
            this.data.selectDay.day + 7
          );
          this.setMonth(
            date.getFullYear(),
            date.getMonth() &#