微信小程序日历插件 - 极点日历

 

「极点日历」，支持 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、在相应布局页面添加以下语句即可嵌入插件。

<calendar 
   weeks-type="cn"
   days-color="{{dayStyle}}"
   binddayClick="dayClick"
 />

5. 在相应的JS页面添加

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dayStyle: [
      {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'},
      { month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' }
    ],
  },

  //给点击的日期设置一个背景颜色
  dayClick: function (event) {
    let clickDay = event.detail.day;
    let changeBgColor = `dayStyle[0].color`;
    let changeBg = `dayStyle[0].background`;
    let changeDay = `dayStyle[1].day`;
    let changeEndBg = `dayStyle[1].background`;

    this.setData({
      [changeDay]: clickDay,
      [changeBg]:"rgba(255,255,255,0)",
      [changeBgColor]:"black",
      [changeEndBg]: "#AAD4F5"
    })

  },
  onLoad: function () { }
})

效果图