jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
63 lines (58 loc) • 3.58 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<title id='Description'>AngularJS 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. AngularJS.glob.de-DE.js
for German. The desired localization file should be along with the jqxcalendar.js.
The localization is set to all jqxCalendar instances by setting the jqxCalendar's
culture property. </title>
<meta name="description" content="AngularJS Calendar example. This example demonstrates how to customize the calendar's first day of week." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
// define available cultures
var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
// create a calendar.
$scope.calendarSettings = { firstDayOfWeek: 0, width: '220px', height: '220px', enableTooltips: false };
$scope.dropDownListSettings = { source: days, selectedIndex: 6, width: '200px', autoDropDownHeight: true, height: '25px' };
$scope.dropDownListSelect = function (event) {
var index = event.args.index;
if (index == 6) {
index = -1;
}
$scope.calendarSettings.firstDayOfWeek = index + 1;
};
});
</script>
</head>
<body ng-controller="demoController">
<div style='float: left; width: 250px;' id='jqxWidget'>
<jqx-calendar jqx-watch="[calendarSettings.firstDayOfWeek, calendarSettings.width]" jqx-settings="calendarSettings">
</jqx-calendar>
<br />
<div>
<br />
<div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>
Choose the first day of the week
</div>
<br />
<br />
<jqx-drop-down-list jqx-on-select="dropDownListSelect(event)" jqx-settings="dropDownListSettings" style='float: left;'>
</jqx-drop-down-list>
</div>
</div>
</body>
</html>