"plugins": {"calendar": {"version": "1.3.3", (选取对应的版本号，建议使用最新版本)"provider": "wx23a9cef3522e4f7c"}
}

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

<calendar />

<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-12day: new Date().getDate(), // 日期 1-31 若日期超过该月天数，月份自动增加header_show: true, // 主标题是否显示prev: true, // 上一个月按钮是否显示next: true, // 下一个月按钮是否显示},

count_txt_user:[{ 'count_txt': '字段1：', 'count_ber': '内容1' },{ 'count_txt': '字段2：', 'count_ber': '内容2' },{ 'count_txt': '字段3：', 'count_ber': '内容3' },
]

this.setData({speciallist: [{ date: '2019-09-02', background: 'yellow',text:'文字1',color:'', textBgcolor: '#e19' },{ date: '2019-09-05', background: 'red', text:'文字2'  },]})

事件

注： 在js写方法 在html传入

<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 ，可以获取一些返回的信息

样式

注：

1. 在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;  
}

1. 分别由dotcolor-o（正常出勤）和dotcolor-t（病假、事假） 具体区分病假、事假可以在点击事件中获取e ，有相应的的数据。
2. 如果为null（暂无数据）圆点不会显现，circle_show为true 也无效。
3. circle_show为true 日期下方对应的小点才会显现 ，样式不会显现
4. 小点只会显示到当前的日期。每过一天多一个

备注为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:暂无数据；具体的对应需要前端页面做相应处理。

方法：

1. 在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进行设置，具体的样式说明请看上方的样式说明

  1. 在wxss中定义：

     /* 出勤  */
     .dotcolor-o{background-color: #188be4 !mportant;  
     }
     /* 未出勤  */
     .dotcolor-t{background-color: #FF7F50 !mportant;  
     }
     

  1. 可以在点击事件中查看考勤情况

  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属性)

  1. 在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及以上版本支持 )

  1. 在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: '文字' },],})}
     

  1. 在wxml中：

  <calendar speciallist='{{speciallist}}' txt_style='{{txt_style}}' />
  

  txt_style设置文字的大小颜色

  效果：

  

  

  1. 可以在selectDate点击事件中得到文字信息