• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

极点日历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人参与评论

请发表评论

全部评论

专题导读
上一篇:
Python3的tkinter写一个简单的小程序发布时间:2022-07-18
下一篇:
微信小程序 (page与Components之间的数据传递)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap