How to combine this with the HTML5 Room Booking system

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

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;
}
// ...

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

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,
Jorma

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.

Ok,

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

And in var highlight
e.data.backColor = null;

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

Thak's again, Dan.

Regards,
Jorma