首页 > 微信 > 详细

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

时间:2018-08-30 18:52:55      阅读:2565      评论:0      收藏:0      [点我收藏+]

极点日历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~~显示结果如下 :

技术分享图片

 

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

原文:https://www.cnblogs.com/sese/p/9561844.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!