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.3.20132.15\Wijmo-Open\development-bundle\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).
Step-by-step Globalize
- 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>
|
- 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.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/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.20132.15.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.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
|
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
See Also
Show All
Hide All