Included

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Requirements

  • PHP 5

Scheduler Application Features

This web application allows drag and drop event scheduling using DayPilot JavaScript scheduler component.

  • HTML5 scheduler widget
  • Loads events from a sample SQLite database
  • Uses PHP on the server side
  • Handles drag and drop event moving and resizing
  • Displays detailed information about the event on hover

JavaScript Scheduler Setup

1. Include daypilot-all.min.js library:

<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>

Add a placeholder for the JavaScript Scheduler widget:

<div id="dp"></div>

Add the initialization code:

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    dp.init();
</script>

Configure the Scheduler Appearance

scheduler-javascript-php-html5-header.png

  1. Configure the cell dimensions using .eventHeight and .cellWidth properties.
  2. Set the time scale (cell duration) using .cellDuration property.
  3. Set the date range using .startDate and .days properties.
<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // behavior and appearance
    dp.cellWidth = 40;
    dp.eventHeight = 30;
    dp.headerHeight = 25;

    // view
    dp.startDate = new DayPilot.Date("2013-05-01").firstDayOfMonth();  // or just dp.startDate = "2013-03-25";
    dp.days = dp.startDate.daysInMonth();
    dp.scale = "Day";
    dp.timeHeaders = [
      { groupBy: "Month" },
      { groupBy: "Day", format: "d" }
    ];

    dp.init();

</script>

Apply a CSS Theme

scheduler-javascript-php-html5-windows-8-css-theme.png

Use .cssClassPrefix property to apply a theme. Include the theme stylesheet.

You can create your own CSS theme using the online WYSIWIG theme designer.

<link type="text/css" rel="stylesheet" href="themes/scheduler_8.css" />    

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // ...
    dp.cssClassPrefix = "scheduler_8";
    // ...

    dp.init();

</script>

Configure Scheduler Resources

scheduler-javascript-php-html5-resources.png

Enable scheduler resource tree using .treeEnabled property and set .resources as needed.

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.treeEnabled = true;
    dp.resources = [
                 { name: "Room A", id: "A", expanded: true, children:[
                         { name : "Room A.1", id : "A.1" },
                         { name : "Room A.2", id : "A.2" }
                         ] 
                 },
                 { name: "Room B", id: "B" },
                 { name: "Room C", id: "C" }
                ];
    // ...
    dp.init();
</script>

Load Events

scheduler-javascript-php-html5-events.png

You can load the scheduler events during initialization using events.list property:

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.events.list = [
    {
      start: "2013-03-25T00:00:00",
      end: "2013-03-27T00:00:00",
      id: "1",
      resource: "A",
      text: "Event 1"
    },
    {
      start: "2013-03-26T12:00:00",
      end: "2013-03-27T00:00:00",
      id: "2",
      resource: "B",
      text: "Event 2"
    }
    ];
    // ...
    dp.init();
</script>

We will load them after the scheduler initialization using events.add() method:

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    dp.init();

    loadEvents();

    function loadEvents() {
        DayPilot.request("backend_events.php", function(result) {
            var data = eval("(" + result.responseText + ")");
            dp.events.list = data;
            dp.update();
        });
    }

</script>

backend_events.php

<?php
require_once '_db.php';
    
$result = $db->query('SELECT * FROM events');

class Event {}
$events = array();

foreach($result as $row) {
  $e = new Event();
  $e->id = $row['id'];
  $e->text = $row['name'];
  $e->start = $row['start'];
  $e->end = $row['end'];
  $e->resource = $row['resource'];
  $events[] = $e;
}

echo json_encode($events);

?>

Drag and Drop Event Moving

scheduler-javascript-php-html5-event-moving.png

Handle .onEventMoved event:

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    // http://api.daypilot.org/daypilot-scheduler-oneventmoved/ 
    dp.onEventMoved = function (args) {
        DayPilot.request(
            "backend_move.php", 
            function(req) { // success
                var response = eval("(" + req.responseText + ")");
                if (response && response.result) {
                    dp.message("Moved: " + response.message);
                }
            },
            args,
            function(req) {  // error
                dp.message("Saving failed");
            }
        );        
    };
    // ...
    dp.init();
</script>

backend_move.php

<?php
require_once '_db.php';

$insert = "UPDATE events SET start = :start, end = :end, resource = :resource WHERE id = :id";

$stmt = $db->prepare($insert);

$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->bindParam(':id', $id);
$stmt->bindParam(':resource', $resource);

$received = json_decode(file_get_contents('php://input'));

$id = $received->e->id;
$start = $received->newStart;
$end = $received->newEnd;
$resource = $received->newResource;
$stmt->execute();

class Result {}

$response = new Result();
$response->result = 'OK';
$response->message = 'Update successful';

echo json_encode($response);

?>

Drag and Drop Event Creating

scheduler-javascript-php-html5-event-creating.png

Use .onTimeRangeSelected event to handle event creating.

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    // http://api.daypilot.org/daypilot-scheduler-ontimerangeselected/
    dp.onTimeRangeSelected = function (args) {
        var name = prompt("New event name:", "Event");
        dp.clearSelection();
        if (!name) return;
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            resource: args.resource,
            text: name
        });
        dp.events.add(e);

        args.text = name;

        DayPilot.request(
            "backend_create.php", 
            function(req) { // success
                var response = eval("(" + req.responseText + ")");
                if (response && response.result) {
                    dp.message("Created: " + response.message);
                }
            },
            args,
            function(req) {  // error
                dp.message("Saving failed");
            }
        ); 
    };
    // ...
    dp.init();
</script>

backend_create.php

<?php
require_once '_db.php';

$insert = "INSERT INTO events (name, start, end, resource) VALUES (:name, :start, :end, :resource)";

$stmt = $db->prepare($insert);

$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->bindParam(':name', $name);
$stmt->bindParam(':resource', $resource);

$received = json_decode(file_get_contents('php://input'));

$start = $received->start;
$end = $received->end;
$resource = $received->resource;
$name = $received->text;
$stmt->execute();

class Result {}

$response = new Result();
$response->result = 'OK';
$response->message = 'Created with id: '.$db->lastInsertId();

echo json_encode($response);

?>

Display Event Details on Hover

bubble-extended-tooltip.png

Display detailed information about an event using DayPilot.Bubble. See also .bubble property.

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");
    // ...
    // bubble, with async loading
    dp.bubble = new DayPilot.Bubble({
        cssClassPrefix: "bubble_default",
        onLoad: function(args) {
            var ev = args.source;
            args.async = true;  // notify manually using .loaded()

            // simulating slow server-side load
            setTimeout(function() {
                args.html = "<div style='font-weight:bold'>" + ev.text() + "</div><div>Start: " + ev.start().toString("MM/dd/yyyy HH:mm") + "</div><div>End: " + ev.end().toString("MM/dd/yyyy HH:mm") + "</div><div>Id: " + ev.id() + "</div>";
                args.loaded();
            }, 500);

        }
    });
    // ...
    dp.init();
</script>