Change the first day of week in Vue Calendar component

11 Jun 20242 minutes to read

The Calendar provides an option to change the first day of the week by using the firstDayOfWeek property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday).

By default, the first day of the week is culture specific.

The following example shows the Calendar with Tuesday as the first day of the week.

Composition API (~/src/App.vue)

<template>
   <div id="app">
      <div class='wrap'>
         <ejs-calendar id='calendar' :firstDayOfWeek='firstDay'></ejs-calendar>
      </div>
   </div>
</template>
<script setup>

import { CalendarComponent as EjsCalendar } from "@syncfusion/ej2-vue-calendars";

const firstDay = 2;

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";

.wrap {
   margin: 0px auto;
   max-width: 250px;
}
</style>

Options API (~/src/App.vue)

<template>
   <div id="app">
      <div class='wrap'>
         <ejs-calendar id='calendar' :firstDayOfWeek='firstDay'></ejs-calendar>
      </div>
   </div>
</template>
<script>

import { CalendarComponent } from "@syncfusion/ej2-vue-calendars";

export default {
   name: "App",
   components: {
      'ejs-calendar': CalendarComponent
   },
   data() {
      return {
         firstDay: 2
      }
   }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";

.wrap {
   margin: 0px auto;
   max-width: 250px;
}
</style>