El subprograma de WeChat utiliza un complemento de calendario

Uno, agregue complementos

1. Abra en la plataforma pública WeChat asociada con su mini programa

Configuración "Servicios de terceros" Agregar complemento

2. Direct AppID (wx92c68dae5a8bb046) para buscar el complemento y solicitar la autorización. Si la autorización se realiza correctamente, puede utilizarla en el subprograma

 

 

En segundo lugar, el subprograma utiliza complementos

configuración de app.json

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

Utilice la página .json de la página del complemento para presentar el complemento

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

Imagen de efecto

Tres, modifica el estilo

1. Establezca un color de fondo para la fecha en la que se hizo clic.

wxml

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

js

  /**
   * 页面的初始数据
   */
  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. Título, fondo del complemento, subtítulo

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

 

Los métodos y atributos de eventos específicos se pueden encontrar en el documento:

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