微信小程序使用日历插件

一，添加插件

1，在你的小程序关联的微信公众平台打开

设置》第三方服务》添加插件

2，直接AppID（wx92c68dae5a8bb046）搜索到该插件并申请授权，授权成功即可在小程序使用

二，小程序使用插件

app.json配置

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

使用插件页面的.json页面引入插件

index.json

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

index.wxml

  <calendar bindnextMonth="next" bindprevMonth="prev" binddateChange="dateChange" binddayClick="dayClick" weeks-type="cn"
  active-type="rounded"
 />

index.js

  //监听点击下个月事件
  next: function (event) {
    console.log(event.detail);
},
//监听点击上个月事件
prev: function (event) {
  console.log(event.detail);
},
// 监听点击日历标题日期选择器事件
dateChange: function (event) {
  console.log(event.detail);
},
//监听点击日历具体某一天的事件
dayClick: function (event) {
  console.log(event.detail);
},

效果图

三，修改样式

1，给点击的日期设置一个背景颜色

wxml

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

  /**
   * 页面的初始数据
   */
  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"
    })

2,标题,插件背景，副标题

wxml

calendar-style="calendar" header-style="header"  board-style="board"

wxss

.calendar {
  background-color:white;  /*背景色为白色*/
  padding-top: 10px;       /*上内边距为 10px*/
  border-radius: 15px;     /*添加边框圆角*/
}


.header {
  font-size: large;
  /* color: #0081ff; */
  color: #59518d;   
}

.board {
  color: #c7cbe2;
  font-weight: bold;
}

具体事件方法和属性可查看文档：

https://github.com/czcaiwj/calendar/wiki/%E6%97%A5%E5%8E%86%E5%B1%9E%E6%80%A7%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3

微信小程序使用日历插件

猜你喜欢