Globalization and Localization in JavaScript Scheduler

The Scheduler supports date/time formats and cultures so it can adapt to different regions.

Use the Internationalization features to parse and format dates and numbers, and the Localization features to provide translated text and culture-specific strings.

Globalization

The Internationalization library supports formatting and parsing numbers, dates, and times using Unicode CLDR JSON data and provides loadCldr to load culture-specific CLDR files.

By default, the Scheduler uses the English (en-US) culture. To use a different culture:

  • Install the cldr-data package:
npm install cldr-data --save
Culture JSON files are available under `node_modules/cldr-data`.
  • Import the required CLDR files into your application (for example: numberingSystems.json, ca-gregorian.json, numbers.json, timeZoneNames.json).
  • Set the Scheduler locale property to the desired culture.
import './es5-datasource.js';
import './locale.js';
import './ca-gregorian.js';
import './numberingSystems.js';
import './numbers.js';
import './timeZoneNames.js';

ej.base.L10n.load(window.locale);

ej.base.loadCldr(
    window.gregorian,
    window.numbersData,
    window.timeZoneNames,
    window.numberingSystems
);

ej.base.setCulture('fr-CH');

new ej.schedule.Schedule({
    width: '100%',
    height: '550px',
    views: ['Day', 'Week', 'WorkWeek', 'Month'],
    selectedDate: new Date(2018, 1, 15),
    eventSettings: { dataSource: window.scheduleData },
}).appendTo('#Schedule');
<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="module"></script>
</body>

</html>

Localizing static Scheduler text

The Localization library lets you localize static text, date labels, and time modes. Set the Scheduler locale and load translations with L10n.load(...).

For example, the following code defines French translations for all static words used in the Scheduler:

import './es5-datasource.js';
import './locale.js';
import './ca-gregorian.js';
import './numberingSystems.js';
import './numbers.js';
import './timeZoneNames.js';

ej.base.L10n.load(window.locale);

ej.base.loadCldr(
    window.gregorian,
    window.numbersData,
    window.timeZoneNames,
    window.numberingSystems
);

new ej.schedule.Schedule({
    width: '100%',
    height: '550px',
    locale: 'fr-CH',
    views: ['Day', 'Week', 'WorkWeek', 'Month'],
    selectedDate: new Date(2018, 1, 15),
    eventSettings: { dataSource: window.scheduleData },
}).appendTo('#Schedule');
<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="module"></script>
</body>

</html>

The localized strings for the Scheduler and Recurrence Editor are shown below. Access translations for all cultures in the Syncfusion locale repository.

