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

{
  "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;
}