- Gregorian Calendar
- Islamic Calendar
Contact Support
Calendar mode in EJ2 TypeScript Scheduler control
7 Feb 202517 minutes to read
The Scheduler supports the following two types of calendar mode.
- Gregorian Calendar
- Islamic Calendar
Gregorian Calendar
The Scheduler by default displays the gregorian calendar dates which is the most widely used calendar in the world. The Gregorian calendar is a solar calendar which has 12 months with 28 to 31 days each. A year which is divisible by four is said to be a leap year in this calendar mode. A leap year usually has 366 days whereas the regular year has 365 days.
Islamic Calendar
The Islamic Calendar, also known as the Hijri or Muslim calendar, is a lunar calendar which has 12 months in a year with 354 or 355 days. Each month of this calendar denotes the birth of the new lunar cycle and therefore, each month can have 29 or 30 days depending on the visibility of the moon. Here, the odd-numbered months have 30 days and the even 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 Scheduler has a property calendarMode which is used to switch between the gregorian and islamic calendar modes. By default, it is set to Gregorian and to use it with Islamic calendar dates, define the calendarMode of Scheduler to Islamic. The following example depicts, how to display the Islamic calendar dates on Scheduler.
To make use of Islamic calendar in Scheduler, import the Calendar and Islamic module from ej2-calendars package and also inject it using the Calendar.Inject method. Apart from this, it requires the following CLDR data to be loaded using loadCldr function.
- numberingSystems.json
- ca-gregorian.json
- numbers.json
- timeZoneNames.json
- ca-islamic.json
To know more information on, how to install the CLDR data, refer the
Internationalizationtopic.
import {
Schedule, Day, Week, WorkWeek, Month, Agenda, TimelineViews, TimelineMonth,
Resize, DragAndDrop, MonthAgenda
} from '@syncfusion/ej2-schedule';
import { loadCldr, setCulture, L10n } from '@syncfusion/ej2-base';
import { Calendar, Islamic } from '@syncfusion/ej2-calendars';
import { scheduleData } from './datasource.ts';
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';
Schedule.Inject(Day, Week, WorkWeek, Month, TimelineViews, TimelineMonth, Agenda, MonthAgenda, Resize, DragAndDrop);
Calendar.Inject(Islamic);
loadCldr(arNumberData, artimeZoneData, arGregorian, arIslamic, arNumberingSystem);
L10n.load({
"ar": {
"schedule": {
"day": "يوم",
"week": "أسبوع",
"workWeek": "أسبوع العمل",
"month": "شهر",
"year": "سنة",
"agenda": "جدول أعمال",
"weekAgenda": "الأسبوع جدول الأعمال",
"workWeekAgenda": "جدول أعمال أسبوع العمل",
"monthAgenda": "شهر جدول الأعمال",
"today": "اليوم",
"noEvents": "لا أحداث",
"emptyContainer": "لا توجد أحداث مجدولة في هذا اليوم.",
"allDay": "طوال اليوم",
"start": "بداية",
"end": "النهاية",
"more": "أكثر",
"close": "قريب",
"cancel": "إلغاء",
"noTitle": "(بلا عنوان)",
"delete": "حذف",
"deleteEvent": "حذف الحدث",
"deleteMultipleEvent": "حذف أحداث متعددة",
"selectedItems": "العناصر المحددة",
"deleteSeries": "حذف السلسلة",
"edit": "تصحيح",
"editSeries": "تحرير السلسلة",
"editEvent": "تعديل الحدث",
"createEvent": "خلق",
"subject": "موضوع",
"addTitle": "أضف عنوانا",
"moreDetails": "المزيد من التفاصيل",
"moreEvents": "المزيد من الحدث",
"save": "حفظ",
"editContent": "كيف تريد تغيير الموعد في السلسلة؟",
"deleteContent": "هل أنت متأكد من حذف هذا الحدث؟",
"deleteMultipleContent": "هل أنت متأكد من أنك تريد حذف الأحداث المختارة؟",
"newEvent": "حدث جديد",
"title": "عنوان",
"location": "موقعك",
"description": "وصف",
"timezone": "وحدة زمنية",
"startTimezone": "بدء المنطقة الزمنية",
"endTimezone": "نهاية المنطقة الزمنية",
"repeat": "كرر",
"saveButton": "حفظ",
"cancelButton": "إلغاء",
"deleteButton": "حذف",
"recurrence": "تكرار",
"wrongPattern": "نمط التكرار غير صالح.",
"seriesChangeAlert": "هل تريد إلغاء التغييرات التي تم إجراؤها على مثيلات معينة من هذه السلسلة ومطابقتها مع السلسلة بأكملها مرة أخرى؟",
"createError": "يجب أن تكون مدة الحدث أقصر من عدد مرات حدوثها. اختصر المدة ، أو غيّر نمط التكرار في محرر حدث التكرار.",
"sameDayAlert": "لا يمكن أن يحدث تواجد الحدثين في نفس اليوم.",
"occurenceAlert": "لا يمكن إعادة جدولة تكرار الموعد المتكرر إذا تخطى تكرارًا لاحقًا للموعد نفسه.",
"editRecurrence": "تحرير تكرار",
"repeats": "يكرر",
"alert": "إنذار",
"startEndError": "ويحدث تاريخ الانتهاء المحدد قبل تاريخ البدء.",
"invalidDateError": "قيمة التاريخ المدخلة غير صالحة.",
"blockAlert": "لا يمكن جدولة الأحداث ضمن النطاق الزمني المحظور.",
"ok": "حسنا",
"of": "ل",
"yes": "نعم",
"no": "لا",
"occurrence": "حادثة",
"series": "سلسلة",
"previous": "السابق",
"next": "التالى",
"timelineDay": "يوم المخطط الزمني",
"timelineWeek": "الأسبوع الزمني للأسبوع",
"timelineWorkWeek": "الجدول الزمني لأسبوع العمل",
"timelineMonth": "الجدول الزمني الشهر",
"timelineYear": "الجدول الزمني العام",
"editFollowingEvent": "الأحداث التالية",
"deleteTitle": "حذف الحدث",
"editTitle": "تحرير الحدث",
"beginFrom": "تبدأ من",
"endAt": "يغلق عند مستوى",
"expandAllDaySection": "قم بتوسيع القسم طوال اليوم",
"collapseAllDaySection": "طي القسم طوال اليوم",
"searchTimezone": "البحث عن المنطقة الزمنية",
"noRecords": "لا توجد سجلات",
"deleteRecurrenceContent": "هل تريد حذف هذا الحدث فقط أو السلسلة بأكملها؟",
"recurrenceDateValidation": "بعض الأشهر لديها أقل من التاريخ المحدد. في هذه الأشهر ، سيقع الحدوث في التاريخ الأخير من الشهر."
},
"recurrenceeditor": {
"none": "لا شيء",
"daily": "اليومي",
"weekly": "أسبوعي",
"monthly": "شهريا",
"month": "شهر",
"yearly": "سنوي",
"never": "أبدا",
"until": "حتى",
"count": "عد",
"first": "أول",
"second": "ثانيا",
"third": "الثالث",
"fourth": "رابع",
"last": "الاخير",
"repeat": "كرر",
"repeatEvery": "تكرار كل",
"on": "كرر",
"end": "النهاية",
"onDay": "يوم",
"days": "يوم",
"weeks": "أسبوع",
"months": "الشهور",
"years": "سنوات",
"every": "كل",
"summaryTimes": "مرات",
"summaryOn": "على",
"summaryUntil": "حتى",
"summaryRepeat": "يكرر",
"summaryDay": "أيام",
"summaryWeek": "أسابيع",
"summaryMonth": "الشهور",
"summaryYear": "سنوات",
"monthWeek": "شهر اسبوع",
"monthPosition": "موقف الشهر",
"monthExpander": "المتوسع الشهر",
"yearExpander": "المتوسع العام",
"repeatInterval": "أعد الفترة"
}
}
});
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
enableRtl: true,
calendarMode: 'Islamic',
views: [
{ option: 'Day' },
{ option: 'TimelineDay' },
{ option: 'Week' },
{ option: 'TimelineWeek' },
{ option: 'Month' },
{ option: 'TimelineMonth' },
{ option: 'Agenda' },
{ option: 'MonthAgenda' }
],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
setCulture('ar');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.