Change Calendar mode

html

<div id="build-target"></div>
<div class="DH10"></div>
<button class="btn btn-default" data-change-calendar-mode="day">Day</button>
<button class="btn btn-default" data-change-calendar-mode="month">Month</button>
<button class="btn btn-default" data-change-calendar-mode="year">Year</button>
<div class="DH10"></div>

<script type="text/javascript">
    $(document.body).ready(function () {
        var buildTarget = $("#build-target");
        buildTarget.html('<div id="calendar-target" style="width:300px;border:1px solid #888;padding: 10px;"></div>');

        var myCalendar = new ax5.ui.calendar({
            target: document.getElementById("calendar-target"),
            displayDate: (new Date()),
            mode: "year",
            selectMode: "year"
        });

        $('[data-change-calendar-mode]').click(function () {
            var mode = this.getAttribute('data-change-calendar-mode');
            console.log(mode);
            myCalendar
                .setConfig({
                    mode: mode,
                    selectMode: mode
                }, false)
                .changeMode();
        });
    });
</script>