Globalization Overview

Globalization is the process of designing and developing an application that works in multiple cultures.

The culture defines specific information for the number formats, week and month names, date and time formats.

The Kendo UI culture scripts are generated from the Windows 10 and .NET 4.7 server-side culture definitions and match them by design. To customize the culture in your application, refer to the article on culture definition.

Globalization in Kendo UI

Kendo UI for Vue enables you to internationalize the current page by using Kendo UI culture scripts. Kendo UI exposes the kendo.culture("cultureName") method that provides options for selecting the culture script which corresponds to <language code>-<country/region code>. For more information, refer to the API reference of the culture method.

The default culture of Kendo UI widgets is "en-US".

Defining the Current Culture

  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 Date Inputs package for Vue.

    npm install --save @progress/kendo-dateinputs-vue-wrapper
  3. Import the Kendo UI packages and the required culture script to the Vue application.

    import $ from 'jquery';
    
    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import '@progress/kendo-ui/js/cultures/kendo.culture.de-DE.js'
    
    import { Calendar, DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'
  4. Before you initialize the Vue application, set the culture script which the Kendo UI components for Vue will use.

    <div id="vueapp" class="vue-app row example-wrapper">
       <kendo-calendar :value="new Date()"></kendo-calendar>
    </div>
    import '@progress/kendo-ui/js/cultures/kendo.culture.de-DE.js';
    
    kendo.culture("de-DE");
    
    Vue.use(DateinputsInstaller);
    
    new Vue({
       el: '#vueapp'
    })

Configuration

Apart from the available global culture definition, the Kendo UI exposes methods which enable you to format and parse number and date objects.

Formatting Number or Date Objects

Kendo UI exposes methods which format the number or date objects by using a specific format string and the current specified culture. For more information, refer to the article on date formatting in Kendo UI.

Kendo UI for Vue supports the following methods for date and number formatting:

Parsing Strings

Kendo UI exposes methods which convert the specified string to a date or number object. For more information, refer to the article on date parsing in Kendo UI.

Kendo UI for Vue supports the following methods for parsing strings:

Components Depending on Culture Information

All Kendo UI widgets which support number or date formatting also depend on the current culture. These components are the more complex ones such as the Grid, ListView, and Charts among others.

The following Kendo UI components for Vue depend on the current culture:

In this article