All Components

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 on the culture method, refer to the API reference article on this method.

The default culture, which Kendo UI widgets uses is "en-US".

Define 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 DateInputs 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. Now, before initializing the Vue app, set the culture script, which Kendo UI Vue components should use, as shown below.

    <div id="vueapp" class="vue-app row example-wrapper">
       <kendo-calendar :value="new Date()"></kendo-calendar>
    </div>
    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.

Format Number or Date Objects

Kendo UI exposes methods, which can format the number or date objects using a specific format string and the current specified culture. These are:

For detailed information, refer to this article from the Kendo UI documentation.

Parse Strings

Kendo UI exposes methods which convert the specified string to a date or number object.

For detailed information, refer to this article from the Kendo UI documentation.

Components Depending on Culture Information

Here is a list of Kendo UI Vue components which depend on the current culture:

All Kendo UI widgets which support date or numeric formatting also depend on current culture. These widgets are the more complex ones such as Kendo UI for Vue Grid, ListView, Charts, etc.

See Also

In this article