Vant 日历-实现平铺自定义日历内容

【Vant 日历】

前提：引入Vant组件

步骤一，json中定义

"usingComponents": {
    "van-calendar": "@vant/weapp/calendar/index"
 },

步骤二，页面中使用

<view class="popcalender">
  <van-calendar
  poppable="{{ false }}" //是否以弹层的形式展示日历
  show-title="{{false}}" //	是否展示日历标题
  show-mark="{{false}}" //是否显示月份背景水印
  formatter="{{ formatter }}" //自定义日期文案，通过传入formatter函数来对日历上每一格的内容进行格式化
  confirm-text="完成"//确认按钮的文字
  default-date="" //默认选中的日期，默认今天
  show-subtitle="{{false}}" //是否展示日历副标题（年月）
  show-confirm="{{ false }}" //是否展示确认按钮
  class="calendar"
/>
</view>

步骤三：重点，如何自定义日期文案

//onLoad中
 onLoad: function (options) {
    this.cander()
  },
//方法
 cander() {
    this.setData({
      formatter: function (day) {
        // 业务代码
        const month = day.date.getMonth()   1;
        const date = day.date.getDate();
        if (month === 5) {
          if (date === 1) {
            day.topInfo = '上方文字';
            day.bottomInfo="下方文字"
            day.text="中间文字"
            day.className="类名"
          } else if (date === 4) {
            day.topInfo = '五四青年节';
          } else if (date === 11) {
            day.text = '今天';
          }
        }
        //自定义日期间隔的开始和结束文案和样式
        if (day.type === 'start') {
          day.bottomInfo = '入住';
        } else if (day.type === 'end') {
          day.bottomInfo = '离店';
        }
        return day;
      }
    })
  },

这篇好文章是转载于：学新通技术网