Localizing Scheduler

By default, all labels in Scheduler are defined in English, but you can provide custom translations for:

names of actions ("Add", "Delete", etc.)
labels of the display modes ("Day", "Week", etc.)
labels of the form fields and controls ("name", "details", "colors", etc.)
labels on the buttons

The Scheduler widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Scheduler titles are stored in the following object:

export default {
  //navigation
  Week: "Week",
  Day: "Day",
  Month: "Month",
  Agenda: "Agenda",
  Today: "Today",
  Create: "Create",
  Next: "Next",
  Previous: "Previous",
  "Next day": "Next day",
  "Previous day": "Previous day",
  "Next week": "Next week",
  "Previous week": "Previous week",
  "Next month": "Next month",
  "Previous month": "Previous month",
 
  // managing calendars
  "Add calendar": "Add calendar",
  "Do you really want to remove this calendar?":
      "Do you really want to remove this calendar?",
  "Edit calendar": "Edit calendar",
  Delete: "Delete",
  Save: "Save",
  Title: "Title",
  Color: "Color",
  Active: "Active",
  Settings: "Settings",
  "(no title)": "(no title)",
 
  // modes
  "No Events": "No Events",
  "All Day": "All Day",
  more: "more",
  "Expand all-day events": "Expand all-day events",
  "Collapse all-day events": "Collapse all-day events",
 
  // info and form
  "The event will be deleted permanently, are you sure?":
      "The event will be deleted permanently, are you sure?",
  Done: "Done",
  "Delete event": "Delete event",
  Close: "Close",
  Edit: "Edit",
  "(No title)": "(No title)",
  Event: "Event",
  Start: "Start",
  End: "End",
  Calendar: "Calendar",
  Notes: "Notes",
  from: "from",
  to: "to",
  labelAllday: "All day",
  labelTime: "Time",
  "Edit event": "Edit event",
 
  //recurring
  never: "never",
  none: "none",
  daily: "daily",
  day: "day",
  days: "days",
  every: "Every",
  weekly: "weekly",
  week: "week",
  weeks: "weeks",
  each: "Every",
  monthly: "monthly",
  month: "month",
  months: "months",
  yearly: "yearly",
  year: "year",
  years: "years",
  Repeat: "Repeat",
  "End repeat": "End repeat",
  "Repeats each": "Repeats each",
  till: "till",
  times: "times",
  "weekly, every": "weekly, every",
  "monthly, every": "monthly, every",
  "yearly, every": "yearly, every",
  "every working day": "every working day",
  custom: "custom",
  Every: "Every",
  on: "on",
  "after several occurrences": "after several occurrences",
  date: "date",
  "week on": "week on",
 
  // dialogs for edit and delete
  "Do you want to edit the whole set of repeated events?":
      "Do you want to edit the whole set of repeated events?",
  "Edit series": "Edit series",
  "Edit occurrence": "Edit occurrence",
  "Do you want to delete the whole set of repeated events?":
      "Do you want to delete the whole set of repeated events?",
  "Delete series": "Delete series",
  "Delete occurrence": "Delete occurrence",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

Set custom translations by creating the needed locale (e.g. "ru") within the scheduler.locales object:

// Russian translations
scheduler.locales.ru = {
  Week: "Неделя",
  Day: "День",
  // ...
};

Define the current locale for Scheduler. For these purposes, set the locale property of Scheduler in its constructor:

webix.ready(function() {
  // use custom scrolls, optional
  webix.CustomScroll.init();
 
  webix.ui({
    view: "scheduler",
    url: "https://docs.webix.com/calendar-backend/",
    locale: {
      lang: "ru"
    }
  });
});

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

First, set custom translations to the desired labels:

scheduler.locales.ru = {  // Russian
    Week: "Неделя",
    Day: "День",
    // ...
};
// other locales

Switch between languages using Scheduler "locale" service and its setLang method:

{
  view: "segmented",
  options: ["en", "ru"],
  width: 250,
  click: function() {
    const locale = $$("scheduler").getService("locale");
    locale.setLang(this.getValue());
  }
}

How to Synchronize Scheduler and Webix Locale

The built-in labels of Webix components within the Scheduler, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Scheduler and Webix, define webix parameter in the locale setting of the Scheduler constructor:

{
    view:"scheduler",
    url:"https://docs.webix.com/calendar-backend/",
    locale: {
      lang: "en",
      webix: {
        // switch Webix the selected locale
        en: "en-US",
        zh: "zh-CN",
        // other locales
      }
    }
}