Question

Design a site to book a conference room.

Consider the factors required to choose an appropriate room. Support both fixed and flexible requirements. What information do you need to provide so that users are confident that they have chosen the right room?

Answer 1

HTML5/JavaScript

<div id="dp"></div> <script> var dp = new DayPilot.Scheduler("dp"); dp.init(); </script>

Adjusting Scheduler Scale and Time Headers

<div id="dp"></div> <script type="text/javascript"> var dp = new DayPilot.Scheduler("dp"); dp.startDate = DayPilot.Date.today().firstDayOfMonth(); dp.days = DayPilot.Date.today().daysInMonth(); dp.scale = "Day"; dp.timeHeaders = [ { groupBy: "Month", format: "MMMM yyyy" }, { groupBy: "Day", format: "d" } ]; dp.init(); </script>

Loading Conference Rooms

We want to display the service rooms as Scheduler resources on the vertical (Y) axis. The room data is stored in the MySQL database and we will need to load them from the server using a REST API. We can use jQuery $.post() to load the room data using an HTTP call.

JavaScript

DEMO September 2019 15 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 17 18 19 Room 1 Room 2 Room 3 Room 4 Room 5

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

The Scheduler also provides a shortcut rows.load() method that lets us simplify the room loading function:

function loadResources() {   dp.rows.load("backend_rooms.php"); }

The server-side backend_rooms.php script is a simple JSON endpoint that returns the Service room data in the following format:

[ {"id":"1","name":"Room 1","capacity":"2","status":"Dirty"}, {"id":"2","name":"Room 2","capacity":"2","status":"Cleanup"}, {"id":"3","name":"Room 3","capacity":"2","status":"Ready"}, {"id":"4","name":"Room 4","capacity":"4","status":"Ready"}, {"id":"5","name":"Room 5","capacity":"1","status":"Ready"} ]

The PHP script loads the rooms from MySQL database and returns a JSON array. In addition to the required properties (id and name), the response also includes additional room data (status and capacity) which we will use later to customize the front desk view.

backend_rooms.php

<?php require_once '_db.php'; $stmt = $db->prepare("SELECT * FROM rooms ORDER BY name"); $stmt->execute(); $rooms = $stmt->fetchAll(); class Room {} $result = array(); foreach($rooms as $room) { $r = new Room(); $r->id = $room['id']; $r->name = $room['name']; $r->capacity = $room['capacity']; $r->status = $room['status']; $result[] = $r; } header('Content-Type: application/json'); echo json_encode($result); ?>

Our application stores additional room information in the database (capacity, status) and we would like to display them in the reservation overview in additional row header columns. The columns can be defined using rowHeaderColumns property.

JavaScript

dp.rowHeaderColumns = [ {title: "Room", width: 80}, {title: "Capacity", width: 80}, {title: "Status", width: 80} ];

There is a special rendering event (onBeforeResHeaderRender) that will let us customize the row headers. We will create a new event handler to map the room data to columns.

JavaScript

dp.onBeforeResHeaderRender = function(args) { var beds = function(count) { return count + " bed" + (count > 1 ? "s" : ""); }; args.resource.columns[0].html = beds(args.resource.capacity); args.resource.columns[1].html = args.resource.status; switch (args.resource.status) { case "Dirty": args.resource.cssClass = "status_dirty"; break; case "Cleanup": args.resource.cssClass = "status_cleanup"; break; } };

We have added custom CSS classes to the room headers depending on the room status ("status_dirty", "status_cleanup").

Our Scheduler component uses the built-in CSS theme ("scheduler_default"). We can extend the theme by overriding specified classes. This will let us modify the row appearance depending on the room status.

<style type="text/css"> .scheduler_default_rowheader_inner { border-right: 1px solid #ccc; } .scheduler_default_rowheader.scheduler_default_rowheadercol2 { background: #fff; } .scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner { top: 2px; bottom: 2px; left: 2px; background-color: transparent; border-left: 5px solid #1a9d13; /* green */ border-right: 0px none; } .status_dirty.scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner { border-left: 5px solid #ea3624; /* red */ } .status_cleanup.scheduler_default_rowheadercol2 .scheduler_default_rowheader_inner { border-left: 5px solid #f9ba25; /* orange */ } </style>

Now we want to load the reservations (events) from MySQL database. Again, we will use a call to the REST API and update the view as soon as the response arrives.

JavaScript

function loadEvents() { var start = dp.visibleStart(); var end = dp.visibleEnd(); $.post("backend_events.php", { start: start.toString(), end: end.toString() }, function(data) { dp.events.list = data; dp.update(); } ); }