feat(Calendar): add color prop

src/calendar/README.md

@@ -82,6 +82,14 @@ Set `show-confirm` to` false` to hide the confirm button. In this case, the `con
 <van-calendar v-model="show" :show-confirm="false" />
 ```
 
+### Custom Color
+
+Use `color` prop to custom calendar color
+
+```html
+<van-calendar v-model="show" color="#07c160" />
+```
+
 ### 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 | - |

src/calendar/README.zh-CN.md

@@ -82,6 +82,14 @@ export default {
 <van-calendar v-model="show" :show-confirm="false" />
 ```
 
+### 自定义颜色
+
+通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效
+
+```html
+<van-calendar v-model="show" color="#07c160" />
+```
+
 ### 自定义日期范围
 
 通过`min-date`和`max-date`定义日历的范围
@@ -182,6 +190,7 @@ export default {
 | v-model | 是否显示日历弹窗 | *boolean* | `false` | - |
 | type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` | - |
 | title | 日历标题 | *string* | `日期选择` | - |
+| color | 颜色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | - |
 | min-date | 最小日期 | *Date*  | 当前日期 | - |
 | max-date | 最大日期 | *Date*  | 当前日期的六个月后 | - |
 | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |

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 (
           <div style={style} class={bem('day')} onClick={onClick}>
-            <div class={bem('selected-day')}>{item.text}</div>
+            <div class={bem('selected-day')} style={{ background: this.color }}>
+              {item.text}
+            </div>
           </div>
         );
       }

src/calendar/demo/index.vue

@@ -33,6 +33,13 @@
     </demo-block>
 
     <demo-block :title="$t('customCalendar')">
+      <van-cell
+        is-link
+        :title="$t('customColor')"
+        :value="formatRange(date.customColor)"
+        @click="show('range', 'customColor')"
+      />
+
       <van-cell
         is-link
         :title="$t('customRange')"
@@ -69,6 +76,7 @@
     <van-calendar
       v-model="showCalendar"
       :type="type"
+      :color="color"
       :min-date="minDate"
       :max-date="maxDate"
       :formatter="formatter"
@@ -81,6 +89,8 @@
 </template>
 
 <script>
