Localization

Localization is the process of adapting software to meet the requirements of local markets and different languages.

You can change the messages that are displayed in any Kendo UI component for Vue by including an additional script file in the application.

Setting the Current Language

By default, all Kendo UI components for Vue display their messages in US English. To replace the default text messages, import a language specific kendo.messages.<language>.js file in your application.

Currently, translations are not available for every language and some of the localization files may be incomplete. For more information on where to find the full list of available translations, refer to the section on contributing.

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI Scheduler package for Vue.

    npm install --save @progress/kendo-scheduler-vue-wrapper
  3. Import the Kendo UI packages and the required messages script to the Vue application, as demonstrated in the following example.

    import $ from 'jquery';
    
    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import '@progress/kendo-ui/js/messages/kendo.messages.de-DE.js'
    
    import { Scheduler, SchedulerInstaller } from '@progress/kendo-scheduler-vue-wrapper'
  4. Initialize the Vue application which contains a Scheduler component.

    <div id="vueapp" class="vue-app row example-wrapper">
       <kendo-scheduler></kendo-scheduler>
    </div>
    Vue.use(SchedulerInstaller);
    
    new Vue({
       el: '#vueapp'
    })

Creating New Localization Files

The localization script replaces default messages in the component prototype with their equivalent translations. The file has to be named following the kendo.messages.<language>.js convention. A language code identifier list is available for download from the Microsoft developer network website.

The kendo.messages.en-US.js contains all component messages and may be used as a reference when you create a new localization file. The easiest way to get started is to copy the file, rename it, and translate the messages.

The following example demonstrates how to create a new localization file.

/* <Widget-name> messages */

if (kendo.ui.<Widget-name>) {
kendo.ui.<Widget-name>.prototype.options.messages =
$.extend(true, kendo.ui.<Widget-name>.prototype.options.messages,{
    "<message-name>": "<translation",
    //...
});
}

Contribution

Currently, translations are not available for every language and some of the localization files may be incomplete. The full list of currently available translations can be found in the Kendo UI Core repository. If you notice any missing messages in the localization files or would like to add localization files for your language, do not hesitate to fork the repository, apply the respective changes, and submit a pull request.

In this article