Globalization

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.

Kendo UI Globalization

Kendo Ui for Vue allows you to internationalize the current page using Kendo UI culture scripts. Kendo UI exposes kendo.culture("cultureName") method which allows you to select the culture script corresponding to the <language code>-<country/region code>. For detailed 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, 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/cultures/kendo.culture.de-DE.js'
    
    import { Calendar, DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'
  4. Before initializing the Vue application, set the culture script which the Kendo UI components for Vue will use, as demonstrated in the following code snippet.

    <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 above global culture definition, the Kendo UI exposes methods which allow 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 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 widgets are the more complex ones such as the Grid, ListView, Charts, and others.

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

In this article