Event Calendar for JavaScript (PHP Tutorial)

JavaScript event calendar tutorial that shows how to use the widget in HTML5/PHP application.
Jul 14, 2013
javascript event calendar php

JavaScript Event Calendar Tutorial

Sample PHP Project

This tutorial shows how to use the DayPilot Event Calendar for JavaScript with PHP.

It includes a sample PHP project:

  • Loading events from the server using JSON 
  • Notifying the server about the changes (event moving, resizing, creating)
  • Displaying an extended HTML tooltip

The sample PHP project is available for download.

Example (Drag and Drop Event Creating)

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(),
        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");
        }
    ); 
};

backend_create.php

<?php
require_once '_db.php';

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

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

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

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

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

class Result {}

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

echo json_encode($response);

?>