All Components

Localization

Localization is the process of adapting software to meet the requirements of local markets and different languages. You are able to change the messages displayed in any Kendo UI Vue component by including an additional script file in the application.

Set Current Language

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

  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 example below.

    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. Now, simply initialize the Vue app containing a Scheduler component.

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

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.

Create New Localization File

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

The example below 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",
    //...
});
}

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

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 our repository, apply the respective changes, and submit a pull request.

See Also

In this article