Globalization

The globalization process combines the translation of component messages with adapting them to specific cultures.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to use the Spanish culture in the KendoReact Scheduler.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Scheduler,
    DayView,
    WeekView,
    MonthView
} from '@progress/kendo-react-scheduler';
import { IntlProvider, load, LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import currencies from 'cldr-numbers-full/main/es/currencies.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';


load(
    likelySubtags,
    currencyData,
    weekData,
    numbers,
    currencies,
    caGregorian,
    dateFields,
    timeZoneNames
);

import esMessages from './es.json';
loadMessages(esMessages, 'es-ES');

import { sampleData, displayDate } from './events-utc.js';

const App = () => {
    return (
        <LocalizationProvider language="es-ES">
            <IntlProvider locale="es" >
                <Scheduler data={sampleData} defaultDate={displayDate}>
                    <DayView />
                    <WeekView />
                    <MonthView />
                </Scheduler>
            </IntlProvider>
        </LocalizationProvider>
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Internationalization

The internationalization (i18n) process applies specific culture formats to a web application.

For more information, refer to:

Messages

Scheduler supports the localization of its messages by utilizing the KendoReact Internationalization package.

The following table lists the built-in message keys and their default values.

Message KeyDefault Value
scheduler.allEventsAll events
scheduler.allDayall day
scheduler.todayToday
scheduler.dayViewTitleDay
scheduler.timelineViewTitleTimeline
scheduler.weekViewTitleWeek
scheduler.workWeekViewTitleWork Week
scheduler.workWeekViewTitleWork Week
scheduler.agendaViewTitleAgenda
scheduler.monthViewTitleMonth
scheduler.deleteTitleDelete
scheduler.showFullDayShow full day
scheduler.showWorkDayShow business hours
scheduler.editOccurrenceEdit current occurrence
scheduler.editSeriesEdit the series
scheduler.editRecurringConfirmationDo you want to edit only this event occurrence or the whole series?
scheduler.editRecurringDialogTitleEdit Recurring Item
scheduler.editSaveSave
scheduler.editCancelCancel
scheduler.editTitleEvent
scheduler.editorEventTitleTitle
scheduler.editorEventStartStart
scheduler.editorEventStartTimeZoneStart Time Zone
scheduler.editorEventEndEnd
scheduler.editorEventEndTimeZoneEnd Time Zone
scheduler.editorEventAllDayAll Day Event
scheduler.editorEventDescriptionDescription
scheduler.editorEventSeparateTimeZonesEnd in different Time Zone
scheduler.editorEventTimeZoneSpecify Time Zone
scheduler.recurrenceEditorRepeatRepeat
scheduler.recurrenceEditorDailyIntervalday(s)
scheduler.recurrenceEditorDailyRepeatEveryRepeat every
scheduler.recurrenceEditorWeeklyIntervalweek(s)
scheduler.recurrenceEditorWeeklyRepeatEveryRepeat every
scheduler.recurrenceEditorWeeklyRepeatOnRepeat on
scheduler.recurrenceEditorMonthlyDayDay
scheduler.recurrenceEditorMonthlyIntervalmonth(s)
scheduler.recurrenceEditorMonthlyRepeatEveryRepeat every
scheduler.recurrenceEditorMonthlyRepeatOnRepeat on
scheduler.recurrenceEditorYearlyOfof
scheduler.recurrenceEditorYearlyRepeatEveryRepeat every
scheduler.recurrenceEditorYearlyRepeatOnRepeat on
scheduler.recurrenceEditorYearlyIntervalyear(s)
scheduler.recurrenceEditorFrequenciesDailyDaily
scheduler.recurrenceEditorFrequenciesMonthlyMonthly
scheduler.recurrenceEditorFrequenciesNeverNever
scheduler.recurrenceEditorFrequenciesWeeklyWeekly
scheduler.recurrenceEditorFrequenciesYearlyYearly
scheduler.recurrenceEditorOffsetPositionsFirstFirst
scheduler.recurrenceEditorOffsetPositionsSecondSecond
scheduler.recurrenceEditorOffsetPositionsThirdThird
scheduler.recurrenceEditorOffsetPositionsFourthFourth
scheduler.recurrenceEditorOffsetPositionsLastLast
scheduler.recurrenceEditorWeekdaysDayDay
scheduler.recurrenceEditorWeekdaysWeekdayWeekday
scheduler.recurrenceEditorWeekdaysWeekenddayWeekend Day
scheduler.recurrenceEditorEndAfterAfter
scheduler.recurrenceEditorEndOccurrenceoccurrence(s)
scheduler.recurrenceEditorEndLabelEnd
scheduler.recurrenceEditorEndNeverNever
scheduler.recurrenceEditorEndOnOn
scheduler.editorDeleteDelete
scheduler.deleteConfirmationAre you sure you want to delete this event?
scheduler.deleteRecurringConfirmationDo you want to delete only this event occurrence or the whole series?
scheduler.deleteOccurrenceDelete current occurrence
scheduler.deleteSeriesDelete the series
scheduler.deleteDialogTitleDelete Event
scheduler.deleteRecurringDialogTitleDelete Recurring Item
scheduler.dateTitleDate
scheduler.timeTitleTime
scheduler.eventTitleEvent
scheduler.editorValidationRequiredField is required.
scheduler.editorValidationStartStart time must be be before End time.
scheduler.editorValidationEndEnd time must be after Start time.
scheduler.noEventsno events

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Scheduler.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Scheduler,
    AgendaView,
    TimelineView,
    DayView,
    WeekView,
    MonthView
} from '@progress/kendo-react-scheduler';
import { sampleData, displayDate } from './events-utc';

const App = () => {
    return (
        <div
            // Or alternatively, the Scheduler will auto-detect rtl mode!
            // style={{ direction: 'rtl' }}
        >
            <Scheduler
                rtl={true}

                defaultDate={displayDate}
                data={sampleData}
            >
                <AgendaView />
                <TimelineView />
                <DayView />
                <WeekView />
                <MonthView />
            </Scheduler>
        </div>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));

Timezones Support

The Scheduler features built-in support for displaying events in different timezones around the world. For more information, refer to the article on timezones.

 /