git地址
添加插件到自己的小程序
1、在微信小程序管理后台——设置——第三方服务，按 AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权。
2、在要使用该插件的小程序 app.json 文件中引入插件声明。
"plugins": {"calendar": {"version":"1.1.3","provider":"wx92c68dae5a8bb046"}}
3、在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置：
{"usingComponents": {"calendar":"plugin://calendar/calendar"}}
4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。
5、添加插件后效果如图：
说明：默认的用法，将具备以下样式特点：
显示当前月份的日历；
显示日历标题、显示上下月按钮；
显示周标题，周标题默认为 en 类型，即英文字母；
不显示非当前月的日期；
不显示农历；
插件占据文档流的整块宽度，即 width:100%。
日历属性接口文档
calendar 日历
属性名类型默认值说明
yearNumber当前年份当前公历年份
monthNumber当前月份当前公历月份
dayNumber当前日期当前公历日期
start-dateString日历的起始年份格式为YYYY-MM
end-dateString日历的结束年份格式为YYYY-MM
headerBooleantrue是否显示标题
nextBooleantrue是否显示下个月按钮
prevBooleantrue是否显示上个月按钮
show-more-daysBooleanfalse是否显示非当前月的日期
weeksBooleantrue是否显示周标题
weeks-typeStringen周标题类型
days-colorArray[]设置各日期字体颜色、背景颜色
cell-sizeNumber30设置日期单元格大小
active-typeStringrounded设置日期背景形状
lunarBooleanfalse是否显示农历
注1：日历的起始年月最小为1900-01
注2：日历的结束年月最大为2099-12
注3：日期单元格大小单位为px
weeks-type有效值
值说明
en显示为：S,M,T,W,T,F,S
full-en显示为：Sun, Mon, Tue, Wed, Thu, Fri, Sat
cn显示为：日，一，二，三，四，五，六
active-type有效值
值说明
rounded显示为圆形背景
square显示为方形背景
days-color数组项构成
days-color数组的每一项为一个对象，对象有4个属性，意义如下：
属性名说明
month要标记的日期所属月份，有效值有prev（上个月）,current（当前月），next（下个月）
day要标记的日期
color日期文字的颜色，格式为“#HEX”或CSS颜色名
background日期单元格的颜色，格式为“#HEX”或CSS颜色名
日历事件用法
1、监听点击下个月事件:nextMonth
（1）wxml文件
(2）js文件
Page({next:function(event) {console.log(event.detail); }})
假设当前是2018年4月，点击下个月按钮，在控制台会打印出：
{currentMonth:5,currentYear:2018,prevMonth:4prevYear:2018}
2、监听点击上个月事件:prevMonth
（1）wxml文件
（2）js文件
Page({prev:function(event) {console.log(event.detail); }})
假设当前是2018年4月，点击上个月按钮，在控制台会打印出：
{currentMonth:3,currentYear:2018,prevMonth:4prevYear:2018}
3、监听点击日历标题日期选择器事件:dateChange
（1）wxml文件
（2）js文件
Page({dateChange:function(event) {console.log(event.detail); }})
假设当前是2018年4月，选择了2015年7月，在控制台会打印出：
{currentMonth:7,currentYear:2015,prevMonth:4prevYear:2018}
4、监听点击日历具体某一天的事件:dayClick
（1）wxml文件
（2）js文件
Page({dayClick:function(event) {console.log(event.detail); }})
假设当前是2018年4月，点击了4月4日这一天，在控制台会打印出：
{background:"transparent"color:""#4a4f74""day:4lunarDay:"十九"lunarMonth:"二月"month:4year:2018}
自定义日历样式
1、修改日历背景颜色
组件本身是无背景色（透明）的，calendar-style 样式位于组件的根节点。假设要更改日历的背景色，除了在组件的父级容器设置背景色外，也可以通过该样式类进行配置来达到相应的效果。
以上图为例，想要实现图中的背景效果，在wxml文件里指定 calendar-style 的外部样式类为 calendar：
在wxss文件新增 background-color 属性更改背景颜色等：
.calendar{background-color:#eeedff;padding-top:10px;}
2、修改日历标题样式
header-style样式类位于组件的日历标题。对该组件进行配置，可以改变当前年月，上下月按钮的外观和背景。
在上面例子的基础上，我们在 wxml 文件中新增代码：
在 WXSS 文件中添加 header 样式：
.header{font-size:large;/*修改了标题文字和按钮的大小*/color:#605eac;/*修改了标题文字和按钮的颜色*/}
3、修改日历主面板
board-style 样式类位于日历组件的主面板，包含了周标题和日期部分。对该组件进行配置，可以改变周标题的样式和日期面板的样式。
紧跟上面的例子，我们对 wxml 文件加多一行代码。
在 wxss 文件中新增 board 样式
.board{background-color:#dddcff;color:white;}
效果如下：