Calendar: add first-day-of-week attribute (#16047)

Author: ziyoung

examples/docs/en-US/calendar.md

@@ -53,10 +53,11 @@ Display date.
 :::
 
 ### Attributes
-| Attribute       | Description   | Type      | Accepted Values       | Default  |
-|-----------------|-------------- |---------- |---------------------- |--------- |
-| value / v-model | binding value | Date/string/number | —            | —        |
-| range           | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array     | —           | —      |
+| Attribute       | Description        | Type      | Accepted Values       | Default  |
+|-----------------|------------------- |---------- |---------------------- |--------- |
+| value / v-model | binding value      | Date/string/number | —            | —        |
+| range           | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array  | —  | —  |
+| first-day-of-week | fisrt day of week| Number    | 1 to 7                |  1       |
 
 ### dateCell scoped slot 参数
 | Attribute       | Description   | Type      | Accepted Values       | Default  |

examples/docs/es/calendar.md

@@ -54,10 +54,11 @@ Muestra fechas.
 :::
 
 ### Atributos
-| Atributo      | Descripción | Tipo   | Valores aceptados | Por defecto |
-|-----------------|-------------- |---------- |---------------------- |--------- |
-| value / v-model | valor vinculante | Date/string/number | —            | —        |
+| Atributo        | Descripción        | Tipo      | Valores aceptados     | Por defecto |
+|-----------------|------------------- |---------- |---------------------- |------------ |
+| value / v-model | valor vinculante   | Date/string/number | —            | —           |
 | range           | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. El tiempo de inicio debe ser el lunes, el tiempo final debe ser el domingo, el período no puede exceder los dos meses. | Array     | —           | —      |
+| first-day-of-week | fisrt day of week| Number    | 1 to 7                |  1          |
 
 ### dateCell scoped slot
 | Atributo      | Descripción | Tipo   | Valores aceptados | Por defecto |

examples/docs/fr-FR/calendar.md

@@ -54,10 +54,11 @@ Affiche un calendrier.
 
 ### Attributs
 
-| Attribut       | Description   | Type      | Valeurs acceptées       | Défaut  |
-|-----------------|-------------- |---------- |---------------------- |--------- |
-| value / v-model | Valeur liée. | Date/string/number | —            | —        |
-| range           | Intervalle de dates, début et fin inclus. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois. | Array     | —           | —      |
+| Attribut          | Description   | Type      | Valeurs acceptées     | Défaut   |
+|------------------ |-------------- |---------- |---------------------- |--------- |
+| value / v-model   | Valeur liée.  | Date/string/number | —            | —        |
+| range             | Intervalle de dates, début et fin inclus. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois. | Array     | —           | —      |
+| first-day-of-week | fisrt day of week| Number | 1 to 7                |  1       |
 
 ### Slot dateCell
 

examples/docs/zh-CN/calendar.md

@@ -57,6 +57,7 @@
 |-----------------|-------------- |---------- |------------ |-------- |
 | value / v-model | 绑定值         | Date/string/number | —  | —      |
 | range           | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array     | —           | —      |
+| first-day-of-week | 周起始日	    | Number    | 1 到 7      |  1     |
 
 ### dateCell scoped slot 参数
 | 参数             | 说明          | 类型      | 可选值        | 默认值  |

packages/calendar/src/date-table.vue

@@ -1,8 +1,9 @@
 <script>
 import fecha from 'element-ui/src/utils/date';
 import { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from 'element-ui/src/utils/date-util';
-export default {
 
+const WEEK_DAYS = getI18nSettings().dayNames;
+export default {
   props: {
     selectedDay: String, // formated date yyyy-MM-dd
     range: {
@@ -14,7 +15,8 @@ export default {
       }
     },
     date: Date,
-    hideHeader: Boolean
+    hideHeader: Boolean,
+    firstDayOfWeek: Number
   },
 
   inject: ['elCalendar'],
@@ -119,7 +121,8 @@ export default {
         const date = this.date;
         let firstDay = getFirstDayOfMonth(date);
         firstDay = firstDay === 0 ? 7 : firstDay;
-        const prevMonthDays = getPrevMonthLastDays(date, firstDay - 1).map(day => ({
+        const firstDayOfWeek = typeof this.firstDayOfWeek === 'number' ? this.firstDayOfWeek : 1;
+        const prevMonthDays = getPrevMonthLastDays(date, firstDay - firstDayOfWeek).map(day => ({
           text: day,
           type: 'prev'
         }));
@@ -135,20 +138,22 @@ export default {
         days = days.concat(nextMonthDays);
       }
       return this.toNestedArr(days);
-    }
-  },
+    },
 
-  data() {
-    const dayNames = getI18nSettings().dayNames;
-    return {
-      DAYS: dayNames.slice(1).concat(dayNames[0])
-    };
+    weekDays() {
+      const start = this.firstDayOfWeek;
+      if (typeof start !== 'number' || start === 0) {
+        return WEEK_DAYS.slice();
+      } else {
+        return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start));
+      }
+    }
   },
 
   render() {
     const thead = this.hideHeader ? null : (<thead>
       {
-        this.DAYS.map(day => <th key={day}>{ day }</th>)
+        this.weekDays.map(day => <th key={day}>{ day }</th>)
       }
     </thead>);
     return (

packages/calendar/src/main.vue

@@ -36,6 +36,7 @@
       <date-table
         :date="date"
         :selected-day="realSelectedDay"
+        :first-day-of-week="realFirstDayOfWeek"
         @pick="pickDay" />
     </div>
     <div
@@ -86,6 +87,10 @@ export default {
           return true;
         }
       }
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1
     }
   },
 
@@ -238,6 +243,13 @@ export default {
         return data;
       }
       return [];
+    },
+
+    realFirstDayOfWeek() {
+      if (this.firstDayOfWeek < 1 || this.firstDayOfWeek > 6) {
+        return 0;
+      }
+      return Math.floor(this.firstDayOfWeek);
     }
   },
 

test/unit/specs/calendar.spec.js

@@ -66,5 +66,24 @@ describe('Calendar', () => {
     expect(/2019.*5/.test(titleEl.innerText)).to.be.true;
     expect(cell.classList.contains('is-selected')).to.be.true;
   });
+
+  it('firstDayOfWeek', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar v-model="value" :first-day-of-week="0"></el-calendar>
+      `,
+      data() {
+        return {
+          value: new Date('2019-04-01')
+        };
+      }
+    }, true);
+    const head = vm.$el.querySelector('.el-calendar-table thead');
+    expect(head.firstElementChild.innerText).to.be.equal('日');
+    expect(head.lastElementChild.innerText).to.be.equal('六');
+    const firstRow = vm.$el.querySelector('.el-calendar-table__row');
+    expect(firstRow.firstElementChild.innerText).to.be.equal('31');
+    expect(firstRow.lastElementChild.innerText).to.be.equal('6');
+  });
 });
 

types/calendar.d.ts

@@ -9,4 +9,7 @@ export declare class ElCalendar extends ElementUIComponent {
 
   /** Specify the display range of the calendar */
   range: DateType[]
+
+  /** First day of week */
+  firstDayOfWeek: number
 }