Period

html

<div id="calendar-target-01" style="width:300px;border:1px solid #888;padding: 10px;margin: 10px;"></div>

<script type="text/javascript">
    $(document.body).ready(function () {
        var today = new Date();
        new ax5.ui.calendar({
            target: document.getElementById("calendar-target-01"),
            control: {
                left: '<i class="fa fa-chevron-left"></i>',
                right: '<i class="fa fa-chevron-right"></i>'
            },
            multipleSelect: 2,
            dimensions: {
                height: 300,
                controlHeight: 40,
                itemPadding: 1
            },
            onClick: function () {
                var dates = this.self.getSelection();
                if (dates.length > 1) {
                    var minDate = new Date(Math.min(ax5.util.date(dates[0]).getTime(), ax5.util.date(dates[1]).getTime()));
                    var maxDate = new Date(Math.max(ax5.util.date(dates[0]).getTime(), ax5.util.date(dates[1]).getTime()));

                    this.self.setPeriod({
                        range: [
                            {from: minDate, to: maxDate, fromLabel: 'S', toLabel: 'E'}
                        ]
                    });
                }
            },
            onStateChanged: function () {

                //console.log(this);
            }
        });
    });
</script>