微信小程序日历插件用法-举例为(爸妈搜日历)

一、添加插件

在小程序管理后台添加插件。

小程序管理后台地址：https://mp.weixin.qq.com/

设置>第三方设置>插件管理

添加插件，可以直接搜索名称(爸妈搜日历)或者AppID(wx23a9cef3522e4f7c)

二、在小程序app.json文件中引入插件声明

"plugins": {
    "calendar": {
      "version": "1.3.3",
      "provider": "wx23a9cef3522e4f7c"
    }
  },
1
2
3
4
5
6

三、在需要使用插件的小程序页面的JSON配置文件中，增加配置：

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
1
2
3
4
5

四、wxml文件写入

  <calendar bindselectDate='selectDate' bindnextMonth='nextMonth' bindprevMonth='prevMonth'/>
1
2

五、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 + '月'
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

说明:js不加，页面也可以呈现日历效果

插件api

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

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
1
2
3
4
5

<calendar />
1

<calendar 
cur-year="{{curYear}}"
cur-month="{{curMonth}}" 
day="{{day}}" 
header_show='{{header_show}}' 
prev='{{prev}}' 
next='{{next}}' 
/>
1
2
3
4
5
6
7
8

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, // 下一个月按钮是否显示
  },
1
2
3
4
5
6
7
8

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

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

事件

注： 在js写方法 在html传入

<calendar bindselectDate='selectDate'  bindnextMonth='nextMonth' bindprevMonth='prevMonth' bindchooseDate='chooseDate'/>
1

  /**
    * 点击上个月
    */
  nextMonth: function (e) {
    console.log(e)
    const currentYear = e.detail.currentYear;
    const currentMonth = e.detail.currentMonth;
    wx.showModal({
      title: '当前日期',
      content: '当前年份：' + currentYear + '年\n当前月份：' + currentMonth + '月'
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

事件都有一个e ，可以获取一些返回的信息

样式

注：

1. 在wxss自定义写样式，在html传入；注意优先级!important。

例：

/* 主题面板样式  */
.header-style{
  background: #188be4 ;  
  color: #fff;
}
1
2
3
4
5

<calendar header-style='header-style' />
1

样式说明

选中样式

日历插件 有个选中样式（默认选中的是当天），如图：

选中的样式不是当天，如图：


点击选中其他日期时，样式会出现对应的日期上。

.active-coloro {
  color: #fff;
  background: #188be4;
}
1
2
3
4

选中样式样式二：

如果想要一下样式，及：点击其他日期时，显现当天的样式，如图：

此时在使用页面的wxss中写下已下代码：

 .active-colort {
    color: #fff;
    background: #b8d5eb;
  }
1
2
3
4

使用时考虑优先级，可自己改变想要的颜色

考勤下方小点的样式

样式如下：

在wxss中定义样式，然后再wxml中传入：

/* 出勤  */
.dotcolor-o{
    background-color: #188be4 !mportant;  
}
/* 未出勤  */
.dotcolor-t{
    background-color: #FF7F50 !mportant;  
}
1
2
3
4
5
6
7
8

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
2
3
4
5
6
7
8
9
10
11
12
13
14

考勤状态说明

由于许多项目可能涉及到考勤情况，因此加入了考勤的状态信息（仅支持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]
   })
   1
   2
   3
   4
   1
   2
   3
   4
   5

}

此时需要注意，如果当天无数据就为null

• 在wxml中：

• <calendar mystatus='{{mystatus}}' circle_show="{{true}}"/>
  1

  circle_show为true 日期下方对应的小点才会显现 ，同时需要注意日期所占的高度时候足够，可以通过weekheight进行设置，具体的样式说明请看上方的样式说明

  1. 在wxss中定义：

     /* 出勤  */
     .dotcolor-o{
         background-color: #188be4 !mportant;  
     }
     /* 未出勤  */
     .dotcolor-t{
         background-color: #FF7F50 !mportant;  
     }
     1
     2
     3
     4
     5
     6
     7
     8

  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
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

  效果：

  

  文字设置说明

  方法1：(1.2.0版以废弃此方法,可以使用speciallist属性)

  1. 在js中定义对应的txtlist信息：

     例如：

      data: {
         txtlist: [], 
       },
      onLoad:function() {
          //发起状态请求，在请求成功后，定义txtlist
      // 例子就不写请求了，直接定义如下
      this.setData({
       txtlist: ['', '', '', '文字1', '', '', '文字2', '', '', '',] 
     })
     1
     2
     3
     4
     1
     2
     3
     4
     5

  }
  

  此时需要注意，如果当天无数据就为' ' （空字符串）

• 在wxml中：

• <calendar txtlist='{{txtlist}}' txt_style='{{txt_style}}' />
  1

  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
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14

  1. 在wxml中：

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

  txt_style设置文字的大小颜色

  效果：

  

  

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