微信练手小程序源码 - 日历(含各种功能组件)

{  "usingComponents": {    "calendar": "/component/calendar/index"  }}

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

// 页面 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;}