「极点日历」插件支持 1900 年 1 月 ~ 2099 年 12 月这两百年间的公历和农历显示，插件提供了丰富的可配置属性，包括日期的显示方式、选择范围、是否显示农历等，可自定义来适配不同的使用场景。

添加插件到小程序

1.在微信小程序管理后台——设置——第三方服务，按 AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权。

2.在要使用该插件的小程序 app.json 文件中引入插件声明：

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

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

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

4.在相应的 HTML 页面中添加以下语句即可完成插件的嵌入：

<calendar/>

日历属性

日历事件用法

日历包含下个月事件（nextMonth）、上个月事件（prevMonth）、标题日期选择器事件（dateChange）、点击某一天的事件（dayClick）

wxml文件:

<view class="vg-calendar">
  <calendar cell-size="30" weeks-type="cn" calendar-style="calendar" header-style="header" board-style="board" days-color="{{daysColor}}" binddayClick="onDay" bindnextMonth="onMonthNext" bindprevMonth="onMonthPrev" binddateChange="onDateChange" active-type="square" />
</view>

js文件:

Page({
  data: {

  },
  onLoad(options) {

  },
  onDay: function (e) {
    const { year, month, day } = e.detail;
    let daysColor = new Array;
    //选中颜色
    daysColor.push({
      month: 'current',
      day: day,
      color: '#000000',
      background: '#FF8672'
    });

    this.setData({
      daysColor
    });
  },//下个月
  onMonthNext: function (e) {
    const { currentYear, currentMonth } = e.detail;
  },//上个月
  onMonthPrev: function (e) {
    const { currentYear, currentMonth } = e.detail;
  },
  onDateChange:function(e){
    console.log(e);
  }
})

wxss文件：

.vg-calendar {
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  background-color: #fff;
}

.header {
  color: #000;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  margin: 0rpx 0rpx 20rpx 0rpx !important;
  padding: 40rpx;
}

效果图：

转载：码书网「链接」