To localize the Calendar, set its locale property to an instance of the MindFusion.Common.Locale class. The Locale class provides culture-specific information, including date and time formats and localized strings.

Date and time localization

Localized formatting of dates and times in MindFusion.Scheduling is handled using Intl.DateTimeFormat class (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). To display localized dates and times, create a Locale instance with the ID of the desired locale. Locale-specific settings can be changed, if needed, directly on the locale object:

JavaScript  Copy Code
var deLocale = new Common.Locale("de"); deLocale.dateSettings.firstDayOfWeek = 1; calendar.locale = deLocale;

Different formatting options can be specified by using the various *format properties, exposed by the *Settings classes, e.g. MonthSettings.titleFormat handles the display of the date in the MonthView calendar header. These properties must be set to an Intl.DateTimeFormat options object, e.g.:

JavaScript  Copy Code
calendar.monthSettings.titleFormat =  {  month: 'long', year: 'numeric' };

The following list contains the fields and values that can be set in the options object:

• weekday: 'narrow' | 'short' | 'long'
• era: 'narrow' | 'short' | 'long'
• year: 'numeric' | '2-digit'
• month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long'
• day: 'numeric' | '2-digit'
• hour: 'numeric' | '2-digit'
• minute: 'numeric' | '2-digit'
• second: 'numeric' | '2-digit'
• timeZoneName: 'short' | 'long'
• timeZone: 'Asia/Shanghai'
• hour12: true | false
• hourCycle: 'h11' | 'h12' | 'h23' | 'h24'
• formatMatcher: 'basic' | 'best fit'

Parsing of dates, used in the controls of the appointment forms, cannot be handled by Intl and needs the CLDR data of the corresponding locale. The CLDR data can be obtained by importing the 'cldr-dates-full' package from NPM, UNPKG, or it can be stored in local json files. If you need the parsing functionality, create the Locale instance by passing the imported CLDR data to the static create method of the Locale class:

JavaScript  Copy Code
import deCLDR from 'cldr-dates-full/main/de/ca-gregorian.json'; ... deLocale = Common.Locale.create(deCLDR); calendar.locale = deLocale;

Strings localization

The various captions displayed by the calendar control are stored in a dictionary, exposed by the Locale.strings property. The MindFusion.Scheduling distribution comes with a set of localization files for some of the most commonly used locales:

JavaScript  Copy Code
import deLocaleStrings from '@mindfusion/scheduling/localization/de.json'; ... deLocale.strings = deLocaleStrings;

A specific caption text can be changed directly in the strings dictionary:

JavaScript  Copy Code
calendar.locale.strings.newFormHeader = "Custom Header";