如果有多个不同配置的日历组件,可分别定义配置。

组件必须有 ID 属性,在调用提供的各个日历 API 时需注意,最后一个参数为要操作的组件 ID(多个组件模式下必传),表示当前要操作的是哪一个日历组件数据。

具体示例可参考 /pages/calendarMoreComponent/index 页面

Page({
  data: {
    calendarConfig: {
      multi: true,
      onlyShowCurrentMonth: 1
    },
    calendarConfig2: {
      inverse: 1, // 单选模式下是否可以取消选择
      defaultDay: '2019-5-20'
    }
  },
  doSomething() {
    const todoLabels = this.calendar.getTodoLabels('#calendar1');
    this.calendar.setTodoLabels(
      {
        circle: true,
        days: [
          {
            year: 2018,
            month: 1,
            day: 1,
            todoText: '待办'
          }
        ]
      },
      '#calendar2'
    );
  }
});
<calendar
  id="calendar1"
  calendarConfig="{{calendarConfig}}"
  bind:afterTapDay="afterTapDay"
  bind:whenChangeMonth="whenChangeMonth"
  bind:onTapDay="onTapDay"
  bind:afterCalendarRender="afterCalendarRender"
></calendar>
<calendar
  id="calendar2"
  calendarConfig="{{calendarConfig2}}"
  bind:afterTapDay="afterTapDay"
  bind:whenChangeMonth="whenChangeMonth"
  bind:onTapDay="onTapDay"
  bind:afterCalendarRender="afterCalendarRender"
  ></calendar>