代码实例:
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~~显示结果如下 :