PHP Kendo\UI\Calendar Examples

Example #1

File: calendar.php Project: mhsadiqhussain/wrappers-getting-started

<?php

require_once 'lib/Kendo/AutoLoad.php';
include 'header.php';
$calendar = new \Kendo\UI\Calendar('calendar');
?>

<h2>Calendar Control</h2>
<p>
An example of using the Kendo UI Calendar control.
</p>
<?php 
echo $calendar->render();
?>

<?php 
include 'footer.php';

Example #2

File: api.php Project: neevan1e/Done

    <span class="configTitle">Navigation</span>
    <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":

Example #3

File: template.php Project: neevan1e/Done

# if (\$.inArray(+data.date, birthdays) != -1) { #
<div class="
   # if (data.value < 10) { #
       exhibition
   # } else if ( data.value < 20 ) { #
       party
   # } else { #
       cocktail
   # } #
">#= data.value #</div>
# } else { #
#= data.value #
# } #
TEMPLATE
);
$calendar = new \Kendo\UI\Calendar('calendar');
$calendar->value(new DateTime('today', new DateTimeZone('UTC')))->month($month);
echo $calendar->render();
?>
    </div>
    <script>
    var today = new Date();
    var birthdays = [
       +new Date(today.getFullYear(), today.getMonth(), 8),
       +new Date(today.getFullYear(), today.getMonth(), 12),
       +new Date(today.getFullYear(), today.getMonth(), 24),
       +new Date(today.getFullYear(), today.getMonth() + 1, 6),
       +new Date(today.getFullYear(), today.getMonth() + 1, 7),
       +new Date(today.getFullYear(), today.getMonth() + 1, 25),
       +new Date(today.getFullYear(), today.getMonth() + 1, 27),
       +new Date(today.getFullYear(), today.getMonth() - 1, 3),

Example #4

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 #5

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>