Blazor - Localization
Setup The Project
Follow the Getting Started guide to set up your Blazor Application with Smart UI.
Localization
Localization represents the process of making something local in character or restricting it to a particular place. In the context of Smart HTML Elements, users can localize and change all Texts, Numeric, Date formats and built-in Error messages thrown by the Custom Elements.
Each custom element exposes Messages and Locale properties for localization:
-
Messages- defines the text and messages used in the UI components.
Example:IDictionary<string, object> messages = new Dictionary<string, object>() { { "en", new Dictionary<string, string>() { { "invalidValue", "{{elementType}}, Invalid {{property}} value. {{property}} should be of type {{typeOne}} or {{typeTwo}}." }, { "invalidTimeZone", "{{elementType}}, Invalid timeZone value. TimeZone should be from the IANA time zone database." }, { "incorrectArgument", "{{elementType}}, Incorrect argument {{argumentName}} in method {{methodName}}." }, { "noId", "smartScheduler requires an id in order to save/load/clear a state." }, { "agenda", "Agenda" }, { "agendaPlaceholder", "No events to display" }, { "day", "Day" }, { "week", "Week" }, { "month", "Month" }, { "allDay", "All Day" }, { "timelineDay", "Timeline Day" }, { "timelineWeek", "Timeline Week" }, { "timelineMonth", "Timeline Month" }, { "newEvent", "New Event" }, { "ok", "Ok" }, { "cancel", "Cancel" }, { "delete", "Delete" } } } }; -
Locale- defines the messages from the messages object that will be used in the UI Components localization. By default, the property is set to 'en'.
Example
Here is a full example of Smart Scheduler with Localization:
<div Name="Scheduler">
<Scheduler DataSource="dataRecords" Views="@views" View="SchedulerViewType.Week" ViewSelectorType="SchedulerViewSelectorType.Auto"
HourStart="hourStart" HourEnd="hourEnd" Locale="@locale" Messages="@messages" />
<div class="option">
<h4>Choose Language
<Input Readonly @bind-Value="@locale" DataSource="@inputDataSource" DropDownButtonPosition="DropDownButtonPosition.Right" />
</div>
</div>
@code {
private string locale = "de";
private string[] inputDataSource = new string[] { "bg", "en", "de", "fr" };
private int hourStart = 8;
private int hourEnd = 16;
private List<CustomSchedulerDataSource> dataRecords;
private IEnumerable<SchedulerViewType> views = new List<SchedulerViewType>()
{
SchedulerViewType.Day,
SchedulerViewType.Week,
SchedulerViewType.Month,
SchedulerViewType.Agenda
};
IDictionary<string, object> messages = new Dictionary<string, object>()
{
{
"bg",
new Dictionary<string, string>()
{
{ "invalidValue", "{{elementType}}, Невалидно {{property}} свойство. {{property}} трябва да бъде от тип {{typeOne}} или {{typeTwo}}." },
{ "invalidTimeZone", "{{elementType}}, Невалидна timeZone стойност. TimeZone трябва да бъде валидна IANA часова зона." },
{ "incorrectArgument", "{{elementType}}, Невалиден аргумент {{argumentName}} при извикване на метод {{methodName}}." },
{ "noId", "smartScheduler трябва да има зададено id за да може да записва/зарежда/изтрива състояния." },
{ "agenda", "Дневен график" },
{ "agendaPlaceholder", "Няма Събития За Показване" },
{ "day", "Ден" },
{ "week", "Седмица" },
{ "month", "Месец" },
{ "allDay", "Цял Ден" },
{ "timelineDay", "Дневна Хронология" },
{ "timelineWeek", "Седмична Хронология" },
{ "timelineMonth", "Месечна Хронология" },
{ "newEvent", "Ново събитие" },
{ "ok", "Приеми" },
{ "cancel", "Откажи" },
{ "delete", "Изтрий" },
{ "label", "Име" },
{ "dateStart", "Начална дата" },
{ "dateEnd", "Крайна дата" },
{ "repeat", "Повторение" },
{ "description", "Описание" },
{ "repeatFreq", "Честота на повтаряне" },
{ "repeatInterval", "Повтаряй всеки" },
{ "repeatOn", "Повтаряй на" },
{ "repeatEnd", "Повтаряй" },
{ "repeatEndOption", "Никога" },
{ "repeatEndOnOption", "На" },
{ "repeatEndAfterOption", "След" },
{ "repeatEndAfter", "повторения" },
{ "hidden", "Скрий" },
{ "hourly", "Часово" },
{ "daily", "Дневно" },
{ "weekly", "Седмично" },
{ "monthly", "Месечно" },
{ "yearly", "Годишно" },
{ "repeatConfirm", "Искате ли да промените само текущото събитие или цялата поредица?" },
{ "repeatConfirmLabel", "Промени Повтарящо се Събитие" },
{ "createEvent", "Създай Ново Събитие" },
{ "editEvent", "Промени Събитие" },
{ "editSeries", "Промени Серия" },
{ "eventException", "Събитийно Изключение" },
{ "collector", "още" },
{ "repeatEveryHour", "часове" },
{ "repeatEveryDay", "дни" },
{ "repeatEveryWeek", "седмици" },
{ "repeatEveryMonth", "месеци" },
{ "repeatEveryYear", "години" },
{ "backgroundColor", "Фонов цвят" },
{ "status", "Статут" },
{ "resources", "Ресурси" },
{ "selectPlaceholder", "Изберете..." },
{ "none", "Няма" },
{ "free", "Свободен" },
{ "busy", "Зает" },
{ "tentative", "Несигурен" },
{ "outOfOffice", "Извън офиса" },
{ "exceptions", "Изключения" },
{ "resetExceptions", "Премахни Изключенията" },
{ "notifications", "Нотификации" },
{ "notificationMessage", " започва на " },
{ "today", "Днес" },
{ "agendaShortcut", "А" },
{ "dayShortcut", "Д" },
{ "weekShortcut", "С" },
{ "monthShortcut", "М" },
{ "timelineDayShortcut", "Т+А" },
{ "timelineWeekShortcut", "Т+У" },
{ "timelineMonthShortcut", "Т+П" },
{ "showWeekends", "Покажи уикенда" },
{ "beforeAt", "по-рано в" },
{ "days", "дни" },
{ "weeks", "седмици" },
{ "placeholder", "Добави нотификация" },
{ "now", "Сега" },
{ "dateTabLabel", "Дата" },
{ "timeTabLabel", "Време" },
{ "hours", "Часове" },
{ "minutes", "Минути" },
{ "am", "по" },
{ "pm", "со" }
}
},
{
"en",
new Dictionary<string, string>()
{
{ "invalidValue", "{{elementType}}, Invalid {{property}} value. {{property}} should be of type {{typeOne}} or {{typeTwo}}." },
{ "invalidTimeZone", "{{elementType}}, Invalid timeZone value. TimeZone should be from the IANA time zone database." },
{ "incorrectArgument", "{{elementType}}, Incorrect argument {{argumentName}} in method {{methodName}}." },
{ "noId", "smartScheduler requires an id in order to save/load/clear a state." },
{ "agenda", "Agenda" },
{ "agendaPlaceholder", "No events to display" },
{ "day", "Day" },
{ "week", "Week" },
{ "month", "Month" },
{ "allDay", "All Day" },
{ "timelineDay", "Timeline Day" },
{ "timelineWeek", "Timeline Week" },
{ "timelineMonth", "Timeline Month" },
{ "newEvent", "New Event" },
{ "ok", "Ok" },
{ "cancel", "Cancel" },
{ "delete", "Delete" },
{ "label", "Label" },
{ "dateStart", "Start Date" },
{ "dateEnd", "End Date" },
{ "repeat", "Repeat" },
{ "description", "Description" },
{ "repeatFreq", "Repeat" },
{ "repeatInterval", "Repeat Every" },
{ "repeatOn", "Repeat On" },
{ "repeatEnd", "End Repeat" },
{ "repeatEndOption", "Never" },
{ "repeatEndOnOption", "On" },
{ "repeatEndAfterOption", "After" },
{ "repeatEndAfter", "occurrence(s)" },
{ "hidden", "Hidden" },
{ "hourly", "Hourly" },
{ "daily", "Daily" },
{ "weekly", "Weekly" },
{ "monthly", "Monthly" },
{ "yearly", "Yearly" },
{ "repeatConfirm", "Do you want to edit only the current event or the whole series ?" },
{ "repeatConfirmLabel", "Edit Repeating Event" },
{ "createEvent", "Create a new Event" },
{ "editEvent", "Edit event" },
{ "editSeries", "Edit series" },
{ "eventException", "Event Exception" },
{ "collector", "more" },
{ "repeatEveryHour", "hours" },
{ "repeatEveryDay", "days" },
{ "repeatEveryWeek", "weeks" },
{ "repeatEveryMonth", "months" },
{ "repeatEveryYear", "years" },
{ "backgroundColor", "Background Color" },
{ "status", "Status" },
{ "resources", "Resources" },
{ "selectPlaceholder", "Select..." },
{ "none", "None" },
{ "free", "Free" },
{ "busy", "Busy" },
{ "tentative", "Tentative" },
{ "outOfOffice", "Out of Office" },
{ "exceptions", "Exceptions" },
{ "resetExceptions", "Reset Exceptions" },
{ "notifications", "Notification(s)" },
{ "notificationMessage", "is starting on" },
{ "today", "Today" },
{ "agendaShortcut", "A" },
{ "dayShortcut", "D" },
{ "weekShortcut", "W" },
{ "monthShortcut", "M" },
{ "timelineDayShortcut", "T+D" },
{ "timelineWeekShortcut", "T+W" },
{ "timelineMonthShortcut", "T+M" },
{ "showWeekends", "Show weekends" },
{ "beforeAt", "before at" },
{ "days", "days" },
{ "weeks", "weeks" },
{ "placeholder", "Add notification" },
{ "now", "Now" },
{ "dateTabLabel", "DATE" },
{ "timeTabLabel", "TIME" },
{ "hours", "Hours" },
{ "minutes", "Minutes" },
{ "am", "am" },
{ "pm", "pm" }
}
},
{
"de",
new Dictionary<string, string>()
{
{ "invalidValue", "{{elementType}}, Ungültiger {{property}} Wert. {{property}} sollte vom Typ {{typeOne}} oder {{typeTwo}} sein." },
{ "invalidTimeZone", "{{elementType}}, Ungültiger Zeitzonenwert. Die Zeitzone sollte aus der IANA-Zeitzonendatenbank stammen." },
{ "incorrectArgument", "{{elementType}}, Falsches Argument {{argumentName}} in Methode {{methodName}}." },
{ "noId", "smartScheduler benötigt eine ID, um einen Status zu speichern / laden / löschen." },
{ "agenda", "Agenda" },
{ "agendaPlaceholder", "Keine Ereignisse zum Anzeigen" },
{ "day", "Tag" },
{ "week", "Woche" },
{ "month", "Monat" },
{ "allDay", "Den ganzen Tag" },
{ "timelineDay", "Zeitleiste Тag" },
{ "timelineWeek", "Zeitleiste Woche" },
{ "timelineMonth", "Zeitleiste Monat" },
{ "newEvent", "Neues Veranstaltung" },
{ "ok", "Ok" },
{ "cancel", "Stornieren" },
{ "delete", "Löschen" },
{ "label", "Etikette" },
{ "dateStart", "Anfangsdatum" },
{ "dateEnd", "Endtermin" },
{ "repeat", "Wiederholen" },
{ "description", "Beschreibung" },
{ "repeatFreq", "Wiederholen" },
{ "repeatInterval", "Wiederhole jeden" },
{ "repeatOn", "Wiederholen Sie Ein" },
{ "repeatEnd", "Ende Wiederholung" },
{ "repeatEndOption", "noch nie" },
{ "repeatEndOnOption", "Auf" },
{ "repeatEndAfterOption", "Nach" },
{ "repeatEndAfter", "Auftreten" },
{ "hidden", "Versteckt" },
{ "hourly", "Stündlich" },
{ "daily", "Täglich" },
{ "weekly", "Wöchentlich" },
{ "monthly", "Monatlich" },
{ "yearly", "Jährlich" },
{ "repeatConfirm", "Möchten Sie nur das aktuelle Ereignis oder die gesamte Serie bearbeiten? ?" },
{ "repeatConfirmLabel", "Wiederholtes Ereignis bearbeiten" },
{ "createEvent", "Erstellen Sie ein neues Ereignis" },
{ "editEvent", "Ereignis bearbeiten" },
{ "editSeries", "Serie bearbeiten" },
{ "eventException", "Ereignisausnahme" },
{ "collector", "Mehr" },
{ "repeatEveryHour", "Std" },
{ "repeatEveryDay", "Tage" },
{ "repeatEveryWeek", "Wochen" },
{ "repeatEveryMonth", "Monate" },
{ "repeatEveryYear", "Jahre" },
{ "backgroundColor", "Hintergrundfarbe" },
{ "status", "Status" },
{ "resources", "Ressourcen" },
{ "selectPlaceholder", "Wählen..." },
{ "none", "Keiner" },
{ "free", "Frei" },
{ "busy", "Beschäftigt" },
{ "tentative", "Vorsichtig" },
{ "outOfOffice", "Ausserhaus" },
{ "exceptions", "Ausnahmen" },
{ "resetExceptions", "Ausnahmen zurücksetzen" },
{ "notifications", "Benachrichtigung" },
{ "notificationMessage", "beginnt am" },
{ "today", "Heute" },
{ "agendaShortcut", "A" },
{ "dayShortcut", "D" },
{ "weekShortcut", "W" },
{ "monthShortcut", "M" },
{ "timelineDayShortcut", "T+D" },
{ "timelineWeekShortcut", "T+W" },
{ "timelineMonthShortcut", "T+M" },
{ "showWeekends", "Showwochenenden" },
{ "beforeAt", "vorher um" },
{ "days", "Tage" },
{ "weeks", "Wochen" },
{ "placeholder", "Benachrichtigung hinzufügen" },
{ "now", "Jetzt" },
{ "dateTabLabel", "DATUM" },
{ "timeTabLabel", "ZEIT" },
{ "hours", "Std" },
{ "minutes", "Protokoll" },
{ "am", "nm" },
{ "pm", "vm" }
}
},
{
"fr",
new Dictionary<string, string>()
{
{ "invalidValue", "{{elementType}}, valeur {{property}} non valide. {{property}} doit être de type {{typeOne}} ou {{typeTwo}}." },
{ "invalidTimeZone", "{{elementType}}, valeur timeZone non valide. TimeZone doit provenir de la base de données des fuseaux horaires de l\"IANA." },
{ "incorrectArgument", "{{elementType}}, argument incorrect {{argumentName}} dans la méthode {{methodName}}." },
{ "noId", "smartScheduler nécessite un identifiant pour enregistrer / charger / effacer un état." },
{ "agenda", "Ordre du jour" },
{ "agendaPlaceholder", "Aucun événement à afficher" },
{ "day", "journée" },
{ "week", "La semaine" },
{ "month", "Mois" },
{ "allDay", "Toute la journée" },
{ "timelineDay", "Chronologie journée" },
{ "timelineWeek", "Chronologie La semaine" },
{ "timelineMonth", "Chronologie Mois" },
{ "newEvent", "Nouvel évènement" },
{ "ok", "D\"accord" },
{ "cancel", "Annuler" },
{ "delete", "Supprimer" },
{ "label", "Étiquette" },
{ "dateStart", "Date de début" },
{ "dateEnd", "Date de fin" },
{ "repeat", "Répéter" },
{ "description", "La description" },
{ "repeatFreq", "Répéter" },
{ "repeatInterval", "Répéter Chaque" },
{ "repeatOn", "Répéter Sur" },
{ "repeatEnd", "Fin Répéter" },
{ "repeatEndOption", "Never" },
{ "repeatEndOnOption", "Sur" },
{ "repeatEndAfterOption", "Après" },
{ "repeatEndAfter", "l\" occurrence" },
{ "hidden", "Caché" },
{ "hourly", "À l\"heure" },
{ "daily", "du quotidien" },
{ "weekly", "Hebdomadaire" },
{ "monthly", "Mensuele" },
{ "yearly", "Annuel" },
{ "repeatConfirm", "Voulez-vous modifier uniquement l\"événement en cours ou toute la série ?" },
{ "repeatConfirmLabel", "Modifier l\"événement récurrent" },
{ "createEvent", "Créer un nouvel événement" },
{ "editEvent", "Modifier l\"événement" },
{ "editSeries", "Modifier la série" },
{ "eventException", "Exception d\"événement" },
{ "collector", "plus" },
{ "repeatEveryHour", "heures" },
{ "repeatEveryDay", "journées" },
{ "repeatEveryWeek", "semaines" },
{ "repeatEveryMonth", "mois" },
{ "repeatEveryYear", "années" },
{ "backgroundColor", "Couleur de l\"arrière plan" },
{ "status", "Statut" },
{ "resources", "Ressources" },
{ "selectPlaceholder", "Sélectionner..." },
{ "none", "Aucun" },
{ "free", "Libre" },
{ "busy", "Occupé" },
{ "tentative", "Provisoire" },
{ "outOfOffice", "Absent du bureau" },
{ "exceptions", "Des exceptions" },
{ "resetExceptions", "Réinitialiser les exceptions" },
{ "notifications", "la notification" },
{ "notificationMessage", "commence le" },
{ "today", "Aujourd\"hui" },
{ "agendaShortcut", "UN" },
{ "dayShortcut", "Ré" },
{ "weekShortcut", "W" },
{ "monthShortcut", "M" },
{ "timelineDayShortcut", "T+D" },
{ "timelineWeekShortcut", "T+W" },
{ "timelineMonthShortcut", "T+M" },
{ "showWeekends", "Afficher les week-ends" },
{ "beforeAt", "avant à" },
{ "days", "journées" },
{ "weeks", "semaines" },
{ "placeholder", "Ajouter une notification" },
{ "now", "Maintenant" },
{ "dateTabLabel", "DATE" },
{ "timeTabLabel", "TEMPS" },
{ "hours", "Heures" },
{ "minutes", "Minutes" },
{ "am", "am" },
{ "pm", "pm" }
}
}
};
protected override void OnInitialized()
{
base.OnInitialized();
dataRecords = GetData();
}
private List<CustomSchedulerDataSource> GetData()
{
DateTime today = DateTime.Today;
List<CustomSchedulerDataSource> data = new List<CustomSchedulerDataSource>()
{
new CustomSchedulerDataSource()
{
Label = "Non-Compete Agreements",
DateStart = new DateTime(today.Year, today.Month, today.Day, 8, 15, 0).AddDays(-1),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 9, 0, 0),
Class = "steven",
EnLabel = "Non-Compete Agreements",
DeLabel = "Wettbewerbsverbote",
FrLabel = "Accords de non-concurrence",
BgLabel = "Незавършени Споразумения"
},
new CustomSchedulerDataSource()
{
Label = "Approve Hiring of John Jeffers",
DateStart = new DateTime(today.Year, today.Month, today.Day, 10, 0, 0).AddDays(-1),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 11, 15, 0).AddDays(-1),
Class = "mark",
EnLabel = "Approve Hiring of John Jeffers",
DeLabel = "Genehmigen Sie die Einstellung von John Jeffers",
FrLabel = "Approuver l'embauche de John Jeffers",
BgLabel = "Одобри назначаването на Джон Джефърс"
},
new CustomSchedulerDataSource()
{
Label = "Update NDA Agreement",
DateStart = new DateTime(today.Year, today.Month, today.Day, 11, 45, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 13, 45, 0).AddDays(2),
Class = "janet",
EnLabel = "Update NDA Agreement",
DeLabel = "NDA-Vereinbarung aktualisieren",
FrLabel = "Mettre à jour l'accord NDA",
BgLabel = "Обнови NDA Споразуменето"
},
new CustomSchedulerDataSource()
{
Label = "Update Employee Files with New NDA",
DateStart = new DateTime(today.Year, today.Month, today.Day, 14, 0, 0).AddDays(1),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 16, 45, 0).AddDays(1),
Class = "steven",
EnLabel = "Update Employee Files with New NDA",
DeLabel = "Aktualisieren Sie Mitarbeiterdateien mit neuer NDA",
FrLabel = "Mettre à jour les fichiers des employés avec un nouveau NDA",
BgLabel = "Обнови Работните Документи с нов NDA"
},
new CustomSchedulerDataSource()
{
Label = "Compete Agreements",
DateStart = new DateTime(today.Year, today.Month, today.Day, 8, 15, 0).AddDays(-1),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 9, 0, 0).AddDays(-1),
Class = "mark",
EnLabel = "Compete Agreements",
DeLabel = "Wettbewerbsvereinbarungen",
FrLabel = "Accords de concurrence",
BgLabel = "Завърши Споразуменията"
},
new CustomSchedulerDataSource()
{
Label = "Approve Hiring of Mark Waterberg",
DateStart = new DateTime(today.Year, today.Month, today.Day, 10, 0, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 11, 15, 0),
Class = "janet",
EnLabel = "Approve Hiring of Mark Waterberg",
DeLabel = "Genehmigen Sie die Einstellung von Mark Waterberg",
FrLabel = "Approuver l'embauche de Mark Waterberg",
BgLabel = "Одобри Назначаването на Марк Уотърбърг"
},
new CustomSchedulerDataSource()
{
Label = "Update NDA Contracts",
DateStart = new DateTime(today.Year, today.Month, today.Day, 11, 45, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 13, 45, 0),
Class = "janet",
EnLabel = "Update NBA Contracts",
DeLabel = "Aktualisieren Sie die NBA-Verträge",
FrLabel = "Mettre à jour les contrats NBA",
BgLabel = "Обнови NBA Договорите"
},
new CustomSchedulerDataSource()
{
Label = "Update Employees Information",
DateStart = new DateTime(today.Year, today.Month, today.Day, 14, 0, 0).AddDays(1),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 16, 45, 0).AddDays(1),
Class = "mark",
EnLabel = "Update Employees Information",
DeLabel = "Mitarbeiterinformationen aktualisieren",
FrLabel = "Mettre à jour les informations sur les employés",
BgLabel = "Обнови Информацията за Служителите"
},
new CustomSchedulerDataSource()
{
Label = "Review Agreements",
DateStart = new DateTime(today.Year, today.Month, today.Day, 8, 15, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 9, 0, 0),
Class = "steven",
EnLabel = "Review Agreements",
DeLabel = "Vereinbarungen überprüfen",
FrLabel = "Examiner les accords",
BgLabel = "Прегледай Споразуменията"
},
new CustomSchedulerDataSource()
{
Label = "Fire John Jeffers",
DateStart = new DateTime(today.Year, today.Month, today.Day, 10, 0, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 11, 15, 0),
Class = "steven",
EnLabel = "Fire John Jeffers",
DeLabel = "Feuer John Jeffers",
FrLabel = "Feu John Jeffers",
BgLabel = "Уволни Джон Джефърс"
},
new CustomSchedulerDataSource()
{
Label = "Close The NDA Agreement",
DateStart = new DateTime(today.Year, today.Month, today.Day, 11, 45, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 13, 45, 0),
Class = "mark",
EnLabel = "Close The NDA Agreement",
DeLabel = "Schließen Sie die NDA-Vereinbarung",
FrLabel = "Fermer l'accord NDA",
BgLabel = "Приключи с NDA Споразумението"
},
new CustomSchedulerDataSource()
{
Label = "Erase Fired Employee Files From NDA",
DateStart = new DateTime(today.Year, today.Month, today.Day, 14, 0, 0),
DateEnd = new DateTime(today.Year, today.Month, today.Day, 16, 45, 0),
Class = "mark",
EnLabel = "Erase Fired Employee Files From NDA",
DeLabel = "Löschen Sie entlassene Mitarbeiterdateien aus der NDA",
FrLabel = "Effacer les fichiers des employés licenciés de NDA",
BgLabel = "Премахни Служебните Файлове на Бившите служители от NDA"
}
};
return data;
}
private class CustomSchedulerDataSource : SchedulerDataSource
{
public string EnLabel;
public string DeLabel;
public string FrLabel;
public string BgLabel;
};
}
Result: