AppID | wx92c68dae5a8bb046 |
版本号 | 1.1.0 |
"plugins": {
"calendar": {
"version": "1.1.0",
"provider": "wx92c68dae5a8bb046"
}
}
{
"usingComponents": {
"calendar": "plugin://calendar/calendar"
}
}
<calendar />
显示当前月份的日历;
显示日历标题、显示上下月按钮;
显示周标题,周标题默认为 en 类型,即英文字母;
不显示非当前月的日期;
不显示农历;
插件占据文档流的整块宽度,即 width:100%。
calendar-style
样式位插组件的根节点。假设要更改日历的背景色,除了插件件的父级容器设置背景色外,也可以通过该样式类进行配置来达到相应的效果。
calendar-style
的外部样式类为 calendar:
<calendar calendar-style="calendar" />
.calendar {
background-color:white; /*背景色为白色*/
padding-top: 10px; /*上内边距为10px*/
border-radius: 15px; /*添加边框圆角*/
}
header-style
样式类位于组件的日历标题。对该组件进行配置,可以改变当前年月,上下月按钮的外观和背景。
<calendar calendar-style="calendar" header-style="header" />
.header {
font-size: large;
color: #59518d;
}
board-style
样式类位于日历组件的主面板,包含了周标题和日期部分。对该组件进行配置,可以改变周标题的样式和日期面板的样式。
<calendar calendar-style="calendar" header-style="header" board-style="board" />
.board {
color: #c7cbe2;
font-weight: bold;
}
<calendar calendar-style="calendar" header-style="header" board-style="board" next="{{false}}" prev="{{false}}" show-more-days="{{true}}" />
let days_style = new Array;
for (let i = 1; i <= days_count; i++) {
const date = new Date(this.data.year, this.data.month - 1, i);
if (date.getDay() == 0) {
days_style.push({
month: 'current', day: i, color: '#f488cd'
});
} else {
days_style.push({
month: 'current', day: i, color: '#a18ada'
});
}
}
days_style.push(
{month: 'current', day: 12, color: 'white', background: '#b49eeb'},
{month: 'current', day: 17, color: 'white', background: '#f5a8f0'},
{month: 'current', day :20, color: 'white', background: '#aad4f5'},
{month: 'current', day :25, color: 'white', background: '#84e7d0'},
);
<calendar calendar-style="calendar" header-style="header" board-style="board" next="{{false}}" prev="{{false}}" show-more-days="{{true}}" days-color="{{days_style}}" />
建站咨询热线
0898-65367522