jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
116 lines (102 loc) • 5.97 kB
HTML
<html lang="en">
<head>
<title id='Description'>Calendar Custom Element Localization</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="In this example of Custom Element Calendar it is shown how to provide support for localizing content and dates for different languages and date formats"/>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.lt.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.sa-IN.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.cs-CZ.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.en-CA.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.en-US.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.fr-FR.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.he-IL.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.hr-HR.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.hu-HU.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.it-IT.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.ja-JP.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.ru-RU.js"></script>
<script src="../../../jqwidgets/globalization/globalize.culture.sa-IN.js"></script>
<script>
var availableCultures =
['Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)', 'French (France)', 'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'];
JQXElements.settings['calendarSettings'] =
{
enableTooltips: false
}
JQXElements.settings['DropDownListSettings'] =
{
source: availableCultures,
selectedIndex: 3,
}
window.onload = function() {
var myDropDownList = document.querySelector('jqx-drop-down-list');
var myCalendar = document.querySelector('jqx-calendar');
myDropDownList.addEventListener('select', function(event) {
var index = event.args.index;
switch (index) {
case 0:
myCalendar.culture = 'cs-CZ';
break;
case 1:
myCalendar.culture = 'de-DE';
break;
case 2:
myCalendar.culture = 'en-CA';
break;
case 3:
myCalendar.culture = 'en-US';
break;
case 4:
myCalendar.culture = 'fr-FR';
break;
case 5:
myCalendar.culture = 'it-IT';
break;
case 6:
myCalendar.culture = 'ja-JP';
break;
case 7:
myCalendar.culture = 'he-IL';
break;
case 8:
myCalendar.culture = 'ru-RU';
break;
case 9:
myCalendar.culture = 'hr';
break;
case 10:
myCalendar.culture = 'sa-IN';
break;
}
});
}
</script>
</head >
<body>
<div class="example-description">
Custom element's Calendar provides support for localizing its content and dates for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js for German.
</div>
<jqx-calendar settings="calendarSettings" style="float: left; margin-right: 20px;"></jqx-calendar>
<div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>Choose Culture</div>
<br />
<br />
<jqx-drop-down-list settings="DropDownListSettings" style=" float: left"></jqx-drop-down-list>
</body>
</html >