Localization and Globalization

There are two different concepts involved in localizing Wijmo widgets. First, you can globalize dates and numbers for supported cultures. Second, you can provide custom strings for specific buttons, tooltips, and other text that appears in the user interface for each widget.

Globalize Dates and Numbers

The following widgets have dates and numbers that you can localize.

You can localize any of these widgets by setting its culture option to a culture supported in globalize.cultures.js. You can find a copy of this file in your installation folder on a path like this:

...\Wijmo\external\cultures

The CDN hosts all of the individual files, or you can download them from Github.

NOTE: Only dates and numbers are localized using Globalize. Wijmo allows you to provide custom values for any other text in the widgets. See Custom Strings for more information.

Quick Start: Using Globalize

This quick start section demonstrates how to use globalize to localize dates and numbers in a widget. The method is the same for each widget that displays dates or numbers (see the list above).

Open Notepad, add the following code and save the document with an .html extension to create a new HTML page.
Basic Page Markup
Copy Code
<!DOCTYPE HTML> <head> </head> <body> </body> </HTML>

Basic Page Markup	Copy Code
<!DOCTYPE HTML> <head> </head> <body> </body> </HTML>

To reference the latest dependencies from the CDN, see Wijmo CDN. Add them to your HTML page within the <head> tags. For example:

Basic Page Markup	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.89.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.89.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.89.min.js" type="text/javascript"></script> <!--Culture--> <script src="http://cdn.wijmo.com/external/cultures/globalize.culture.fr-FR.js" type="text/javascript"></script>

Basic Page Markup

Copy Code

<!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.89.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.89.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.89.min.js" type="text/javascript"></script>

<!--Culture-->
<script src="http://cdn.wijmo.com/external/cultures/globalize.culture.fr-FR.js" type="text/javascript"></script>

This last entry adds a reference to the specific culture that you want to use, in this case, French.

Within the <body> tags, add markup like the following.
```
<div id="eventscalendar"></div>
```
The <div> element creates the widget, and its id attribute is set to the name of the widget, which we call in the jQuery script to initialize the widget. This markup adds the widget to your page. (See individual widget topics for the markup to use for the other widgets.)
Within the <head> tags, below the references, add the following script to initialize the jQuery widget. (See individual widget topics for the script to use for the other widgets.)
Default value
Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ culture: "fr-FR" }); }); </script>
This script sets the culture to use to format dates and numbers in the widget.
Save your HTML file and open it in a browser. The wijevcal widget appears like the following. Notice that date items such as the days of the week and months of the year are localized, but all other text remains in English.

Localized Events Calendar

Default value	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ culture: "fr-FR" }); }); </script>

Custom Strings

In addition to localizing date and number formats using Globalization, Wijmo allows you to localize or customize all of the strings in the widget's UI. Here is sample code for localizing each of the widgets.

Custom Calendar Strings

Custom DatePager Strings

Custom EventsCalendar Strings

Custom Grid Strings

Custom LightBox Strings

Custom Pager Strings

Custom Upload Strings

Custom Wizard Strings