小程序日历
引入组件
在json文件中配置组件
{ "usingComponents": { "calendar": "/component/calendar/index" }}
在wxml中引入组件
<calendar calendarConfig="{{calendarConfig}}"></calendar>
自定义配置初始化日历
const conf = { data: { calendarConfig: { // 配置内置主题 theme: 'elegant' } }, doSomeThing() { // 调用日历方法 this.calendar.enableArea(['2018-10-7', '2018-10-28']); }};Page(conf);
日历模板初始化
import initCalendar from '../../template/calendar/index';const conf = { onShow: function() { initCalendar(); // 使用默认配置初始化日历 }};Page(conf);
获取当前选择的日期
const options = { lunar: true // 在配置showLunar为false, 但需返回农历信息时使用该选项}const selectedDay = this.calendar.getSelectedDay(options);// => { year: 2019, month: 12, day: 1}
获取日历当前年月
const ym = this.calendar.getCurrentYM();// => { year: 2019, month: 12}
设置待办事项
// 待办事项中若有 todoText 字段，则会在待办日期下面显示指定文字，如自定义节日等。this.calendar.setTodoLabels({ // 待办点标记设置 pos: 'bottom', // 待办点标记位置 ['top', 'bottom'] dotColor: 'purple', // 待办点标记颜色 circle: true, // 待办圆圈标记设置（如圆圈标记已签到日期），该设置与点标记设置互斥 showLabelAlways: true, // 点击时是否显示待办事项（圆点/文字），在 circle 为 true 及当日历配置 showLunar 为 true 时，此配置失效 days: [ { year: 2018, month: 1, day: 1, todoText: '待办', color: '#f40' // 单独定义代办颜色 (标记点、文字) }, { year: 2018, month: 5, day: 15 } ]});
删除待办事项
this.calendar.deleteTodoLabels([ { year: 2018, month: 5, day: 12 }, { year: 2018, month: 5, day: 15 }]);
设置指定日期样式，该方法只会对日期生效。
组件样式隔离采用了 apply-shared 方案，此模式下页面样式会影响组件样式，使用时需注意页面样式对日历组件样式的覆盖。
// 页面 js 文件const toSet = [ { year: 2019, month: 11, day: 19, class: 'orange-date other-class' // 页面定义的 class，多个 class 由空格隔开 }];this.calendar.setDateStyle(toSet);
.orange-date { background-color: #e8e8e8;}.orange-data .default_normal-date { color: #333;}
更多自定义配置及功能 请点击阅读原文
作者 | 小飞机飞飞飞 | 蚂蚁开源社区会员，小程序工程师
觉得文章不错，点下在看
点击阅读原文，下载DEMO源码
↓↓↓↓
