nd_wxapp/pages/calendarComponent/index.js

const conf = {
  data: {
    calendarConfig: {
      showLunar: true
      // chooseAreaMode: true,
      // firstDayOfWeek: 'Mon',
      // disableMode: {
      //   type: 'after',
      //   date: '2020-03-9'
      // },
      // defaultDay: '2020-3-6'
      // multi: true
    },
    actionBtn: [
      {
        text: '跳转指定日期',
        action: 'jump',
        color: 'olive'
      },
      {
        text: '获取当前已选',
        action: 'getSelectedDay',
        color: 'red'
      },
      {
        text: '取消选中日期',
        action: 'cancelSelectedDates',
        color: 'mauve'
      },
      {
        text: '设置待办事项',
        action: 'setTodoLabels',
        color: 'cyan'
      },
      {
        text: '删除指定代办',
        action: 'deleteTodoLabels',
        color: 'pink'
      },
      {
        text: '清空待办事项',
        action: 'clearTodoLabels',
        color: 'red'
      },
      {
        text: '获取所有代办',
        action: 'getTodoLabels',
        color: 'purple'
      },
      {
        text: '禁选指定日期',
        action: 'disableDay',
        color: 'olive'
      },
      {
        text: '指定可选区域',
        action: 'enableArea',
        color: 'pink'
      },
      {
        text: '指定特定可选',
        action: 'enableDays',
        color: 'red'
      },
      {
        text: '选中指定日期',
        action: 'setSelectedDays',
        color: 'cyan'
      },
      {
        text: '周月视图切换',
        action: 'switchView',
        color: 'orange'
      },
      {
        text: '自定义配置',
        action: 'config',
        color: 'pink'
      },
      {
        text: '获取自定义配置',
        action: 'getConfig',
        color: 'olive'
      },
      {
        text: '获取日历面板日期',
        action: 'getCalendarDates',
        color: 'purple'
      }
    ]
  },
  afterTapDay(e) {
    console.log('afterTapDay', e.detail)
  },
  whenChangeMonth(e) {
    console.log('whenChangeMonth', e.detail)
  },
  whenChangeWeek(e) {
    console.log('whenChangeWeek', e.detail)
  },
  onTapDay(e) {
    console.log('onTapDay', e.detail)
  },
  afterCalendarRender(e) {
    console.log('afterCalendarRender', e)
    // this.calendar.switchView('week').then(() => {
    //   this.calendar.jump(2020, 3, 1).then(date => {}); // 跳转至某日
    // });
  },
  onSwipe(e) {
    console.log('onSwipe', e)
  },
  showToast(msg) {
    if (!msg || typeof msg !== 'string') return
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 1500
    })
  },
  generateRandomDate(type) {
    let random = ~~(Math.random() * 10)
    switch (type) {
      case 'year':
        random = 201 * 10 + ~~(Math.random() * 10)
        break
      case 'month':
        random = (~~(Math.random() * 10) % 9) + 1
        break
      case 'date':
        random = (~~(Math.random() * 100) % 27) + 1
        break
      default:
        break
    }
    return random
  },
  handleAction(e) {
    const { action, disable } = e.currentTarget.dataset
    if (disable) {
      this.showToast('抱歉，还不支持～😂')
    }
    this.setData({
      rst: []
    })
    const calendar = this.calendar
    const { year, month } = calendar.getCurrentYM()
    switch (action) {
      case 'config':
        calendar
          .setCalendarConfig({
            showLunar: false,
            theme: 'elegant',
            multi: true
          })
          .then(conf => {
            console.log('设置成功：', conf)
          })
        break
      case 'getConfig':
        const config = calendar.getCalendarConfig()
        this.showToast('请在控制台查看结果')
        console.log('自定义配置: ', config)
        break
      case 'jump': {
        const year = this.generateRandomDate('year')
        const month = this.generateRandomDate('month')
        const date = this.generateRandomDate('date')
        calendar[action](year, month, date)
        break
      }
      case 'getSelectedDay': {
        const selected = calendar[action]()
        if (!selected || !selected.length)
          return this.showToast('当前未选择任何日期')
        this.showToast('请在控制台查看结果')
        console.log('get selected days: ', selected)
        const rst = selected.map(item => JSON.stringify(item))
        this.setData({
          rst
        })
        break
      }
      case 'cancelSelectedDates':
        calendar[action]([
          {
            year: 2020,
            month: 3,
            day: 3
          }
        ])
        break
      case 'setTodoLabels': {
        const days = [
          {
            year,
            month,
            day: this.generateRandomDate('date'),
            todoText: Math.random() * 10 > 5 ? '领奖日' : ''
          }
        ]
        calendar[action]({
          showLabelAlways: true,
          days
        })
        console.log('set todo labels: ', days)
        break
      }
      case 'deleteTodoLabels': {
        const todos = [...calendar.getTodoLabels()]
        if (todos && todos.length) {
          todos.length = 1
          calendar[action](todos)
          const _todos = [...calendar.getTodoLabels()]
          setTimeout(() => {
            const rst = _todos.map(item => JSON.stringify(item))
            this.setData(
              {
                rst
              },
              () => {
                console.log('set todo labels: ', todos)
              }
            )
          })
        } else {
          this.showToast('没有待办事项')
        }
        break
      }
      case 'clearTodoLabels':
        const todos = [...calendar.getTodoLabels()]
        if (!todos || !todos.length) {
          return this.showToast('没有待办事项')
        }
        calendar[action]()
        break
      case 'getTodoLabels': {
        const selected = calendar[action]()
        if (!selected || !selected.length)
          return this.showToast('未设置待办事项')
        const rst = selected.map(item => JSON.stringify(item))
        rst.map(item => JSON.stringify(item))
        this.setData({
          rst
        })
        break
      }
      case 'disableDay':
        calendar[action]([
          {
            year,
            month,
            day: this.generateRandomDate('date')
          }
        ])
        break
      case 'enableArea': {
        let sDate = this.generateRandomDate('date')
        let eDate = this.generateRandomDate('date')
        if (sDate > eDate) {
          ;[eDate, sDate] = [sDate, eDate]
        }
        const area = [`${year}-${month}-${sDate}`, `${year}-${month}-${eDate}`]
        calendar[action](area)
        this.setData({
          rstStr: JSON.stringify(area)
        })
        break
      }
      case 'enableDays':
        const days = [
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`
        ]
        calendar[action](days)
        this.setData({
          rstStr: JSON.stringify(days)
        })
        break
      case 'switchView':
        if (!this.week) {
          calendar[action]('week')
          this.week = true
        } else {
          calendar[action]()
          this.week = false
        }
        break
      case 'setSelectedDays':
        const toSet = [
          {
            year,
            month,
            day: this.generateRandomDate('date')
          },
          {
            year,
            month,
            day: this.generateRandomDate('date')
          }
        ]
        calendar[action](toSet)
        break
      case 'getCalendarDates':
        this.showToast('请在控制台查看结果')
        console.log(calendar.getCalendarDates())
        break
      default:
        break
    }
  }
}

Page(conf)