WeChat applet uses calendar plug-in

One, add plug-ins

1. Open on the WeChat public platform associated with your mini program

Settings "Third Party Services" Add Plug-in

2. Direct AppID (wx92c68dae5a8bb046) to search for the plug-in and apply for authorization. If authorization is successful, you can use it in the applet

Second, the applet uses plug-ins

app.json configuration

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

Use the .json page of the plugin page to introduce the plugin

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);
},

Effect picture

Three, modify the style

1. Set a background color for the clicked date

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. Title, plug-in background, subtitle

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;
}

Specific event methods and attributes can be found in the document:

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

WeChat applet uses calendar plug-in

Guess you like