javascript scheduler bubble popover

JavaScript

Example: Pre-Loaded HTML

The bubble HTML can be specified as part of the event data (bubbleHtml property).

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // ...

    dp.showToolTip = false;
    dp.bubble = new DayPilot.Bubble();

    // ...

    var e = new DayPilot.Event({
      start: new DayPilot.Date("2013-03-25T00:00:00").addHours(start),
      end: new DayPilot.Date("2013-03-25T12:00:00").addHours(start).addHours(duration),
      id: DayPilot.guid(),
      resource: "B",
      text: "Event",
      bubbleHtml: "Testing bubble"
    });
    dp.events.add(e); 

</script>

Example: Dynamic HTML

    dp.bubble = new DayPilot.Bubble({
        onLoad: function(args) {
            var ev = args.source;
            args.html = "testing bubble for: " + ev.text();
        }
    });

Example: Asynchronous Loading

    dp.bubble = new DayPilot.Bubble({
        onLoad: function(args) {
            var ev = args.source;
            args.async = true;  // manual notification using .loaded() is required, see below
            
            // simulating slow server-side load
            setTimeout(function() {
                args.html = "testing bubble for: <br>" + ev.text();
                args.loaded();
            }, 500);
        }
    });