小程序日历组件小程序日历组件小程序日历组件日历组件，表单组件绝逼是前端开发的一个噩梦，尤其要做好一个旅游项目的日历，变态需求特别多，要在小程序中实现携程app的日历，还要兼顾性能问题。

自定义横向/纵向日历

自定义区间大小

自定义日期内容

指定节假日

支持跨月显示
自定义横向/纵向日历自定义区间大小自定义日期内容指定节假日支持跨月显示难点难点难点

懒加载保证渲染性能

通过配置实现纵向日历和横向日历

阳历节日与农历节日与节气

交互，尤其是区域选择的交互
懒加载保证渲染性能通过配置实现纵向日历和横向日历阳历节日与农历节日与节气交互，尤其是区域选择的交互示例代码示例代码示例代码https://github.com/webkixi/aotoo-xquery => pages/calendarhttps://github.com/webkixi/aotoo-xquery 配置说明配置说明配置说明wxml

js基本用法
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: ['2021-12-24', '2021-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);

}

}

}
}
})
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: ['2021-12-24', '2021-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);

}

}

}
}
})$$id
{String} 配置实例的Idmode
{Number} 设置日历的展示模式，1=纵向日历 2=横向日历type
{Number} single=单选日历， range=选择区间， multiple=多选日历total
{Number} 设置日历从今天开始起需要跨多少天，如 180天，或者365天start
{String} 设置起始日期，如：'2021-06-05'date
{Object|Function} 定义附加日期内容disable
{Boolean} 设置全局无效，所有日期均不能交互，权重低于单个日期设置的disablerangeCount
{Number} 当type === 'range'时，rangeCount为区间大小，意味着区间允许选择多少天rangeMode
{Number} 当正在做日期区间选择时，是否允许显示angeCount之外的日期 1=显示， 2=不显示tap
{String} 响应日期元素的tap事件value
{Array} 默认选中的日期，允许数组为空，如果type='single'则应该设置如['2021-06-05']，type='range'应该设置如['2021-06-03', '2021-06-05'], type='multiple'时，数组允许多值data
{Array} 该数据会自动计算日期跨度数量(允许跨年设置)，如果设置了该数据，则total无效，如设置为['2021-11-05', '2021-11-05']，自动计算日期为730天festival
{Boolean|Array} 设置日历假期显示，支持显示指定假期toolbox
{Object} 日历的扩展配置，允许设置一些高级功能，如日历是否允许跨月，特殊的range算法等等toolbox.header
{Boolean} 是否显示日历的头部，一般用于横向日历时为truetoolbox.monthHeader
{Boolean} 是否显示日历的月头部，一般在纵向日历时为truetoolbox.rangeEdge
{Function} 默认值null，type='range'时，自定义range选择算法toolbox.discontinue
{Boolean} 默认false，当日历有data数组构建时，缺少数据的月份会被忽略如何设置如何设置如何设置设置横向、纵向日历
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 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: ['2021-04-03', '2021-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 calendarConfig = {
$$id: 'calendar', //实例id
mode: 1, // 纵向日历
type: 'range', // 区间选择日历
tap: 'onTap', // tap响应方法
total: 365, // 指定日历从今天开始总天数
rangeCount: 28, // 区间范围
rangeMode: 1, // 区间选择是否隐藏非区间的月份
festival: true, // 是否显示节假日
value: ['2021-04-03', '2021-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: ['2021-04-03', '2021-04-09', '2021-04-10'],
methods: { // 响应方法

onTap(e, param, inst) {

console.log(param);

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

onTap(e, param, inst) {

console.log(param);

}
}
}据已知日期自动构建此例中total无效，由两个给定的日期构建了三个月的日历
let calenderConfig = {
$$id: 'calendar',
mode: 2, // 1，纵向日历 2，横向日历
type: 'single', // single：单选 range: 区间选择 multiple：多选
tap: 'onTap', // 回调事件
total: 180, // 所有日期选择天数，此例中无效
data: [{"date":"2021-04-03"}, {"date":"2021-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":"2021-04-03"}, {"date":"2021-06-03"}],
methods: { // 响应方法

onTap(e, param, inst) {

console.log(param);

}
}
},根据已知日期自动构建，忽略无数据月份此例中total无效， 由两个给定的日期构建了三个月的日历
let calenderConfig = {
$$id: 'calendar',
mode: 2, // 1，纵向日历 2，横向日历
type: 'single', // single：单选 range: 区间选择 multiple：多选
tap: 'onTap', // 回调事件
total: 180, // 所有日期选择天数，此例中无效
data: [{"date":"2021-04-03"}, {"date":"2021-06-03"}],
toolbox: {

discontinue: true // 允许构建跨月日历
},
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":"2021-04-03"}, {"date":"2021-06-03"}],
toolbox: {

discontinue: true // 允许构建跨月日历
},
methods: { // 响应方法

onTap(e, param, inst) {

console.log(param);

}
}
},构建节假日日历构建节假日日历构建节假日日历允许指定节假日，指定节假日内容festival: true显示所有组件自带节日festival: ['元旦节', '情人节', '劳动节', '冬至']显示指定假日festival: [{title: '春节', content: {dot: ['新年好']}}]显示指定节日，并附加内容
let calenderConfig = {
$$id: 'calendar',
mode: 1, // 1，纵向日历 2，横向日历
type: 'single', // single：单选 range: 区间选择 multiple：多选
tap: 'onTap', // 回调事件
data: [{"date":"2021-09-03"}, {"date":"2021-12-28"}],
festival: ['教师节', '圣诞节'],
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":"2021-09-03"}, {"date":"2021-12-28"}],
festival: ['教师节', '圣诞节'],
toolbox: {

discontinue: true // 允许忽略无数据月份
},
methods: { // 响应方法

onTap(e, param, inst) {

console.log(param);

}
}
},自定义日期内容自定义日期内容自定义日期内容自定义日期内容有两种方法在data数据配置中加入'dot'数组属性
config.data = [{date: '2021-03-03', content: {dot: ['内容']}}]
config.data = [{date: '2021-03-03', content: {dot: ['内容']}}] 在date属性中配置
// 配置所有日期的附加内容

config.date = {dot: ['自定义内容']}

// 指定日期内容配置

config.date = function(param){
// 通过param的属性写逻辑 param.date, param.year, param.month, param.day ...
if (param.date === '2021-8-13') {

param.dot = ['附加内容']

return param
}
}
// 配置所有日期的附加内容

config.date = {dot: ['自定义内容']}

// 指定日期内容配置

config.date = function(param){
// 通过param的属性写逻辑 param.date, param.year, param.month, param.day ...
if (param.date === '2021-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":"2021-09-03"}, {"date":"2021-12-28"}],
methods: { // 响应方法

onTap(e, param, inst) {

console.log(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":"2021-09-03"}, {"date":"2021-12-28"}],
methods: { // 响应方法

onTap(e, param, inst) {

console.log(param);

}
}
},GITHUB源码GITHUB源码示例小程序示例小程序