Skip to content
DayPilot

Event Calendar for JavaScript (PHP Tutorial)

JavaScript event calendar tutorial that shows how to use the widget in HTML5/PHP application.

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);

?>