+import { GREEN } from '../../utils/constant';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -94,6 +104,7 @@ export default {
       selectRange: '选择日期区间',
       quickSelect: '快捷选择',
       confirmText: '完成',
+      customColor: '自定义颜色',
       customRange: '自定义日期范围',
       customConfirm: '自定义按钮文字',
       customDayText: '自定义日期文案',
@@ -112,6 +123,7 @@ export default {
       selectRange: 'Select Date Range',
       quickSelect: 'Quick Select',
       confirmText: 'OK',
+      customColor: 'Custom Color',
       customRange: 'Custom Date Range',
       customConfirm: 'Custom Confirm Text',
       customDayText: 'Custom Day Text',
@@ -128,11 +140,13 @@ export default {
         selectRange: [],
         quickSelect1: null,
         quickSelect2: [],
+        customColor: [],
         customConfirm: [],
         customRange: null,
         customDayText: []
       },
       type: 'single',
+      color: undefined,
       minDate: undefined,
       maxDate: undefined,
       formatter: undefined,
@@ -147,6 +161,7 @@ export default {
 
   methods: {
     resetSettings() {
+      this.color = undefined;
       this.minDate = undefined;
       this.maxDate = undefined;
       this.formatter = undefined;
@@ -166,6 +181,9 @@ export default {
         case 'quickSelect2':
           this.showConfirm = false;
           break;
+        case 'customColor':
+          this.color = GREEN;
+          break;
         case 'customConfirm':
           this.confirmText = this.$t('confirmText');
           this.confirmDisabledText = this.$t('confirmDisabledText');

src/calendar/index.js

@@ -18,6 +18,7 @@ import Header from './components/Header';
 export default createComponent({
   props: {
     title: String,
+    color: String,
     value: Boolean,
     formatter: Function,
     defaultDate: [Date, Array],
@@ -228,6 +229,7 @@ export default createComponent({
           refInFor
           date={date}
           type={this.type}
+          color={this.color}
           minDate={this.minDate}
           maxDate={this.maxDate}
           showMark={this.showMark}
@@ -257,6 +259,7 @@ export default createComponent({
             round
             block
             type="danger"
+            color={this.color}
             class={bem('confirm')}
             disabled={this.buttonDisabled}
             onClick={this.onConfirm}

src/calendar/index.less

@@ -101,7 +101,17 @@
 
     &--middle {
       color: @calendar-range-middle-color;
-      background-color: @calendar-range-middle-background-color;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: currentColor;
+        opacity: @calendar-range-middle-background-opacity;
+        content: '';
+      }
     }
 
     &--disabled {

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -23,6 +23,10 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义颜色</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>自定义日期范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>

src/calendar/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`color prop when type is range 1`] = `
+<div class="van-calendar">
+  <div class="van-calendar__header">
+    <div class="van-calendar__header-title">日期选择</div>
+    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
+  </div>
+  <div class="van-calendar__body">
+    <div class="van-calendar__month" style="padding-bottom: 320px;">
+      <div class="van-calendar__days">
+        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
+        <div class="van-calendar__day van-calendar__day--disabled">2</div>
+        <div class="van-calendar__day van-calendar__day--disabled">3</div>
+        <div class="van-calendar__day van-calendar__day--disabled">4</div>
+        <div class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div class="van-calendar__day van-calendar__day--disabled">6</div>
+        <div class="van-calendar__day van-calendar__day--disabled">7</div>
+        <div class="van-calendar__day van-calendar__day--disabled">8</div>
+        <div class="van-calendar__day van-calendar__day--disabled">9</div>
+        <div class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
+        </div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
+        <div class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
+        <div class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
+        </div>
+        <div class="van-calendar__day van-calendar__day--disabled">21</div>
+        <div class="van-calendar__day van-calendar__day--disabled">22</div>
+        <div class="van-calendar__day van-calendar__day--disabled">23</div>
+        <div class="van-calendar__day van-calendar__day--disabled">24</div>
+        <div class="van-calendar__day van-calendar__day--disabled">25</div>
+        <div class="van-calendar__day van-calendar__day--disabled">26</div>
+        <div class="van-calendar__day van-calendar__day--disabled">27</div>
+        <div class="van-calendar__day van-calendar__day--disabled">28</div>
+        <div class="van-calendar__day van-calendar__day--disabled">29</div>
+        <div class="van-calendar__day van-calendar__day--disabled">30</div>
+        <div class="van-calendar__day van-calendar__day--disabled">31</div>
+      </div>
+    </div>
+  </div>
+  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+</div>
+`;
+
+exports[`color prop when type is single 1`] = `
+<div class="van-calendar">
+  <div class="van-calendar__header">
+    <div class="van-calendar__header-title">日期选择</div>
+    <div class="van-calendar__month-title">2010年1月</div>
+    <div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
+  </div>
+  <div class="van-calendar__body">
+    <div class="van-calendar__month" style="padding-bottom: 320px;">
+      <div class="van-calendar__days">
+        <div class="van-calendar__month-mark">1</div>
+        <div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
+        <div class="van-calendar__day van-calendar__day--disabled">2</div>
+        <div class="van-calendar__day van-calendar__day--disabled">3</div>
+        <div class="van-calendar__day van-calendar__day--disabled">4</div>
+        <div class="van-calendar__day van-calendar__day--disabled">5</div>
+        <div class="van-calendar__day van-calendar__day--disabled">6</div>
+        <div class="van-calendar__day van-calendar__day--disabled">7</div>
+        <div class="van-calendar__day van-calendar__day--disabled">8</div>
+        <div class="van-calendar__day van-calendar__day--disabled">9</div>
+        <div class="van-calendar__day">
+          <div class="van-calendar__selected-day" style="background: blue;">10</div>
+        </div>
+        <div class="van-calendar__day van-calendar__day">11</div>
+        <div class="van-calendar__day van-calendar__day">12</div>
+        <div class="van-calendar__day van-calendar__day">13</div>
+        <div class="van-calendar__day van-calendar__day">14</div>
+        <div class="van-calendar__day van-calendar__day">15</div>
+        <div class="van-calendar__day van-calendar__day">16</div>
+        <div class="van-calendar__day van-calendar__day">17</div>
+        <div class="van-calendar__day van-calendar__day">18</div>
+        <div class="van-calendar__day van-calendar__day">19</div>
+        <div class="van-calendar__day van-calendar__day">20</div>
+        <div class="van-calendar__day van-calendar__day--disabled">21</div>
+        <div class="van-calendar__day van-calendar__day--disabled">22</div>
+        <div class="van-calendar__day van-calendar__day--disabled">23</div>
+        <div class="van-calendar__day van-calendar__day--disabled">24</div>
+        <div class="van-calendar__day van-calendar__day--disabled">25</div>
+        <div class="van-calendar__day van-calendar__day--disabled">26</div>
+        <div class="van-calendar__day van-calendar__day--disabled">27</div>
+        <div class="van-calendar__day van-calendar__day--disabled">28</div>
+        <div class="van-calendar__day van-calendar__day--disabled">29</div>
+        <div class="van-calendar__day van-calendar__day--disabled">30</div>
+        <div class="van-calendar__day van-calendar__day--disabled">31</div>
+      </div>
+    </div>
+  </div>
+  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+</div>
+`;
+
 exports[`formatter prop 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">

src/calendar/test/index.spec.js

@@ -375,3 +375,35 @@ test('set show-mark prop to false', async () => {
 
   expect(wrapper.find('.van-calendar__month-mark').element).toBeFalsy();
 });
+
+test('color prop when type is single', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      minDate,
+      maxDate,
+      color: 'blue',
+      poppable: false
+    }
+  });
+
+  await later();
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('color prop when type is range', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      defaultDate: [minDate, maxDate],
+      type: 'range',
+      minDate,
+      maxDate,
+      color: 'blue',
+      poppable: false
+    }
+  });
+
+  await later();
+
+  expect(wrapper).toMatchSnapshot();
+});

src/style/var.less

@@ -150,7 +150,7 @@
 @calendar-range-edge-color: @white;
 @calendar-range-edge-background-color: @red;
 @calendar-range-middle-color: @red;
-@calendar-range-middle-background-color: fade(@red, 10%);
+@calendar-range-middle-background-opacity: .1;
 @calendar-selected-day-size: 54px;
 @calendar-selected-day-color: @white;
 @calendar-info-font-size: @font-size-xs;