<?php
require_once '../lib/Kendo/Autoload.php';
?>
<div class="box wide">
    <div class="box-col">
        <h4>Get value</h4>
        <ul class="options">
            <li>
                <button id="get" class="k-button">Get date</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Set value</h4>
        <ul class="options">
            <li>
                <input id="value" value="10/10/2000" />
                <button id="set" class="k-button">Set date</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Navigation</h4>
        <ul class="options">
            <li>
                <select id="direction">
                    <option value="up">upper view</option>
                    <option value="down">lower view</option>
                    <option value="past">past</option>
                    <option value="future" selected="selected">future</option>
                </select>
                <button id="navigate" class="k-button">Navigate</button>
            </li>
        </ul>
    </div>
</div>
<div class="demo-section k-content" style="text-align: center;">
    <h4>Pick a date</h4>
<?php
$calendar = new \Kendo\UI\Calendar('calendar');
$calendar->value(new DateTime('today', new DateTimeZone('UTC')));

echo $calendar->render();
?>
</div>
<script>
    $(function() {
        var calendar = $("#calendar").data("kendoCalendar");

        var navigate = function () {
            var value = $("#direction").val();
            switch(value) {
                case "up":
                    calendar.navigateUp();
                    break;
                case "down":
                    calendar.navigateDown(calendar.value());
                    break;
                case "past":
                    calendar.navigateToPast();
                    break;
                default:
                    calendar.navigateToFuture();
                    break;
            }
        },
        setValue = function () {
            calendar.value($("#value").val());
        };

        $("#get").click(function() {
            alert(calendar.value());
        });

        $("#value").kendoDatePicker({
            change: setValue
        });

        $("#set").click(setValue);

        $("#direction").kendoDropDownList({
            change: navigate
        });

        $("#navigate").click(navigate);
    });
</script>