Localizing The Calendar
The Nitobi Calendar has the flexibility that allows you to localize the component to your specific region on a component by component basis or globally to all Calendars on a page.
Localize A Single Calendar Instance
The ntb:datepicker tag has 9 attributes that you can use to set the locale:
- longmonthnames - e.g. Janvier, Février, Mars, etc.
- shortmonthnames - e.g. Jan, Fév, Mar, etc.
- longdaynames - e.g. Dimanche, Lundi, Mardi, etc.
- shortdaynames - e.g. Dim, Lun, Mar, etc.
- mindaynames - e.g. D, L, M, etc.
- navconfirmtext - The text for the quick nav button that confirms the date.
- navcanceltext - The text for the quick nav button that cancels the date change.
- navinvalidyeartext - The text displayed when an invalid year is entered in the quick nav panel.
- navoutofrangetext - The text displayed when the date selected in the quick nav panel isn't in the range defined by mindate/maxdate.
The values for these attributes can either be a literal JSON array or the name of an array.
Example:
The following declaration uses a literal JSON array for the longmonthnames attribute:
<ntb:datepicker id="frenchmonthcal" longmonthnames="['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Julliet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']" theme="flex"> <ntb:calendar></ntb:calendar> <ntb:dateinput></ntb:dateinput> </ntb:datepicker>
Localize All Calendar Instances
If you have multiple calendars on a page, you can override static Calendar variables to set the locales of all the Calendars at once.
The properties are as follows:
- nitobi.calendar.DatePicker.longMonthNames
- nitobi.calendar.DatePicker.shortMonthNames
- nitobi.calendar.DatePicker.longDayNames
- nitobi.calendar.DatePicker.shortDayNames
- nitobi.calendar.DatePicker.minDayNames
- nitobi.calendar.DatePicker.navConfirmText
- nitobi.calendar.DatePicker.navCancelText
- nitobi.calendar.DatePicker.navInvalidYearText
- nitobi.calendar.DatePicker.navOutOfRangeText
Example
Include the following code in the <head> section of your page:
<script type="text/javascript"> nitobi.calendar.DatePicker.longMonthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Julliet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']; nitobi.calendar.DatePicker.longDayNames = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samdi']; nitobi.calendar.DatePicker.minDayNames = ["D", "L", "M", "M", "J", "V", "S"]; </script>
page_revision: 1, last_edited: 1224629753|%e %b %Y, %H:%M %Z (%O ago)
