feat: calendar support firstDayOfWeek (#6468)

src/calendar/README.md

@@ -200,6 +200,14 @@ When selecting a date range, you can use the `max-range` prop to specify the max
 <van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
 ```
 
+### Custom First Day Of Week
+
+Use `first-day-of-week` to custom the start day of week
+
+```html
+<van-calendar first-day-of-week="1" />
+```
+
 ### Tiled display
 
 Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup
@@ -235,6 +243,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | show-confirm | Whether to show confirm button | _boolean_ | `true` |
 | confirm-text | Confirm button text | _string_ | `Confirm` |
 | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
+| first-day-of-week | Set the start day of week | _0-6_ | `0` |
 
 ### Poppable Props
 

src/calendar/README.zh-CN.md

@@ -202,6 +202,14 @@ export default {
 <van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
 ```
 
+### 自定义周起始日
+
+通过`first-day-of-week`属性设置一周从哪天开始
+
+```html
+<van-calendar first-day-of-week="1" />
+```
+
 ### 平铺展示
 
 将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现
@@ -237,6 +245,7 @@ export default {
 | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
 | confirm-text | 确认按钮的文字 | _string_ | `确定` |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
+| first-day-of-week | 设置周起始日 | _0-6_ | `0` |
 
 ### Poppable Props
 

src/calendar/components/Header.js

@@ -9,6 +9,7 @@ export default createComponent({
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
+    firstDayOfWeek: Number,
   },
 
   methods: {
@@ -28,9 +29,16 @@ export default createComponent({
     genWeekDays() {
       const weekdays = t('weekdays');
 
+      const { firstDayOfWeek } = this;
+
+      const renderWeekDays = [
+        ...weekdays.slice(firstDayOfWeek, 7),
+        ...weekdays.slice(0, firstDayOfWeek),
+      ];
+
       return (
         <div class={bem('weekdays')}>
-          {weekdays.map((item) => (
+          {renderWeekDays.map((item) => (
             <span class={bem('weekday')}>{item}</span>
           ))}
         </div>

src/calendar/components/Month.js

@@ -27,6 +27,7 @@ export default createComponent({
     allowSameDay: Boolean,
     showSubtitle: Boolean,
     showMonthTitle: Boolean,
+    firstDayOfWeek: Number,
   },
 
   data() {
@@ -41,7 +42,15 @@ export default createComponent({
     },
 
     offset() {
-      return this.date.getDay();
+      const { firstDayOfWeek } = this;
+
+      const realDay = this.date.getDay();
+
+      if (!firstDayOfWeek) {
+        return realDay;
+      }
+
+      return (realDay + 7 - this.firstDayOfWeek) % 7;
     },
 
     totalDay() {

src/calendar/demo/index.vue

@@ -81,6 +81,12 @@
         :value="formatRange(date.maxRange)"
         @click="show('range', 'maxRange')"
       />
+
+      <van-cell
+        is-link
+        :title="t('firstDayOfWeek')"
+        @click="show('single', 'firstDayOfWeek')"
+      />
     </demo-block>
 
     <demo-block card :title="t('tiledDisplay')">
@@ -108,6 +114,7 @@
       :show-confirm="showConfirm"
       :confirm-text="confirmText"
       :confirm-disabled-text="confirmDisabledText"
+      :first-day-of-week="firstDayOfWeek"
       @confirm="onConfirm"
     />
   </demo-section>
@@ -139,6 +146,7 @@ export default {
       customPosition: '自定义弹出位置',
       customCalendar: '自定义日历',
       confirmDisabledText: '请选择结束时间',
+      firstDayOfWeek: '自定义周起始日',
       tiledDisplay: '平铺展示',
     },
     'en-US': {
@@ -161,6 +169,7 @@ export default {
       customDayText: 'Custom Day Text',
       customPosition: 'Custom Position',
       customCalendar: 'Custom Calendar',
+      firstDayOfWeek: 'Custom First Day Of Week',
       confirmDisabledText: 'Select End Time',
       tiledDisplay: 'Tiled display',
     },
@@ -195,6 +204,7 @@ export default {
       tiledMaxDate: new Date(2012, 2, 20),
       confirmText: undefined,
       confirmDisabledText: undefined,
+      firstDayOfWeek: 0,
     };
   },
 
@@ -210,6 +220,7 @@ export default {
       this.showConfirm = true;
       this.confirmText = undefined;
       this.confirmDisabledText = undefined;
+      this.firstDayOfWeek = 0;
     },
 
     show(type, id) {
@@ -246,6 +257,9 @@ export default {
         case 'maxRange':
           this.maxRange = 3;
           break;
+        case 'firstDayOfWeek':
+          this.firstDayOfWeek = 1;
+          break;
       }
     },
 

src/calendar/index.js

@@ -35,6 +35,13 @@ export default createComponent({
     allowSameDay: Boolean,
     closeOnPopstate: Boolean,
     confirmDisabledText: String,
+    firstDayOfWeek: {
+      type: [Number, String],
+      default: 0,
+      validator: (val) => {
+        return val >= 0 && val <= 6;
+      },
+    },
     type: {
       type: String,
       default: 'single',
@@ -137,6 +144,10 @@ export default createComponent({
 
       return !currentDate;
     },
+
+    dayOffset() {
+      return this.firstDayOfWeek ? this.firstDayOfWeek % 7 : 0;
+    },
   },
 
   watch: {
@@ -379,6 +390,7 @@ export default createComponent({
           showSubtitle={this.showSubtitle}
           allowSameDay={this.allowSameDay}
           showMonthTitle={showMonthTitle}
+          firstDayOfWeek={this.dayOffset}
           onClick={this.onClickDay}
         />
       );
@@ -432,6 +444,7 @@ export default createComponent({
             scopedSlots={{
               title: () => this.slots('title'),
             }}
+            firstDayOfWeek={this.dayOffset}
           />
           <div ref="body" class={bem('body')} onScroll={this.onScroll}>
             {this.months.map(this.genMonth)}

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

@@ -51,6 +51,10 @@ exports[`renders demo correctly 1`] = `
       <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>
+    </div>
   </div>
   <div>
     <div class="van-calendar" style="height: 500px;">

src/calendar/test/prop.spec.js

@@ -191,3 +191,24 @@ test('month-show event', async () => {
 
   expect(wrapper.emitted('month-show')).toBeTruthy();
 });
+
+test.only('first day of week', async () => {
+  const wrapper = mount(Calendar, {
+    propsData: {
+      poppable: false,
+      defaultDate: new Date(2020, 7, 1),
+      maxDate: new Date(2020, 7, 30),
+      firstDayOfWeek: 2,
+    },
+  });
+
+  await later();
+
+  expect(wrapper.find('.van-calendar__weekdays').text()[0]).toEqual('二');
+
+  const day = wrapper.find(
+    '.van-calendar__month:first-of-type .van-calendar__day'
+  );
+  expect(day.text()).toEqual('1');
+  expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`);
+});