jQuery Calendar Setup

Home >Shield UI Documentation >Calendar >JavaScript >jQuery Calendar Setup

The Calendar widget allows you to select a date and perform an action. It renders a graphical calendar that supports navigation and selection.The underling elements from which the widget can be created are div or span. In order to render the Calendar JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an div or span element for which to initialize the Calendar functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield Calendar</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="calendar" ></div>

<script type="text/javascript">
    $(function () {
        $("#calendar").shieldCalendar({
            focused: new Date(2016, 2, 31)
        });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.