Tutorial: HTML5 Scheduler with Dynamic Event Loading (JavaScript, PHP)

Tutorial:

• HTML5 Scheduler with Dynamic Event Loading (JavaScript/jQuery, PHP)

Features:

• JavaScript/HTML5 scheduler component
• Scheduler event data are loaded dynamically during scrolling
• Resources grouped by category on the vertical axis
• One year split into days and grouped by months
• Drag and drop event creating, moving, and resizing
• PHP backend with source code

Configuration Example (JavaScript and jQuery)

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

  dp.dynamicLoading = true;
  dp.onScroll = function(args) {
    args.async = true;
    
    var start = args.viewport.start;
    var end = args.viewport.end;
    
    $.post("backend_events.php", 
      {
        start: start.toString(),
        end: end.toString()
      },
      function(data) {
        args.events = data;
        args.loaded();
      }
    );
      
  };

  dp.init();

</script>

PHP Backend Example

<?php
require_once '_db.php';
    
$stmt = $db->prepare('SELECT * FROM [events] WHERE NOT ((end <= :start) OR (start >= :end))');
$stmt->bindParam(':start', $_POST['start']);
$stmt->bindParam(':end', $_POST['end']);
$stmt->execute();
$result = $stmt->fetchAll();

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_id'];
  $e->bubbleHtml = "Event details: <br/>".$e->text;
  $events[] = $e;
}

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

?>

The sample PHP project is available for download.