Included
- DayPilot Pro for JavaScript 8.4 Trial
- Sample SQLite database
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
- Configure the cell dimensions using .eventHeight and .cellWidth properties.
- Set the time scale (cell duration) using .cellDuration property.
- 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
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
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
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
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
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
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>
