微信小程序 日历组件横向切换

<view class="calendar">
  <van-calendar
    color="#1d88f2"
    poppable="{{ false }}"
    show-confirm="{{ false }}"
    show-mark="{{false}}"
    class="calendar-div-calendar"
    row-height="50"
    min-date="{{minDate}}"
    max-date="{{maxDate}}"
    default-date="{{defaultDate}}"
    show-subtitle="{{false}}"
    type="multiple"
    formatter="{{ formatter }}"
  >
  <view class="calendar-div-button" slot='title'>
    <van-button size='small' class="prov" bindtap="arrowLeft">前一月</van-button>
    <view>{{title}}</view>
    <van-button size='small' class="next" bindtap="arrowRight">后一月</van-button>
  </view>
  </van-calendar>
</view>
//js
Component({
 
  data: {
      // 最大值和最小值都要保证是这个月, 默认值是今天，这样布局中才只会显示一个月
      minDate: new Date().getTime(),
      maxDate: new Date().getTime(),
      defaultDate: new Date().getTime(),
      title: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月',
      // formatter一定要有返回值，不然报错
      formatter(day) {
        return day
      },
  },
 
  created() {
    this.setMinMaxDay()
    this.formatterFuc()
  },
  methods: {
    // 初始设置显示月份可选择的天数区间
    setMinMaxDay() {
      let nowYear = new Date(this.data.defaultDate).getFullYear();
      let nowMonth = new Date(this.data.defaultDate).getMonth() + 1;
        
        // new Date中日期1就是本月第1天，0就是上个月的最后一天
      this.setData({
        minDate: new Date( nowYear, (nowMonth - 1), 1).getTime(),
        maxDate: new Date( nowYear, nowMonth, 0).getTime()
      })
    },
    // 当前月上一个月
    arrowLeft() {
      let year = new Date(this.data.minDate).getFullYear();
      let month = new Date(this.data.minDate).getMonth();
      // 修改min和max来改变月份显示区域，同时更新title
      this.setData({
        minDate: new Date(year, (month - 1), 1).getTime(),
        maxDate: new Date(year, month, 0).getTime(),
      }, () => {
        this.setCalenderTitle()
      })
    },
    // 当前月下一个月
    arrowRight() {
      let year = new Date(this.data.minDate).getFullYear();
      let month = new Date(this.data.minDate).getMonth();
      this.setData({
        minDate: new Date(year, (month + 1), 1).getTime(),
        maxDate: new Date(year, (month + 2), 0).getTime()
      }, () => {
        this.setCalenderTitle()
      })
    },
    setCalenderTitle() {
      let year = new Date(this.data.minDate).getFullYear();
      let month = new Date(this.data.minDate).getMonth();
      this.setData({
        title: year + '年' + (month + 1) + '月'
      })
    },
    formatterFuc() {
      this.setData({
        formatter: function(day) {
          const month = day.date.getMonth() + 1;
          const date = day.date.getDate();
          if (month === 11) {
            if (date === 7) {
              day.bottomInfo = '立冬';
            } else if (date === 22) {
              day.topInfo = '小雪';
              day.className = 'blue-flag'
            } else if (date === 21) {
              day.text = '今天';
            }
          }
          return day
        }
      })
    },
 
   }
})
//wxss
.calendar-div-button{
  display: flex;
  justify-content: space-around;
}
.van-calendar__month-title{
 display: none;
}