小程序日历组件开发 (微信小程序开发)

简介

wx_calendar 是一款开源WX小程序日历组件,WX小程序开发者可以了解下。

github 地址:

https://github.com/treadpit/wx_calendar

github star: 1.2K+

最新版本:1.4.0,MIT 协议

效果截图

小程序日历组件,微信小程序日历讲解

快速上手

引入组件

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

更多自定义配置及功能请查阅日历文档(文档地址如下:)

https://treadpit.github.io/wx_calendar/

文档主要内容:

日历组件(Component)

  • 1. 引入组件
  • 2. 日历组件初始化
  • 3. 自定义配置
  • 4. 多日历组件
  • 日历事件使用说明
  • 5. 跳转至指定日期
  • 6. 获取当前选择的日期
  • 7. 获取日历当前年月
  • 8. 取消所有选中日期
  • 9. 待办事项
  • 10. 禁选指定日期
  • 11. 指定可选日期
  • 12. 设置选中多个日期
  • 13. 获取当前日历面板日期
  • 14. 周月视图切换
  • 15. 设置日历配置
  • 16. 获取日历配置
  • 17. 日期范围选择
  • 18. 设置指定日期样式
  • 日历模板(Template)

  • 1. 引入wxml及wxss
  • 2. 日历模板初始化
  • 日期选择器(Template)

  • 1. 引入wxml及wxss
  • 2. 日期选择器初始化
  • 3. 日期选择器配置
  • PS

    这个开源虽然是一个WX小程序日历组件,但是文档很详细,作者也很及时更新,可以说是一个不错的WX小程序开源项目,WX开发者有用的日历组件的可以重点关注下此组件。