L10n.load({
    "en": {
        "schedule": {
            "day": "Day",
            "week": "Week",
            "workWeek": "Work Week",
            "month": "Month",
            "year": "Year",
            "agenda": "Agenda",
            "weekAgenda": "Week Agenda",
            "workWeekAgenda": "Work Week Agenda",
            "monthAgenda": "Month Agenda",
            "today": "Today",
            "noEvents": "No events",
            "emptyContainer": "There are no events scheduled on this day.",
            "allDay": "All day",
            "start": "Start",
            "end": "End",
            "more": "more",
            "close": "Close",
            "cancel": "Cancel",
            "noTitle": "(No Title)",
            "delete": "Delete",
            "deleteEvent": "Delete Event",
            "deleteMultipleEvent": "Delete Multiple Events",
            "selectedItems": "Items selected",
            "deleteSeries": "Delete Series",
            "edit": "Edit",
            "editSeries": "Edit Series",
            "editEvent": "Edit Event",
            "createEvent": "Create",
            "subject": "Subject",
            "addTitle": "Add title",
            "moreDetails": "More Details",
            "moreEvents": "More Events",
            "save": "Save",
            "editContent": "Do you want to edit only this event or entire series?",
            "deleteRecurrenceContent": "Do you want to delete only this event or entire series?",
            "deleteContent": "Are you sure you want to delete this event?",
            "deleteMultipleContent": "Are you sure you want to delete the selected events?",
            "newEvent": "New Event",
            "title": "Title",
            "location": "Location",
            "description": "Description",
            "timezone": "Timezone",
            "startTimezone": "Start Timezone",
            "endTimezone": "End Timezone",
            "repeat": "Repeat",
            "saveButton": "Save",
            "cancelButton": "Cancel",
            "deleteButton": "Delete",
            "recurrence": "Recurrence",
            "wrongPattern": "The recurrence pattern is not valid.",
            "seriesChangeAlert": "The changes made to specific instances of this series will be cancelled and those events will match the series again.",
            "createError": "The duration of the event must be shorter than how frequently it occurs. Shorten the duration, or change the recurrence pattern in the recurrence event editor.",
            "recurrenceDateValidation": "Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month.",
            "sameDayAlert": "Two occurrences of the same event cannot occur on the same day.",
            "occurenceAlert": "Cannot reschedule an occurrence of the recurring appointment if it skips over a later occurrence of the same appointment.",
            "editRecurrence": "Edit Recurrence",
            "repeats": "Repeats",
            "alert": "Alert",
            "startEndError": "The selected end date occurs before the start date.",
            "invalidDateError": "The entered date value is invalid.",
            "blockAlert": "Events cannot be scheduled within the blocked time range.",
            "ok": "Ok",
            "yes": "Yes",
            "no": "No",
            "occurrence": "Occurrence",
            "series": "Series",
            "previous": "Previous",
            "next": "Next",
            "timelineDay": "Timeline Day",
            "timelineWeek": "Timeline Week",
            "timelineWorkWeek": "Timeline Work Week",
            "timelineMonth": "Timeline Month",
            "expandAllDaySection": "Expand",
            "collapseAllDaySection": "Collapse",
            "timelineYear": "Timeline Year",
            "editFollowingEvent": "Following Events",
            "deleteTitle": "Delete Event",
            "editTitle": "Edit Event",
            "beginFrom": "Begin From",
            "endAt": "End At",
            "searchTimezone": "Search Timezone",
            "noRecords": "No records found"
        },
        "recurrenceeditor": {
            "none": "None",
            "daily": "Daily",
            "weekly": "Weekly",
            "monthly": "Monthly",
            "month": "Month",
            "yearly": "Yearly",
            "never": "Never",
            "until": "Until",
            "count": "Count",
            "first": "First",
            "second": "Second",
            "third": "Third",
            "fourth": "Fourth",
            "last": "Last",
            "repeat": "Repeat",
            "repeatEvery": "Repeat Every",
            "on": "Repeat On",
            "end": "End",
            "onDay": "Day",
            "days": "Day(s)",
            "weeks": "Week(s)",
            "months": "Month(s)",
            "years": "Year(s)",
            "every": "every",
            "summaryTimes": "time(s)",
            "summaryOn": "on",
            "summaryUntil": "until",
            "summaryRepeat": "Repeats",
            "summaryDay": "day(s)",
            "summaryWeek": "week(s)",
            "summaryMonth": "month(s)",
            "summaryYear": "year(s)"
        }
    }
});

Setting date format

Setting date format

The Scheduler supports standard date formats and uses MM/dd/yyyy by default for the en-US locale. If the dateFormat property is not specified, the Scheduler derives the format from the assigned locale.

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'WorkWeek'],
    dateFormat: "yyyy/MM/dd",
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Setting time format

Control how time values are displayed using the timeFormat property. By default the Scheduler uses 12-hour or 24-hour mode depending on the locale (for en-US the default is 12-hour). For custom formats, see the Date and Time Format guidance.

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'WorkWeek'],
    timeFormat: "HH:mm",
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Note: The timeFormat property accepts valid time format strings only.

Displaying Scheduler in RTL mode

The Scheduler layout and behavior can be changed to follow RTL (Right-to-Left) conventions by setting enableRtl to true. This displays the Scheduler layout from right to left. The default value is false.

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    enableRtl: true,
    selectedDate: new Date(2018, 1, 15),
    views: ['Day', 'Week', 'WorkWeek'],
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Refer to the JavaScript Scheduler feature tour for an overview of capabilities, and explore the JavaScript Scheduler example to see practical usage patterns.

See Also