一、添加插件
在小程序管理后台添加插件。
小程序管理后台地址：https://mp.weixin.qq.com/
设置>第三方设置>插件管理
添加插件，可以直接搜索名称(爸妈搜日历)或者AppID(wx23a9cef3522e4f7c)
二、在小程序app.json文件中引入插件声明
"plugins": {
"calendar": {
"version": "1.3.3",
"provider": "wx23a9cef3522e4f7c"
}
},
三、在需要使用插件的小程序页面的JSON配置文件中，增加配置：
{
"usingComponents": {
"calendar": "plugin://calendar/calendar"
}
}
四、wxml文件写入
<calendar bindselectDate='selectDate' bindnextMonth='nextMonth' bindprevMonth='prevMonth'/>
五、js文件定义方法
/**
* 点击的日期
*/
selectDate: function (e) {
console.log(e)
let clickDay = e.detail.date
wx.showModal({
title: '当前日期',
content: '当前日期：' + clickDay
});
},
/**
* 点击上个月
*/
prevMonth: function (e) {
console.log(e)
const currentYear = e.detail.currentYear;
const currentMonth = e.detail.currentMonth;
wx.showModal({
title: '当前日期',
content: '当前年份：' + currentYear + '年\n当前月份：' + currentMonth + '月'
});
},
/**
* 点击下个月
*/
nextMonth: function (e) {
console.log(e)
const currentYear = e.detail.currentYear;
const currentMonth = e.detail.currentMonth;
wx.showModal({
title: '当前日期',
content: '当前年份：' + currentYear + '年\n当前月份：' + currentMonth + '月'
});
},
说明:js不加，页面也可以呈现日历效果
插件api
日历
介绍：日历基本功能，自定义样式，考勤状态
使用方法：
1、 在微信小程序管理后台——设置——第三方服务，按 AppID（wx23a9cef3522e4f7c）搜索到该插件并申请授权（ps：一般不会出现拒绝的情况。如果申请被拒绝了，请重新申请，有时候管理员手抽点错了，请见谅）。
2、在要使用该插件的小程序 app.json 文件中引入插件声明。
"plugins": {
"calendar": {
"version": "1.3.3", (选取对应的版本号，建议使用最新版本)
"provider": "wx23a9cef3522e4f7c"
}
}
3、在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置：
{
"usingComponents": {
"calendar": "plugin://calendar/calendar"
}
}
4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。
<calendar />
5、说明：默认的用法，将具备以下样式特点：
- 显示当前月份的日历；
- 显示日历标题、显示上下月按钮；
- 显示周标题，周标题默认为 cn 类型，即中文简写；
- 显示主标题 ，默认为cn-n类型
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
curYear |
Number |
当前年份 | 年份 |
curMonth |
Number |
当前月份 | 月份 (1 - 12) |
day |
Number |
当前日 | 日期 (1-31 若日期超过该月天数，月份自动增加) |
header_show |
Boolean |
true |
主标题是否显示 |
next |
Boolean |
true |
是否显示下个月按钮 |
prev |
Boolean |
true |
是否显示下个月按钮 |
remark_show |
Boolean |
false |
备注是否显示 |
remark_style |
String |
headline |
备注类型 |
count_num |
Number |
0 |
备注类型为date 备注信息1 |
count_ber |
Number |
0 |
备注类型为date 备注信息2 |
count_txt |
String |
此处为备注信息 |
备注类型为headline 的备注信息 |
count_txt_user |
Array |
[] 属性有：count_txt和 count_ber
|
备注类型为userdefined的备注信息（仅支持1.0.7版及以上）具体看下面说明 |
weekTitle_show |
Boolean |
true |
周标题是否显示 |
week_type |
String |
cn |
周标题类型 |
active_type |
String |
circle |
选中日期样式 |
circle_show |
Boolean |
true |
日期下方的点是否显示（每过一天添加一个） |
pitch_on |
String |
circle |
日期下方的点样式 |
allshow |
Boolean |
false |
日期下方的线是否全部显示（整个月的显示）（仅支持1.0.8版本及以上） |
appear |
Boolean |
false |
样式线是否显示 |
mystatus |
Array |
[] |
想要的对应日期的状态 （仅支持1.0.4版及以上） |
selectedDate |
String |
"" |
一开始选中的日期、不传入默认为当天（仅支持1.0.7版及以上） |
custom |
Boolean |
false |
是否自定义上下月文字（仅支持1.0.7版及以上） |
switchover |
Array |
['上一月','下一月'] |
自定义的上下月按钮文字 只有custom为true时有效（仅支持1.0.7版及以上） |
isClick |
Boolean |
false |
是否带有主标题（年月份）点击选择日期事件（仅支持1.0.7版及以上） |
txt_type |
String |
cn-n |
主标题类型(年月份)[en、full-en、cn、cn_n]（仅支持1.0.7版及以上） |
weekheight |
Number |
120 |
控制单元格高度 （仅支持1.0.8版本及以上） |
txtlist |
Array |
[] |
自定义日期下方的文字 （仅支持1.0.8版本及以上）具体看下面文字设置说明 （1.2.0版本已废弃此属性，请使用speciallist属性） |
colored |
String |
#a1a1a1 |
设置过去日期的字体颜色, closelaststyle为true才有效（仅支持1.1.1版本及以上） |
closelaststyle |
Boolean |
false |
是否设置过去日期的字体样式（仅支持1.1.1版本及以上） |
speciallist |
Array |
[] |
自定义日期下方的文字，或标注特殊日期的样式（仅支持1.2.0版本及以上） 具体请看下方说明 |
isTodaybtn |
Boolean |
false |
是否显示回到今天的按钮（仅支持1.2.0版本及以上） |
todaybtn_txt |
String |
今天 |
回到今天的按钮显示的文字信息（仅支持1.2.0版本及以上） |
ifRecordClickedDate |
Boolean |
false |
是否记录点击日期 (开启多选模式)（仅支持1.3.0版本及以上） |
clickedDate |
Array |
[] |
记录点击日期的数组 （仅支持1.3.0版本及以上） |
<calendar
cur-year="{{curYear}}"
cur-month="{{curMonth}}"
day="{{day}}"
header_show='{{header_show}}'
prev='{{prev}}'
next='{{next}}'
/>
data: {
curYear: new Date().getFullYear(), // 年份
curMonth: new Date().getMonth() + 1,// 月份 1-12
day: new Date().getDate(), // 日期 1-31 若日期超过该月天数，月份自动增加
header_show: true, // 主标题是否显示
prev: true, // 上一个月按钮是否显示
next: true, // 下一个月按钮是否显示
},
count_txt_user说明（样式看下面样式说明）：
count_txt_user:[
{ 'count_txt': '字段1：', 'count_ber': '内容1' },
{ 'count_txt': '字段2：', 'count_ber': '内容2' },
{ 'count_txt': '字段3：', 'count_ber': '内容3' },
]
remark_style 有效值
| 值 | 说明 |
|---|---|
headline |
普通备注 |
date |
出勤备注 |
userdefined |
自定义备注（多字段）此时需要传count_txt_user自己定义的信息，（仅支持1.0.7版及以上） |
week_type 有效值
| 值 | 说明 |
|---|---|
cn |
显示为：日, 一, 二, 三, 四, 五, 六 |
en |
显示为：S, M, T, W, T, F, S |
full-en |
显示为：Sun, Mon, Tue, Wed, Thu, Fri, Sat |
active_type 有效值
| 值 | 说明 |
|---|---|
circle |
圆形背景 |
square |
方形背景 |
pitch_on 有效值
| 值 | 说明 |
|---|---|
circle |
圆形背景 |
square |
方形背景 |
txt_type 有效值（支持1.0.7版及以上）
| 值 | 说明 |
|---|---|
cn |
显示为：二零一八-七月 |
cn-n |
显示为：2018-07 |
cn-d |
显示为：2018年-07月（仅1.2.0版本及以上支持） |
en |
显示为：2018-Jul |
full-en |
显示为：2018-July |
speciallist属性（支持1.2.0版及以上）
| 值 | 说明 |
|---|---|
date |
自定义的日期 |
background |
自定义的日期的背景样式 |
text |
自定义日期的自定义文字 |
color |
自定义日期的颜色 |
textBgcolor |
自定义文字的背景色 |
this.setData({
speciallist: [
{ date: '2019-09-02', background: 'yellow',text:'文字1',color:'', textBgcolor: '#e19' },
{ date: '2019-09-05', background: 'red', text:'文字2' },
]
})
效果： 
事件
注： 在js写方法 在html传入
| 事件方法 | 说明 |
|---|---|
bindnextMonth |
点击下个月 |
bindprevMonth |
点击上个 |
bindselectDate |
点击日期 |
bindchooseDate |
点击主标题（年月）（支持1.0.7版及以上） |
bindgotoday |
点击返回今天按钮 (支持1.2.0版及以上 ) |
bindrecordClickedDate |
当开启多选模式时，返回已选择的日期数组（支持1.3.0版以上） |
<calendar bindselectDate='selectDate' bindnextMonth='nextMonth' bindprevMonth='prevMonth' bindchooseDate='chooseDate'/>
/**
* 点击上个月
*/
nextMonth: function (e) {
console.log(e)
const currentYear = e.detail.currentYear;
const currentMonth = e.detail.currentMonth;
wx.showModal({
title: '当前日期',
content: '当前年份：' + currentYear + '年\n当前月份：' + currentMonth + '月'
});
},
事件都有一个e ，可以获取一些返回的信息
样式
| 类名 | 说明 |
|---|---|
calendar-style |
日历整体样式 |
header-style |
标题样式 |
weektitle-style |
周标题面板样式 |
datatitle-style |
日期面板样式 |
dotcolor-o |
对应日期的状态为1 日期下方的点颜色变化 目前模拟出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息null:暂无数据 即为出勤样式
|
dotcolor-t |
对应日期的状态为其他 日期下方的点颜色变化 目前模拟出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息null:暂无数据 即为缺勤样式
|
headline-style |
备注类型为headline的备注信息样式 |
datefont-style |
日期字体样式 |
restcolor-style |
单独设置周六日的样式 此时需考虑优先级!important（仅支持1.0.4版及以上）
|
active-coloro |
选中的样式 具体说明请看文档下方的说明（仅支持1.0.5版及以上） |
active-colort |
当前日期的样式 具体说明请看文档下方的说明（仅支持1.0.5版及以上 |
userdefined_style |
备注样式为userdefined 有效，key:value的整体样式 （仅支持1.0.7版及以上
|
counttxt_style |
备注样式为userdefined 有效，key的样式（仅支持1.0.7版及以上）
|
countber_style |
备注样式为userdefined 有效，value的样式（仅支持1.0.7版及以上）
|
txt_style |
日期下方的文字的样式设置 （仅支持1.0.8版本及以上） |
todaybtn-style |
返回今天的按钮的样式（仅支持1.2.0版本及以上） |
注：
- 在wxss自定义写样式，在html传入；注意优先级!important。
例：
/* 主题面板样式 */
.header-style{
background: #188be4 ;
color: #fff;
}
<calendar header-style='header-style' />
样式说明
选中样式
日历插件 有个选中样式（默认选中的是当天），如图：
选中的样式不是当天，如图：
点击选中其他日期时，样式会出现对应的日期上。
.active-coloro {
color: #fff;
background: #188be4;
}
选中样式样式二：
如果想要一下样式，及：点击其他日期时，显现当天的样式，如图：
此时在使用页面的wxss中写下已下代码：
.active-colort {
color: #fff;
background: #b8d5eb;
}
使用时考虑优先级，可自己改变想要的颜色
考勤下方小点的样式
样式如下：
在wxss中定义样式，然后再wxml中传入：
/* 出勤 */
.dotcolor-o{
background-color: #188be4 !mportant;
}
/* 未出勤 */
.dotcolor-t{
background-color: #FF7F50 !mportant;
}
- 分别由
dotcolor-o（正常出勤）和dotcolor-t（病假、事假） 具体区分病假、事假可以在点击事件中获取e ，有相应的的数据。 - 如果为
null（暂无数据）圆点不会显现，circle_show为true也无效。 -
circle_show为true日期下方对应的小点才会显现 ，样式不会显现 - 小点只会显示到当前的日期。每过一天多一个
备注为userdefined 的样式
样式如下：
在使用日历插件文件的wxss中：
/* 备注信息为headline样式 */
.headline-style{
background: #ddcbf3 !important;
display: flex;
justify-content: space-around;
}
/*key的样式*/
.counttxt_style{
color: #333;
}
/*vuale的样式*/
.countber_style{
color: #f39eac;
}
考勤状态说明
由于许多项目可能涉及到考勤情况，因此加入了考勤的状态信息（仅支持1.0.4版以上）。目前考勤只支持传入数字：
0:未出勤 1:正常出勤 2:事假 3:病假 9:休息null:暂无数据；具体的对应需要前端页面做相应处理。
方法：
-
在
js中定义对应的mystatus信息：例如：
data: { mystatus: [], // 状态 状态 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息 }, onLoad:function() { //发起状态请求，在请求成功后，定义mystatus// 例子就不写请求了，直接定义如下 this.setData({ mystatus: [1, 2, 1, 1, 3, 1, 1, 2, 9, 9, 1, null, 1, 2, 1, 9, 9, null, 0, 1, 0, 3, 9, 9, 1, 1, 0, 0, 1, 9] })
}
此时需要注意，如果当天无数据就为null
-
在
wxml中： -
<calendar mystatus='{{mystatus}}' circle_show="{{true}}"/>circle_show为true日期下方对应的小点才会显现 ，同时需要注意日期所占的高度时候足够，可以通过weekheight进行设置，具体的样式说明请看上方的样式说明-
在
wxss中定义：/* 出勤 */ .dotcolor-o{ background-color: #188be4 !mportant; } /* 未出勤 */ .dotcolor-t{ background-color: #FF7F50 !mportant; }
- 可以在点击事件中查看考勤情况
selectDate:function (e) { // console.log(e.detail.status) const date = e.detail.date; const week = e.detail.week; var statustext; if(e.detail.status == 1){ statustext = "正常出勤" } else if(e.detail.status == 0) { statustext = "未出勤" } else if(e.detail.status == 2){ statustext = "事假" } else if(e.detail.status == 3) { statustext = "病假" } else if(e.detail.status == 9) { statustext = "休息" } else{ statustext = "" } wx.showModal({ title: '信息', content: '当前时间：' + date + ' ' + week + ' ' + statustext }); },效果：
文字设置说明
方法1：
(1.2.0版以废弃此方法,可以使用speciallist属性)-
在
js中定义对应的txtlist信息：例如：
data: { txtlist: [], }, onLoad:function() { //发起状态请求，在请求成功后，定义txtlist// 例子就不写请求了，直接定义如下 this.setData({ txtlist: ['', '', '', '文字1', '', '', '文字2', '', '', '',] })
}
此时需要注意，如果当天无数据就为' ' （空字符串）
-
-
在
wxml中： -
<calendar txtlist='{{txtlist}}' txt_style='{{txt_style}}' />txt_style设置文字的大小颜色效果：
方法2：
(1.2.0及以上版本支持 )-
在
js中定义对应的speciallist信息：例如：
data: { speciallist: [], }, onLoad:function() { this.setData({ speciallist: [ { date: '2018-11-02', background: 'yellow', text:'文字1',color:'' }, { date: '2018-11-05', background: 'red', text: '文字2' }, { date: '2018-11-11', background: 'bule', text: '文字' }, { date: '2018-11-12', background: 'orange', text: '文字' }, { date: '2018-11-06', background: 'white', text: '文字' }, ], }) }
- 在
wxml中：
<calendar speciallist='{{speciallist}}' txt_style='{{txt_style}}' />txt_style设置文字的大小颜色效果：
文章来源：https://www.toymoban.com/news/detail-495987.html
文章来源地址https://www.toymoban.com/news/detail-495987.html- 可以在
selectDate点击事件中得到文字信息
-
到了这里，关于微信小程序日历插件用法-举例为(爸妈搜日历)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
