PHP Kendo\UI\Calendar::attr Examples

Example #1

File: events.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="configuration k-widget k-header">
    <span class="configHead">Events log</span>
    <div class="console"></div>
</div>
<div class="reports">
<?php 
$calendar = new \Kendo\UI\Calendar('calendar');
$calendar->attr('style', 'width: 243px')->change('onChange')->navigate('onNavigate');
echo $calendar->render();
?>
</div>

<script>
    function onChange() {
        kendoConsole.log("Change :: " + kendo.toString(this.value(), 'd'));
    }

    function onNavigate() {
        kendoConsole.log("Navigate");
    }
</script>

<style scoped="scoped">
    .reports {
        width: 265px;

Example #2

File: api.php Project: neevan1e/Done

    <ul class="options">
        <li>
            <select id="direction" style="vertical-align: top; width: 120px; margin-bottom: 3px;">
                <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 class="reports">
<?php 
$calendar = new \Kendo\UI\Calendar('calendar');
$calendar->attr('style', 'width: 243px')->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());

Example #3

File: keyboard-navigation.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
<?php 
$calendar = new \Kendo\UI\Calendar('calendar');
$calendar->attr('style', 'width: 230px');
echo $calendar->render();
?>
</div>
<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button wider">Alt</span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget
        </span>
    </li>
</ul>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button wider leftAlign">left arrow</span>
        </span>