Building a Localized Region

All components in Iris have the ability to be localized when they have built in content. The following example will help you get started with localization.

window.addEventListener("iris.init.start", function(event) {
    const iris = event.detail.iris;
    const RegionSettings = iris.RegionSettings;
    const regionId = "en-GB";  //Update to the language code you want to register.

    const region = new RegionSettings({
        "calendar.dayofweekabbr.sunday": "su",
        "calendar.dayofweekabbr.monday": "mo",
        "calendar.dayofweekabbr.tuesday": "tu",
        "calendar.dayofweekabbr.wednesday": "we",
        "calendar.dayofweekabbr.thursday": "th",
        "calendar.dayofweekabbr.friday": "fr",
        "calendar.dayofweekabbr.saturday": "sa",
        "calendar.month.january": "January",
        "calendar.month.febuary": "Febuary",
        "calendar.month.march": "March",
        "calendar.month.april": "April",
        "calendar.month.may": "May",
        "calendar.month.june": "June",
        "calendar.month.july": "July",
        "calendar.month.august": "August",
        "calendar.month.september": "September",
        "calendar.month.october": "October",
        "calendar.month.november": "November",
        "calendar.month.december": "December",
        "contentheader.item.ascendinglabel": "{0} (ascending)",
        "contentheader.item.descendinglabel": "{0} (descending)",
        "contentheader.item.neutrallabel": "{0}",
        "contentheader.item.ascendingdirections": "Activate button to sort by {0} ascending.",
        "contentheader.item.descendingdirections": "Activate button to sort by {0} descending.",
        "dropdown.sr.focused": "{0}, {1} Combo box.",
        "dropdown.sr.selected": "{0} selected.",
        "dropdown.sr.unselected": "{0} unselected.",
        "dropdown.sr.active": "{0}, active.",
        "dropdown.sr.disabled": "{0}, active, disabled.",
        "dropdown.multiselect.selected": "{0} items selected",
        "list.sr.active": "{0}, active.",
        "list.sr.disabled": "{0}, active, disabled.",
        "list.sr.selected": "{0} selected.",
        "list.sr.unselected": "{0} unselected.",
        "tab.sr.selected": "{0} selected."
    });

    RegionSettings.regions[regionId] = region;
    RegionSettings.defaultRegionId = regionId;  //Remove this line if you are not wanting the region to be selected.

});

The example above is self contained. This allows you to create multiple javascript files labeled as the region (e.g. 'en-gb.js') and add them as a script tag when needed.