feat(calendar): synchronize the vant calendar component, and add the attribute of custom week starting from the day of the week (#4211) (#4223)

* feat(calendar): synchronize the vant calendar component, and add the attribute of custom week starting from the day of the week

* feat(calendar): supplement to the description document of calendar components

* feat(calendar): remove the validator of firstDayOfWeek attribute

example/pages/calendar/index.js

@@ -13,7 +13,7 @@ Page({
       customConfirm: [],
       customRange: null,
       customDayText: [],
-      customPosition: null
+      customPosition: null,
     },
     type: 'single',
     round: true,
@@ -32,7 +32,8 @@ Page({
     tiledMinDate: new Date(2012, 0, 10).getTime(),
     tiledMaxDate: new Date(2012, 2, 20).getTime(),
     confirmText: undefined,
-    confirmDisabledText: undefined
+    confirmDisabledText: undefined,
+    firstDayOfWeek: 0,
   },
 
   onConfirm(event) {
@@ -40,7 +41,9 @@ Page({
     this.setData({ showCalendar: false });
 
     this.setData({
-      [`date.${this.data.id}`]: Array.isArray(event.detail) ? event.detail.map(date => date.valueOf()) : event.detail.valueOf()
+      [`date.${this.data.id}`]: Array.isArray(event.detail)
+        ? event.detail.map((date) => date.valueOf())
+        : event.detail.valueOf(),
     });
   },
 
@@ -83,7 +86,7 @@ Page({
       formatter: null,
       showConfirm: true,
       confirmText: '确定',
-      confirmDisabledText: null
+      confirmDisabledText: null,
     });
   },
 
@@ -93,7 +96,7 @@ Page({
     const data = {
       id,
       type,
-      showCalendar: true
+      showCalendar: true,
     };
 
     switch (id) {
@@ -150,5 +153,5 @@ Page({
     }
 
     return day;
-  }
+  },
 });

example/pages/calendar/index.wxml

@@ -112,6 +112,7 @@
     show-confirm="{{ false }}"
     min-date="{{ tiledMinDate }}"
     max-date="{{ tiledMaxDate }}"
+    first-day-of-week="{{ firstDayOfWeek }}"
     class="tiled-calendar"
   />
 </demo-block>
@@ -129,6 +130,7 @@
   show-confirm="{{ showConfirm }}"
   confirm-text="{{ confirmText }}"
   confirm-disabled-text="{{ confirmDisabledText }}"
+  first-day-of-week="{{ firstDayOfWeek }}"
   bind:confirm="onConfirm"
   bind:select="onSelect"
   bind:unselect="onUnselect"

packages/calendar/README.md

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

packages/calendar/calendar.wxml

@@ -4,6 +4,7 @@
     showTitle="{{ showTitle }}"
     subtitle="{{ subtitle }}"
     showSubtitle="{{ showSubtitle }}"
+    firstDayOfWeek="{{ firstDayOfWeek }}"
   >
     <slot name="title" slot="title"></slot>
   </header>
@@ -31,6 +32,7 @@
       showSubtitle="{{ showSubtitle }}"
       allowSameDay="{{ allowSameDay }}"
       showMonthTitle="{{ index !== 0 || !showSubtitle }}"
+      firstDayOfWeek="{{ firstDayOfWeek }}"
       bind:click="onClickDay"
     />
   </scroll-view>

packages/calendar/components/header/index.ts

@@ -9,11 +9,31 @@ VantComponent({
     subtitle: String,
     showTitle: Boolean,
     showSubtitle: Boolean,
+    firstDayOfWeek: {
+      type: Number,
+      observer: 'initWeekDay',
+    },
   },
 
   data: {
-    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    weekdays: [] as Array<string>,
   },
 
-  methods: {},
+  created() {
+    this.initWeekDay();
+  },
+
+  methods: {
+    initWeekDay() {
+      const defaultWeeks = ['日', '一', '二', '三', '四', '五', '六'];
+      const firstDayOfWeek = this.data.firstDayOfWeek || 0;
+
+      this.setData({
+        weekdays: [
+          ...defaultWeeks.slice(firstDayOfWeek, 7),
+          ...defaultWeeks.slice(0, firstDayOfWeek),
+        ],
+      });
+    },
+  },
 });

packages/calendar/components/month/index.ts

@@ -42,6 +42,10 @@ VantComponent({
       type: null,
       observer: 'setDays',
     },
+    firstDayOfWeek: {
+      type: Number,
+      observer: 'setDays',
+    },
     allowSameDay: Boolean,
     showSubtitle: Boolean,
     showMonthTitle: Boolean,

packages/calendar/components/month/index.wxml

@@ -14,7 +14,7 @@
     <view
       wx:for="{{ days }}"
       wx:key="index"
-      style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color) }}"
+      style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek) }}"
       class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }}"
       data-index="{{ index }}"
       bindtap="onClick"

packages/calendar/components/month/index.wxs

@@ -7,9 +7,12 @@ function getMark(date) {
 
 var ROW_HEIGHT = 64;
 
-function getDayStyle(type, index, date, rowHeight, color) {
+function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
   var style = [];
-  var offset = getDate(date).getDay();
+  var current = getDate(date).getDay() || 7;
+  var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
+               current === 7 && firstDayOfWeek === 0 ? 0 :
+               (current - firstDayOfWeek);
 
   if (index === 0) {
     style.push(['margin-left', (100 * offset) / 7 + '%']);

packages/calendar/index.ts

@@ -110,6 +110,10 @@ VantComponent({
       type: null,
       value: null,
     },
+    firstDayOfWeek: {
+      type: Number,
+      value: 0,
+    },
   },
 
   data: {