一，添加插件

1，在你的小程序关联的微信公众平台打开

设置》第三方服务》添加插件

2，直接AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权，授权成功即可在小程序使用

 

 

二，小程序使用插件

app.json配置

  "plugins": {"calendar": {"version": "1.1.3","provider": "wx92c68dae5a8bb046"}
},

使用插件页面的.json页面引入插件

index.json

"usingComponents": {"calendar": "plugin://calendar/calendar"}

index.wxml

  <calendar bindnextMonth="next" bindprevMonth="prev" binddateChange="dateChange" binddayClick="dayClick" weeks-type="cn"active-type="rounded"/>

index.js

  //监听点击下个月事件next: function (event) {console.log(event.detail);
},
//监听点击上个月事件
prev: function (event) {console.log(event.detail);
},
// 监听点击日历标题日期选择器事件
dateChange: function (event) {console.log(event.detail);
},
//监听点击日历具体某一天的事件
dayClick: function (event) {console.log(event.detail);
},

效果图

三，修改样式

1，给点击的日期设置一个背景颜色

wxml

<calendar weeks-type="cn"days-color="{{dayStyle}}"binddayClick="dayClick"/>

js

  /*** 页面的初始数据*/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 changeBgColor = `dayStyle[0].color`;let changeBg = `dayStyle[0].background`;let changeDay = `dayStyle[1].day`;let changeEndBg = `dayStyle[1].background`;this.setData({[changeDay]: clickDay,[changeBg]:"rgba(255,255,255,0)",[changeBgColor]:"black",[changeEndBg]: "#AAD4F5"})

2,标题,插件背景，副标题

wxml

calendar-style="calendar" header-style="header"  board-style="board"

 wxss

.calendar {background-color:white;  /*背景色为白色*/padding-top: 10px;       /*上内边距为 10px*/border-radius: 15px;     /*添加边框圆角*/
}.header {font-size: large;/* color: #0081ff; */color: #59518d;   
}.board {color: #c7cbe2;font-weight: bold;
}

 

具体事件方法和属性可查看文档：

https://github.com/czcaiwj/calendar/wiki/%E6%97%A5%E5%8E%86%E5%B1%9E%E6%80%A7%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3