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",
    Units: "Units",
    Timeline: "Timeline",
    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)",
    "Inactive calendar": "Inactive calendar",
 
    // 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",
    "Edit event": "Edit event",
    "Assigned to units": "Assigned to units",
    "No units": "No units",
    "Unknown unit": "Unknown unit",
 
    //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",
    of: "of",
    "after several occurrences": "after several occurrences",
    date: "date",
    "week on": "week on",
    "Change recurring pattern": "Change recurring pattern",
    "Save changes?": "Save changes?",
 
    // menus for edit and delete
    "All events": "All events",
    "This event": "This event",
    "This event and the following": "This event and the following",
    Cancel: "Cancel",
    Apply: "Apply",
    "Edit recurring event": "Edit recurring event",
 
    "Timeline scale": "Timeline scale",
    Section: "Section",
    "Show more": "Show more",
 
    "Copy of": "Copy of",
    "Copy event": "Copy event",
};

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
      }
    }
}