功能完善的小程序日历组件的实现

<ui-calendar dataSource="{{config}}" />

const Pager = require('../../components/aotoo/core/index')
Pager({
 data: {
  config: {
   $$id: 'calendar',
   mode: 1, // 纵向日历
   type: 'range', // 区域选择
   tap: 'onTap', // page响应事件
   total: 365, // 定义从今天开始一年事件
   rangeCount: 28, // 区选区间28天
   festival: true, // 开启节假日显示
   value: ['2019-12-24', '2020-01-05'], // 默认值
   methods: { 
    // 响应 tap事件
    onTap(e, param, inst) {
     if (param.range === 'start') {
      inst.update({dot: [{title: '入住'}]})
     }
     if (param.range === 'end') {
      inst.update({dot: [{title: '离店'}]})
      setTimeout(() => {
       Pager.alert('离店，跳回页面')
      }, 1000);
     }
     console.log(param);
    }
   }
  }
 }
})

let calenderConfig = {
 $$id: 'calendar',
 mode: 2, // 1，纵向日历 2，横向日历
 type: 'single', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 total: 180, // 所有日期选择天数
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
}

let calendarConfig = {
 $$id: 'calendar', //实例id
 mode: 1, // 纵向日历
 type: 'range', // 区间选择日历
 tap: 'onTap', // tap响应方法
 total: 365, // 指定日历从今天开始总天数
 rangeCount: 28, // 区间范围
 rangeMode: 1, // 区间选择是否隐藏非区间的月份
 festival: true, // 是否显示节假日
 value: ['2020-04-03', '2020-04-09'], // 默认值
 methods: { 
  // 定义响应方法 
  onTap(e, param, inst) {
   
   if (param.range === 'start') { // 第一次点击时
    inst.update({dot: [{title: '入住'}]})
   }
   if (param.range === 'end') { // 第二次点击时
    inst.update({dot: [{title: '离店'}]})
   }
   console.log(param);
  }
 }
}

let calenderConfig = {
 $$id: 'calendar',
 mode: 2,
 type: 'multiple', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 total: 180, // 所有日期选择天数
 value: ['2020-04-03', '2020-04-09', '2020-04-10'],
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
}

let calenderConfig = {
 $$id: 'calendar',
 mode: 2, // 1，纵向日历 2，横向日历
 type: 'single', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 total: 180, // 所有日期选择天数，此例中无效 
 data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
},

let calenderConfig = {
 $$id: 'calendar',
 mode: 2, // 1，纵向日历 2，横向日历
 type: 'single', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 total: 180, // 所有日期选择天数，此例中无效
 data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
 toolbox: {
  discontinue: true // 允许构建跨月日历
 },
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
},

let calenderConfig = {
 $$id: 'calendar',
 mode: 1, // 1，纵向日历 2，横向日历
 type: 'single', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],
 festival: ['教师节', '圣诞节'],
 toolbox: {
  discontinue: true // 允许忽略无数据月份
 },
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
},

config.data = [{date: '2020-03-03', content: {dot: ['内容']}}] 

// 配置所有日期的附加内容  
config.date = {dot: ['自定义内容']} 

// 指定日期内容配置  
config.date = function(param){
 // 通过param的属性写逻辑 param.date, param.year, param.month, param.day ...
 if (param.date === '2020-8-13') {
  param.dot = ['附加内容']
  return param
 }
}

let calenderConfig = {
 $$id: 'calendar',
 mode: 2, // 1，纵向日历 2，横向日历
 type: 'single', // single：单选 range: 区间选择 multiple：多选
 tap: 'onTap', // 回调事件
 date: function(param){
  if (param.month === 12 && param.day === 26) {
   param.dot = ['毛主席诞辰']
   return param
  }
  if (param.month === 9 && param.day === 10) {
   param.dot = [
    {title: '生日', itemStyle: 'font-size: 11px; color: blue;'},
    {title: '骗你的', itemStyle: 'font-size: 11px; color: #666'},
   ]
   return param
  }
  if (param.month === 9 && param.day === 20) {
   param.dot = [
    {title: '无效日期', itemStyle: 'font-size: 12px; color: red;'},
    {title: '不能交互', itemStyle: 'font-size: 12px; color: #666;'},
   ]
   param.disable = true
   return param
  }
 },
 toolbox: {
  discontinue: true
 },
 data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],
 methods: { // 响应方法
  onTap(e, param, inst) {
   console.log(param);
  }
 }
},