Calendar mode in Vue Schedule component

18 Nov 20187 minutes to read

The Scheduler supports the following two types of calendar mode.

  • Gregorian Calendar
  • Islamic Calendar

Gregorian Calendar

The Schedule component displays Gregorian calendar dates by default. The Gregorian calendar is a solar-based system with 12 months containing 28 to 31 days. Years divisible by four are considered leap years, containing 366 days, while standard years include 365 days.

Islamic Calendar

The Islamic calendar, also known as the Hijri or Muslim calendar, is a lunar-based system consisting of 12 months with 354 or 355 days. Each month begins with the sighting of the new moon; therefore, months may contain either 29 or 30 days. Odd‑numbered months have 30 days, and even‑numbered months have 29 days.

The current Islamic year is 1440 AH. Usually the Gregorian calendar runs from approximately 11 September 2018 to 30 August 2019 for this 1440 AH year.

The Schedule component includes a calendarMode property that switches between Gregorian and Islamic modes. The default value is Gregorian. To display Islamic calendar dates, set calendarMode to Islamic. The following example depicts, how to display the Islamic calendar dates on Scheduler.

To enable Islamic calendar functionality, import the Calendar and Islamic modules from the ej2-calendars package and inject them using the Calendar.Inject method. Additionally, the Islamic calendar requires the following CLDR data to be loaded using the loadCldr function:

  • numberingSystems.json
  • ca-gregorian.json
  • numbers.json
  • timeZoneNames.json
  • ca-islamic.json

For detailed guidance on installing CLDR data, refer to the Internationalization documentation.

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height="550px" width="100%" :enableRtl='enableRtl' calendarMode='Islamic'>
            </ejs-schedule>
        </div>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { loadCldr, setCulture, L10n } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop, MonthAgenda } from "@syncfusion/ej2-vue-schedule";
import { Calendar, Islamic } from '@syncfusion/ej2-calendars';
import { scheduleData } from './datasource.js';
import * as localeText from './locale.json';
import arNumberData from '@syncfusion/ej2-cldr-data/main/ar/numbers.json';
import artimeZoneData from '@syncfusion/ej2-cldr-data/main/ar/timeZoneNames.json';
import arGregorian from '@syncfusion/ej2-cldr-data/main/ar/ca-gregorian.json';
import arIslamic from '@syncfusion/ej2-cldr-data/main/ar/ca-islamic.json';
import arNumberingSystem from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';

Calendar.Inject(Islamic);
L10n.load(localeText);
loadCldr(arNumberData, artimeZoneData, arGregorian, arIslamic, arNumberingSystem);
setCulture('ar');

const selectedDate = new Date(2018, 1, 15);
const eventSettings = { dataSource: scheduleData };
const enableRtl = true;
const views = [
    { option: 'Day' },
    { option: 'TimelineDay' },
    { option: 'Week' },
    { option: 'TimelineWeek' },
    { option: 'Month' },
    { option: 'TimelineMonth' },
    { option: 'Agenda' },
    { option: 'MonthAgenda' }
];

provide('schedule', [Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop, MonthAgenda]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule height="550px" width="100%" :enableRtl='enableRtl' calendarMode='Islamic'>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
import { loadCldr, setCulture, L10n } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth, Resize, DragAndDrop, MonthAgenda } from "@syncfusion/ej2-vue-schedule";
import { Calendar, Islamic } from '@syncfusion/ej2-calendars';
import { scheduleData } from './datasource.js';
import * as localeText from './locale.json';
import arNumberData from '@syncfusion/ej2-cldr-data/main/ar/numbers.json';
import artimeZoneData from '@syncfusion/ej2-cldr-data/main/ar/timeZoneNames.json';
import arGregorian from '@syncfusion/ej2-cldr-data/main/ar/ca-gregorian.json';
import arIslamic from '@syncfusion/ej2-cldr-data/main/ar/ca-islamic.json';
import arNumberingSystem from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';

Calendar.Inject(Islamic);

L10n.load(localeText);
loadCldr(arNumberData, artimeZoneData, arGregorian, arIslamic, arNumberingSystem);
setCulture('ar');

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent
    },
    data() {
        return {
            selectedDate: new Date(2018, 1, 15),
            eventSettings: { dataSource: scheduleData },
            enableRtl: true,
            views: [
                { option: 'Day' },
                { option: 'TimelineDay' },
                { option: 'Week' },
                { option: 'TimelineWeek' },
                { option: 'Month' },
                { option: 'TimelineMonth' },
                { option: 'Agenda' },
                { option: 'MonthAgenda' }
            ],
        }
    },
    provide: {
        schedule: [Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth,
            Resize, DragAndDrop, MonthAgenda]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Refer to the Vue Scheduler feature tour page for comprehensive feature details. Explore the Vue Scheduler example for practical demonstrations of data presentation and interaction.