大家下午好，萍子又來了，今天來分享一個常用的需求，那就是日曆的插件的使用。大家都知道，在平時開發的過程中，使用前人寫好的一些插件可以有效的提高開發效率，也給自己省了很多事，確實有些功能自己去寫也稍稍麻煩了一下。最近我們產品給我提的需求就有那麼一條，讓我在小程序中寫一個日曆出來，還要求需要在點擊對應的某一天的時候，日曆下方展示出對應的數據等。然後根絕產品需求的催動，我就去查了一下怎麼實現，果然就又學到了一些知識，現分享出來給大家，希望能幫助到有需要的小夥伴吶。
極點日曆插件的使用
小程序後臺添加插件
首先在微信小程序後臺——設置——第三方服務，按AppID搜索到該插件並申請授權。
插件AppID：wx92c68dae5a8bb046
如圖，搜上方我寫的那個AppID，添加上就好了，我之前已經添加過了,這一步很簡單啊。
相關配置
然後在使用的時候肯定不是我們在後臺添加了插件了，前端就能用的，勢必需要在小程序項目裏有一些配置需要寫進去才行。
我現在手頭上的項目是在wepyjs的基礎上做的，我就以這個爲基礎，原生小程序的引用大同小異。
上圖是我現在項目的目錄，我就是在這個項目中使用的這個日曆插件，所以剛纔配置的後臺也是這個小程序的後臺。
第一步，在app.wpy文件中配置引入插件的聲明：
plugins: {
calendar: {
'version': "1.1.3",
'provider': "wx92c68dae5a8bb046"
}
},
如圖所示，引入插件的聲明和window同級即可，記得同級哦，不要放錯地方了。
第二步，在需要使用該插件的小程序頁面中的config中做以下配置：
usingComponents:{
calendar: "plugin://calendar/calendar",
},
插件的使用
以上的東西都配置完了之後，就在對應的template中嵌入就可以了，是不是非常的簡單啊。
<calendar
style="width:100%;border:1rpx solid red;"
start-date="2018-01"
end-date="2019-01"
days-color="{{color}}"
weeks-type="full-en"
binddayClick="dayClick"
/>
上圖的內容是我自己測試的時候寫的，然後需要注意的是，引入日曆插件只需要用單標籤就行了啊，不用寫雙標籤哦。
效果展示
然後引入就會有以下的效果。
當然了，剛剛引入的是簡單的樣式，不會有什麼顏色啥的，途中的那倆顏色也是我自己加上的。代碼就是上方的 days-color="{{color}}"，這個地方引入的數據color是數組哦，具體的格式如下：
color:[
{
month:'current',//要標記的日期所屬月份，有效值有prev（上個月）,current（當前月），next（下個月）
day:"01",//要標記的日期
color:'white',//日期文字的顏色，格式爲“#HEX”或CSS顏色名
background:"pink",//日期單元格的顏色，格式爲“#HEX”或CSS顏色名
},{
month:'current',
day:"05",
color:'white',
background:"skyblue",
},
],
然後也還有其他的很多配置，如圖：
某一天的操作事件
細心的小夥伴不知道發現了嗎，在上面的那個引用代碼中我複製的一個是binddayClick=“dayClick”，這個就是點擊某一天的時候觸發的函數，然後根據需求進行不用的操作就行了。
dayClick(e){
console.log("點擊日曆的某一天：",e)
}
如圖所示，我點擊了12月1號，然後控制檯就會打印對應的信息，是不是很方便啊。當然了也肯定會有其他的方法可供使用，具體的小夥伴們可以看下方的這個git文檔哦，這可是我發現的寶貝文檔呢，很受用，在此也鳴謝此git的小主人，蟹蟹。
參考文檔：
https://github.com/czcaiwj/calendar/wiki
好了，日曆插件的引用我已經說完了哦，還是那句話，可以幫到各位需要的小夥伴，加油。