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

HTML5 Hotel Room Booking (JavaScript/PHP) bubble

Asked by Otto
3 months ago.

Hello
I am testing with HTML5 Hotel Room Booking (JavaScript/PHP).
bubble is working fine when I do not connect to SQL server.
If I establish a connection "bubble" is not shown.
Can someone please help.
Thank you in advance
Otto

Answer posted by Dan Letecky [DayPilot]
3 months ago.

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>
Comment posted by Otto
3 months ago.

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

Comment posted by Dan Letecky [DayPilot]
3 months ago.

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.

Comment posted by Otto
3 months ago.

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

Comment posted by Dan Letecky [DayPilot]
3 months ago.

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).

Comment posted by Otto
3 months ago.

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

Comment posted by Anonymous
3 months ago.

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

Comment posted by Anonymous
3 months ago.

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

New Reply
This reply is
Your name (optional):