Tutorial: HTML5 Scheduler (JavaScript, PHP)

Tutorial:

• HTML5 Scheduler (JavaScript, PHP)

Features:

• HTML5 scheduler displaying a monthly timeline
• Pure JavaScript solution with no third party libraries required
• Sample PHP backend with SQLite database
• Compatible with jQuery
• Resources grouped by categories (People, Tools)
• Custom time header formatting
• Drag and drop event creating, moving and resizing

Resource tree loading sample (JavaScript)

JavaScript

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

  function loadResources() {
    $.post("backend_resources.php", function(data) {
      dp.resources = data;
      dp.update();
    });
  }

</script>

Sample JSON data

[
  {"id":"group_1","name":"People","expanded":true,"children":
    [
      {"id":"1","name":"Person 1"},
      {"id":"2","name":"Person 2"},
      {"id":"3","name":"Person 3"},
      {"id":"4","name":"Person 4"}
    ]
  },
  {"id":"group_2","name":"Tools","expanded":true,"children":
    [
      {"id":"5","name":"Tool 1"},
      {"id":"6","name":"Tool 2"},
      {"id":"7","name":"Tool 3"},
      {"id":"8","name":"Tool 4"}
    ]
  }
]

PHP backend

<?php
require_once '_db.php';
    
$scheduler_groups = $db->query('SELECT * FROM [groups] ORDER BY [name]');

class Group {}
class Resource {}

$groups = array();

foreach($scheduler_groups as $group) {
  $g = new Group();
  $g->id = "group_".$group['id'];
  $g->name = $group['name'];
  $g->expanded = true;
  $g->children = array();
  $groups[] = $g;
  
  $stmt = $db->prepare('SELECT * FROM [resources] WHERE [group_id] = :group ORDER BY [name]');
  $stmt->bindParam(':group', $group['id']);
  $stmt->execute();
  $scheduler_resources = $stmt->fetchAll();  
  
  foreach($scheduler_resources as $resource) {
    $r = new Resource();
    $r->id = $resource['id'];
    $r->name = $resource['name'];
    $g->children[] = $r;
  }
}

header('Content-Type: application/json');
echo json_encode($groups);

?>