Wijmo 5 - Localization

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<!-- set German culture -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.de.min.js"></script>

<div class="container">
  <h1>
		Wijmo 5 Globalization Example
	</h1>
  <p>
		This <b>FlexGrid</b> shows values in German
		(notice the decimal and thousand separators):
  </p>
  <div id="grid"></div>
  <p>
		This <b>Calendar</b> shows dates in German 
		(notice month and day names, and the fact that the 
		weeks start on Monday as opposed to Sunday):
  </p>
  <div id="calendar"></div>

</div>

CSS

.wj-calendar {
	width: 25em;
}

JavaScript

onload = function() {

  // create controls
  var grid = new wijmo.grid.FlexGrid('#grid', {
  	itemsSource: getData(10)
  });
  new wijmo.grid.filter.FlexGridFilter(grid);
  var cal = new wijmo.input.Calendar('#calendar', {
  	value: new Date()
  });

	// generate some random data
  function getData(count) {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < count; i++) {
      data.push({
        id: i,
        country: countries[i % countries.length],
        downloads: Math.round(Math.random() * 20000),
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
      });
    }
    return data;
  }
}