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

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); } } },

根据已知日期自动构建，忽略无数据月份

此例中total无效， 由两个给定的日期构建了三个月的日历

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); } } },

构建节假日日历

允许指定节假日，指定节假日内容

festival: true

显示所有组件自带节日

festival: ['元旦节', '情人节', '劳动节', '冬至']

显示指定假日

festival: [{title: '春节', content: {dot: ['新年好']}}]

显示指定节日，并附加内容

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); } } },

自定义日期内容

自定义日期内容有两种方法

在data数据配置中加入'dot'数组属性

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

在date属性中配置

// 配置所有日期的附加内容 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); } } },

GITHUB源码

示例小程序

到此这篇关于功能完善的小程序日历组件的实现的文章就介绍到这了,更多相关小程序日历组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: