微信小程序——极点日历使用方法

时间:2018-08-30 19:53:27   收藏:0   阅读:4919

极点日历github项目地址

添加至自己的小程序方法

极点日历属性接口文档

代码实例:

xml:

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

 

wxss:

/* 日历 */
.calendar {
    background-color:white;  
    padding-top: 10px; 
}
.calendar-header{
  font-size: large;
  color: #59518d;
}
.calendar-board{
  color: #c7cbe2;
   font-weight: bold;
}

 

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 changeDay = `dayStyle[1].day`;
    let changeBg = `dayStyle[1].background`;
    this.setData({
      [changeDay]: clickDay,
      [changeBg]: "#84e7d0"
    })
    
  },
  onLoad:function(){ }
})

 

duang~~显示结果如下 :

技术分享图片

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!