小程序极点日历插件

1、配置

极点日历，插件信息，AppID： wx92c68dae5a8bb046，版本号：1.1.0
微信公众平台登录小程序，设置–第三方设置–添加插件–搜索插件（wx92c68dae5a8bb046）并申请授权

2、app.json

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

3、引用

在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置

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

4、wxml

<calendar 
  calendar-style="calendar" header-style="header" board-style="board" 
  weeks-type="cn" next="{{ true }}" prev="{{ true }}" show-more-days="{{ true }}" 
  days-color="{{ days_style }}" lunar="{{ true }}" cell-size="40"
  binddayClick="dayClick" />

5、js

data: {
  days_style: [
    {month: 'current', day: 12, color: 'white', background: '#b49eeb'},
    {month: 'current', day: 17, color: 'white', background: '#f5a8f0'},
    {month: 'current', day :20, color: 'white', background: '#aad4f5'},
    {month: 'current', day :25, color: 'white', background: '#84e7d0'},
  ]
},

// 方法
dayClick (event) {
    console.log('event ===> ', event)
},

6、wxss

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

7、注释

calendar-style=“calendar” ，类名
header-style=“header” ，类名
board-style=“board”，类名
header，Boolean，true，是否显示标题
next，Boolean，true，是否显示下个月按钮
prev，Boolean，true，是否显示上个月按钮
show-more-days，Boolean，false，是否显示非当前月的日期
weeks，Boolean，true，是否显示周标题
weeks-type，String，en英文，cn中文，周标题类型
days-color，Array[]，设置各日期字体颜色、背景颜色
cell-size，Number，30，设置日期单元格大小
active-type，String，rounded，设置日期背景形状
lunar，Boolean，false，是否显示农历