diff --git a/src/calendar/README.md b/src/calendar/README.md
index 0879f3e1d..17dd06ee0 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -82,6 +82,14 @@ Set `show-confirm` to` false` to hide the confirm button. In this case, the `con
```
+### Custom Color
+
+Use `color` prop to custom calendar color
+
+```html
+
+```
+
### Custom Date Range
Use `min-date` and `max-date` to custom date range
@@ -182,6 +190,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| v-model | Whether to show calendar | *boolean* | `false` | - |
| type | Type，can be set to `single` `range` | *string* | `single` | - |
| title | Title of calendar | *string* | `Calendar` | - |
+| color | Color for the bottom button and selected date | *string* | `#ee0a24` | - |
| min-date | Min date | *Date* | Today | - |
| max-date | Max date | *Date* | Six months after the today | - |
| default-date | Default selected date | *Date \| Date[]* | Today | - |
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 83b2f3642..fed74ca2a 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -82,6 +82,14 @@ export default {
```
+### 自定义颜色
+
+通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效
+
+```html
+
+```
+
### 自定义日期范围
通过`min-date`和`max-date`定义日历的范围
@@ -182,6 +190,7 @@ export default {
| v-model | 是否显示日历弹窗 | *boolean* | `false` | - |
| type | 选择类型，`single`表示选择单个日期，
`range`表示选择日期区间 | *string* | `single` | - |
| title | 日历标题 | *string* | `日期选择` | - |
+| color | 颜色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | - |
| min-date | 最小日期 | *Date* | 当前日期 | - |
| max-date | 最大日期 | *Date* | 当前日期的六个月后 | - |
| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index 6a685a9ee..d9a0b65d8 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -8,6 +8,7 @@ export default createComponent({
props: {
date: Date,
type: String,
+ color: String,
minDate: Date,
maxDate: Date,
showMark: Boolean,
@@ -129,7 +130,7 @@ export default createComponent({
}
},
- getDayStyle(index) {
+ getDayStyle(type, index) {
const style = {};
if (index === 0) {
@@ -140,6 +141,14 @@ export default createComponent({
style.height = `${this.rowHeight}px`;
}
+ if (this.color) {
+ if (type === 'start' || type === 'end') {
+ style.background = this.color;
+ } else if (type === 'middle') {
+ style.color = this.color;
+ }
+ }
+
return style;
},
@@ -168,7 +177,7 @@ export default createComponent({
genDay(item, index) {
const { type, topInfo, bottomInfo } = item;
- const style = this.getDayStyle(index);
+ const style = this.getDayStyle(type, index);
const onClick = () => {
if (type !== 'disabled') {
@@ -179,7 +188,9 @@ export default createComponent({
if (type === 'selected') {
return (
-
{item.text}
+
+ {item.text}
+