Calendar: first-day-of-week is not supported when using custom ranges (#16235)

examples/docs/en-US/calendar.md

@@ -52,6 +52,10 @@ Display date.
 ```
 :::
 
+:::tip
+The `first-day-of-week` attribute is not supported when using custom ranges.
+:::
+
 ### Attributes
 | Attribute       | Description        | Type      | Accepted Values       | Default  |
 |-----------------|------------------- |---------- |---------------------- |--------- |

examples/docs/es/calendar.md

@@ -53,6 +53,10 @@ Muestra fechas.
 ```
 :::
 
+:::tip
+The `first-day-of-week` attribute is not supported when using custom ranges.
+:::
+
 ### Atributos
 | Atributo        | Descripción        | Tipo      | Valores aceptados     | Por defecto |
 |-----------------|------------------- |---------- |---------------------- |------------ |

examples/docs/fr-FR/calendar.md

@@ -52,6 +52,10 @@ Affiche un calendrier.
 ```
 :::
 
+:::tip
+The `first-day-of-week` attribute is not supported when using custom ranges.
+:::
+
 ### Attributs
 
 | Attribut          | Description   | Type      | Valeurs acceptées     | Défaut   |

examples/docs/fr-FR/form.md

@@ -394,7 +394,7 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
     prop="email"
     label="Email"
     :rules="[
-      { required: true, message: 'Veuillez entrer l'adresse e-mail', trigger: 'blur' },
+      { required: true, message: 'Veuillez entrer l\'adresse e-mail', trigger: 'blur' },
       { type: 'email', message: 'Veuillez entrer une adresse e-mail valide', trigger: ['blur', 'change'] }
     ]"
   >

examples/docs/zh-CN/calendar.md

@@ -52,6 +52,10 @@
 ```
 :::
 
+:::tip
+使用自定义范围时，不支持 first-day-of-week 属性。
+:::
+
 ### Attributes
 | 参数             | 说明          | 类型      | 可选值        | 默认值  |
 |-----------------|-------------- |---------- |------------ |-------- |

packages/calendar/src/date-table.vue

@@ -141,7 +141,10 @@ export default {
     },
 
     weekDays() {
-      const start = this.firstDayOfWeek;
+      let start = this.firstDayOfWeek;
+      if (this.isInRange) {
+        start = 1;
+      }
       if (typeof start !== 'number' || start === 0) {
         return WEEK_DAYS.slice();
       } else {

test/unit/specs/calendar.spec.js

@@ -85,5 +85,24 @@ describe('Calendar', () => {
     expect(firstRow.firstElementChild.innerText).to.be.equal('31');
     expect(firstRow.lastElementChild.innerText).to.be.equal('6');
   });
+
+  it('if range is specified, firstDayOfWeek will be ignored', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar v-model="value" :first-day-of-week="0" :range="['2019-03-04', '2019-03-24']"></el-calendar>
+      `,
+      data() {
+        return {
+          value: new Date('2019-03-04')
+        };
+      }
+    }, 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('4');
+    expect(firstRow.lastElementChild.innerText).to.be.equal('10');
+  });
 });