HTML5 Hotel Room Booking (JavaScript/PHP) bubble

The bubble text/HTML needs to be specified using "bubbleHtml" property of the event data object:

https://doc.daypilot.org/scheduler/event-bubble/

If the "bubbleHtml" property is not part of the server-side JSON response the event bubble won't be displayed. You might want to check if the property is set correctly. You can also add it to the event data using onBeforeEventRender event handler on the client side:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.events.list = [
    {
      start: "2013-03-25T00:00:00",
      end: "2013-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event"
    }
  ];
  dp.onBeforeEventRender = function(args) {
    args.data.bubbleHtml = "Additional information for: " + args.e.text;
  };
  // ...
  dp.init();
</script>

Hello Dan,
thank you for your answer. I am new to php and web developement. I have ordered my copy of daypilot today.

I see there is dp.events.list = data; inside the function data. Can you please show how to insert the "bubbleHtml" property there.
You have a very nice product.
Thank you in advance
Otto

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

Hi Otto,

If you check backend_events.php you'll see how the event data is loaded from the database:

<?php
require_once '_db.php';

$stmt = $db->prepare("SELECT * FROM reservations WHERE NOT ((end <= :start) OR (start >= :end))");
$stmt->bindParam(':start', $_POST['start']);
$stmt->bindParam(':end', $_POST['end']);
$stmt->execute();
$result = $stmt->fetchAll();

class Event {}
$events = array();

date_default_timezone_set("UTC");
$now = new DateTime("now");
$today = $now->setTime(0, 0, 0);

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'];
    $events[] = $e;

}

header('Content-Type: application/json');
echo json_encode($events);

?>

You can see that the bubbleHtml property is set using the following line:

    $e->bubbleHtml = "Reservation details: <br/>".$e->text;

If you have modified the backend_events.php file you'll need to check if this property is set properly.

Hello Dan,
I inserted contextMenu to check the value of bubbleHtml.
Can you please give me the right syntax.
Thank you in advance
Otto

dp.contextMenu = new DayPilot.Menu({items: [
{text:"bubble", onclick: function() { dp.message( args.e.bubbleHtml ); } },

You can check it using the context menu like this:

dp.contextMenu = new DayPilot.Menu({items: [ 
{text:"bubble", onClick: function(args) { dp.message(args.source.data.bubbleHtml ); } },

But it may be a better way to open the browser developer tools (Ctrl-Shift-I on Windows) and type dp.event.list in the console. That will list the whole event.list array.

You can also use the developer tools to see the actual response from the server (Network tab).

Dan
thank you so much.
onClick: function(args) { dp.message(args.source.data.bubbleHtml ) shows "Reservation details".
But I get no tooltips.
Would you be so kind to help me once more.

Thank you and best regards
Otto

Hello
now I have following situation:
with Internet Explorer, Google Chrome and Microsoft Edge
the bubble is shown but not with
Mozilla Firefox.
I am testing with the demo version.
Best regards
Otto

Hello Dan
I installed the full version and now all is working fine.
Thank you for your help.
Best regards
Otto