jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
35 lines (31 loc) • 1.96 kB
HTML
<html lang="en">
<head>
<title id='Description'>Calendar Custom Element HideOtherMonthDays</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 it is shown how to hide other month days in Custom Element Calendar." />
<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="../../../scripts/demos.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/globalization/globalize.js"></script>
<script type="text/javascript">
JQXElements.settings['calendarSettings'] =
{
showOtherMonthDays: false
}
</script>
</head >
<body>
<div class="example-description">
The Custom Element Calendar can hide the other days of the month. To hide the other month days, you need set the showOtherMonthDays property to false. By default, the Custom Element Calendar displays 42 days which represent the days from the main month and some of the days from the previous and next months.
</div>
<jqx-calendar settings="calendarSettings"></jqx-calendar>
</body>
</html >