添加插件到自己的小程序
1、在微信小程序管理后臺——設(shè)置——第三方服務(wù)识颊，按 AppID（wx92c68dae5a8bb046）搜索到該插件并申請授權(quán)涝焙。
2墓贿、在要使用該插件的小程序 app.json 文件中引入插件聲明。
"plugins": {"calendar": {"version":"1.1.3","provider":"wx92c68dae5a8bb046"}}
3甜熔、在需要使用到該插件的小程序頁面的 JSON 配置文件中圆恤，做以下配置：
{"usingComponents": {"calendar":"plugin://calendar/calendar"}}
4、在相應(yīng)的 HTML 頁面中添加以下語句即可完成插件的嵌入腔稀。
5盆昙、添加插件后效果如圖：
說明：默認的用法，將具備以下樣式特點：
顯示當前月份的日歷焊虏；
顯示日歷標題淡喜、顯示上下月按鈕；
顯示周標題诵闭，周標題默認為 en 類型拆火，即英文字母；
不顯示非當前月的日期涂圆；
不顯示農(nóng)歷们镜；
插件占據(jù)文檔流的整塊寬度，即 width:100%润歉。
日歷屬性接口文檔
calendar?日歷
屬性名類型默認值說明
yearNumber當前年份當前公歷年份
monthNumber當前月份當前公歷月份
dayNumber當前日期當前公歷日期
start-dateString日歷的起始年份格式為YYYY-MM
end-dateString日歷的結(jié)束年份格式為YYYY-MM
headerBooleantrue是否顯示標題
nextBooleantrue是否顯示下個月按鈕
prevBooleantrue是否顯示上個月按鈕
show-more-daysBooleanfalse是否顯示非當前月的日期
weeksBooleantrue是否顯示周標題
weeks-typeStringen周標題類型
days-colorArray[]設(shè)置各日期字體顏色模狭、背景顏色
cell-sizeNumber30設(shè)置日期單元格大小
active-typeStringrounded設(shè)置日期背景形狀
lunarBooleanfalse是否顯示農(nóng)歷
注1：日歷的起始年月最小為1900-01
注2：日歷的結(jié)束年月最大為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數(shù)組項構(gòu)成
days-color數(shù)組的每一項為一個對象，對象有4個屬性褐鸥，意義如下：
屬性名說明
month要標記的日期所屬月份线脚，有效值有prev（上個月）,current（當前月），next（下個月）
day要標記的日期
color日期文字的顏色，格式為“#HEX”或CSS顏色名
background日期單元格的顏色浑侥，格式為“#HEX”或CSS顏色名
日歷事件用法
（1）wxml文件
(2）js文件
Page({next:function(event) {console.log(event.detail);? }})
假設(shè)當前是2018年4月，點擊下個月按鈕寓落，在控制臺會打印出：
{currentMonth:5,currentYear:2018,prevMonth:4prevYear:2018}
（1）wxml文件
（2）js文件
Page({prev:function(event) {console.log(event.detail);? }})
假設(shè)當前是2018年4月，點擊上個月按鈕伶选，在控制臺會打印出：
{currentMonth:3,currentYear:2018,prevMonth:4prevYear:2018}
3史飞、監(jiān)聽點擊日歷標題日期選擇器事件:dateChange
（1）wxml文件
（2）js文件
Page({dateChange:function(event) {console.log(event.detail);? }})
假設(shè)當前是2018年4月，選擇了2015年7月仰税，在控制臺會打印出：
{currentMonth:7,currentYear:2015,prevMonth:4prevYear:2018}
4祸憋、監(jiān)聽點擊日歷具體某一天的事件:dayClick
（1）wxml文件
（2）js文件
Page({dayClick:function(event) {console.log(event.detail);? }})
假設(shè)當前是2018年4月，點擊了4月4日這一天肖卧，在控制臺會打印出：
{background:"transparent"color:""#4a4f74""day:4lunarDay:"十九"lunarMonth:"二月"month:4year:2018}
自定義日歷樣式
組件本身是無背景色（透明）的，calendar-style 樣式位于組件的根節(jié)點塞帐。假設(shè)要更改日歷的背景色拦赠，除了在組件的父級容器設(shè)置背景色外，也可以通過該樣式類進行配置來達到相應(yīng)的效果葵姥。
以上圖為例荷鼠，想要實現(xiàn)圖中的背景效果，在wxml文件里指定 calendar-style 的外部樣式類為 calendar：
在wxss文件新增 background-color 屬性更改背景顏色等：
.calendar{background-color:#eeedff;padding-top:10px;}
header-style樣式類位于組件的日歷標題允乐。對該組件進行配置，可以改變當前年月削咆，上下月按鈕的外觀和背景牍疏。
在上面例子的基礎(chǔ)上，我們在 wxml 文件中新增代碼：
在 WXSS 文件中添加 header 樣式：
.header{font-size:large;/*修改了標題文字和按鈕的大小*/color:#605eac;/*修改了標題文字和按鈕的顏色*/}
board-style 樣式類位于日歷組件的主面板鳞陨，包含了周標題和日期部分。對該組件進行配置瞻惋，可以改變周標題的樣式和日期面板的樣式厦滤。
緊跟上面的例子，我們對 wxml 文件加多一行代碼歼狼。
在 wxss 文件中新增 board 樣式
.board{background-color:#dddcff;color:white;}
效果如下：
