Basic Calendar

Step 1.

To use the calendar UI, you must add the following CSS and JS to the page.
For information about how to install the library and plug-ins, please refer to the index page.

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/ax5core/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/ax5ui-calendar/dist/ax5calendar.css">
<script type="text/javascript" src="bower_components/ax5ui-calendar/dist/ax5calendar.min.js"></script>

Step 2.

It will prepare the element that is the target of the Calendar UI in the document.

<div id="calendar-target" style="
                width:300px;
                border:1px solid #ccc;
                border-radius: 5px;
                padding: 5px;
                overflow: hidden;">

</div>

Step 3.

Create an instance of ax5.ui.calendar class, using the setConfig method to an instance, you can set the Calendar UI.

<script type="text/javascript">
    $(document.body).ready(function () {
        var myCalendar = new ax5.ui.calendar({
            target: document.getElementById("calendar-target"),
            displayDate: (new Date()),
            onClick: function () {
                console.log(this);
                console.log(myCalendar.getSelection());
            },
            onStateChanged: function () {
                console.log(this);
            }
        });
    });
</script>