You’re currently viewing documentation for our jQuery wrappers.We highly recommend that you migrate to the equivalent Native Vue component as that is what will receive updates in the future.

Localization Overview

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.

Some of the localization files do not contain translations for every language. For more information on the full list of available translations, refer to the section on contributing.

1. Install Kendo UI and add a theme.

   Copy Codenpm install --save @progress/kendo-ui
   npm install --save @progress/kendo-theme-default

2. Install the Kendo UI Scheduler package for Vue.

   Copy Codenpm 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.

   Copy Codeimport $ 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.

   Copy Code<div id="vueapp" class="vue-app row example-wrapper">
       <kendo-scheduler></kendo-scheduler>
   </div>

   Copy CodeVue.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.

Copy Code/* <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, some of the localization files may be incomplete because they do not contain translations for every language. The full list of currently available translations can be found in the Kendo UI Core repository.

If you notice messages that are not available in the localization files or would like to add localization files for your language, do not hesitate to:

1. Fork the repository.
2. Apply the respective changes.
3. Submit a pull request.

Suggested Links

• Configuration of Kendo UI Components for Vue
• Globalization of Kendo UI Components for Vue