search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to combine this with the HTML5 Room Booking system

Related article: JavaScript Scheduler: Highlighting Related Events
Asked by Jorma Hytonen
4 years ago.

I use the HTML5 Hotel Room Booking (JavaScript/PHP backend/MySQL database),
so events are reservations and all reservations are in MySQL database
not like this = [
{ id: 1, text: "Event 1 (Group 1)", start: "2019-11-05T00:00:00", end: "2019-11-11T00:00:00", resource: "R1", relatedKey: 1},
{ id: 4, text: "Event 4 (Group 2)", start: "2019-11-02T00:00:00", end: "2019-11-12T00:00:00", resource: "R4", relatedKey: 2},

How can i use this method together with reservations database?

Jorma Hytonen

Comment posted by Jorma Hytonen
4 years ago.

If I add one field (relatedKey) to my reservations table, how can I generate a Related Events list from a database?

Answer posted by Dan Letecky [DayPilot]
4 years ago.

Hi Jorma,

You'll need to add a new field to the database (if you don't have one that holds the information already).

Then you need to add it to the JSON output in backend_events.php:

// ...
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['room_id'];
    $e->bubbleHtml = "Reservation details: <br/>".$e->text;
    // additional properties
    $e->status = $row['status'];
    $e->paid = $row['paid'];
    $e->relatedKey = $row['relatedKey'];
    $events[] = $e;
// ...
Comment posted by Jorma Hytonen
4 years ago.

This is how it works!
I'll try this right away and ask if the Hotel is interested.
I know they have a lot of guests who belong to a group.

Thanks a lot, Dan

Comment posted by Jorma Hytonen
4 years ago.

Hi Dan,
I tried this code and I have a little problem.

I add 'reservations' table one column: relatedKey int(10) unsigned
The default value is 0 (zero) so that I can identify those reservations that do not belong to any group
I updated the value of three reservations to 1 (eg. Group 1)
But before any 'Highlighting Related Reservations', I get a Delete symbol and an Info bubble.

Delete event is handled by (Hover)
dp.onBeforeEventRender = function(args) {
// Event Delete handler to prevent build-in grey X for deletion
args.e.areas =
[{ bottom: 4, right: 4, width: 15, height: 15, v: "Hover",
style: "background-image:url('icons/erase.png')",
action: "JavaScript",
js: function(e) {
var args = {};
args.e = e;
// ...

Bubble is regular DayPilot
dp.bubble = new DayPilot.Bubble({});

Since I cannot post attachments through this, I will send them separately via email.

Best regards,

Comment posted by Dan Letecky [DayPilot]
4 years ago.

Hi Jorma,

You are overriding the barColor value in onBeforeEventRender. That's why the value set in onEventMouseOver isn't applied. Try changing a different property (e.g. backColor) or use a custom CSS class (cssClass property) to highlight the related events.

Comment posted by Jorma Hytonen
4 years ago.


In dp.onEventMouseOver I change = "#e6e6e6"; // barColor: #00cc00 => backColor: #e6e6e6

And in var highlight = null;

So I kept the old colors for the actual reservations.
A little tweaking, but now it looks good !!

Thak's again, Dan.


This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.