1.
在微信小程序管理后台——设置——第三方服务,按 AppID(wx92c68dae5a8bb046)搜索到该插件并申请授权。
2.
在要使用该插件的小程序 app.json 文件中引入插件声明。
“plugins”: {
“calendar”: {
“version”: “1.1.0”,
“provider”: “wx92c68dae5a8bb046”
}
}
3.
在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:
{
“usingComponents”: {
“calendar”: “plugin://calendar/calendar”
}
}
4. 嵌入插件
在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。
wxml
<calendar calendar-style="calendar" header-style="calendar-header" board-style="calendar-board" days-color="{{dayStyle}}" weeks-type="cn" binddayClick="dayClick" />
wxss
/* pages/application/reissue/reissue.wxss */
.calendar {
background-color:white; /*背景色为白色*/
padding-top: 10px; /*上内边距为10px*/
color: #38ACFF;
border-radius: 15px; /*添加边框圆角*/
border: 2rpx solid #38ACFF;
-webkit-box-shadow:0 0 10px #38ACFF;
-moz-box-shadow:0 0 10px #38ACFF;
box-shadow:0 0 10px #38ACFF;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
dayStyle: [
{ month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' },
{ month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' }
],
},
//给点击的日期设置一个背景颜色
dayClick: function (event) {
let clickDay = event.detail.day;
let changeDay = `dayStyle[1].day`;
let changeBg = `dayStyle[1].background`;
this.setData({
[changeDay]: clickDay,
[changeBg]: "#84e7d0"
})
},
onLoad:function(){ }
})