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

小程序日历

引入组件

在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;
}

作者 | 小飞机飞飞飞