自定义日历样式

1、修改日历背景颜色

组件本身是无背景色（透明）的，calendar-style 样式位于组件的根节点。假设要更改日历的背景色，除了在组件的父级容器设置背景色外，也可以通过该样式类进行配置来达到相应的效果。

以上图为例，想要实现图中的背景效果，在wxml文件里指定 calendar-style 的外部样式类为 calendar：

<calendar calendar-style="calendar" />

在wxss文件新增 background-color 属性更改背景颜色等：

.calendar {
    background-color: #eeedff;
    padding-top: 10px;
}

2、修改日历标题样式

header-style样式类位于组件的日历标题。对该组件进行配置，可以改变当前年月，上下月按钮的外观和背景。

在上面例子的基础上，我们在 wxml 文件中新增代码：

<calendar calendar-style="calendar" header-style="header" />

在 WXSS 文件中添加 header 样式：

.header {
    font-size: large; /*修改了标题文字和按钮的大小*/
    color: #605eac;   /*修改了标题文字和按钮的颜色*/
}

3、修改日历主面板

board-style 样式类位于日历组件的主面板，包含了周标题和日期部分。对该组件进行配置，可以改变周标题的样式和日期面板的样式。

紧跟上面的例子，我们对 wxml 文件加多一行代码。

<calendar calendar-style="calendar" header-style="header" board-style="board" />

在 wxss 文件中新增 board 样式

.board {
    background-color: #dddcff;
    color: white;
}

效果如下：