Add event listener on holiday marked cells

Asked by T175
5 years ago.

Hello,

I'm able now to show the holidays on my calender but I want to add an interaction, when the user hovers on the highlighted cell.
For Example, the christmas is highlighted in orange and I want to show some informations, when the user hovers on this christmas cell. It should do the same behaviour as "DayPilot.Bubble".

Thanks in advance!

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

You can display a custom text/html using a cell bubble if you add this to the config:

var dp = new DayPilot.Scheduler("dp", {
    // ...
    cellBubble: new DayPilot.Bubble({
      onLoad: function(args) {
        console.log("bubble", args.source);
        var cell = args.source;

        // resource holidays
        var row = dp.rows.find(cell.resource);
        var holidays = row.data.holidays;

        if (holidays) {
          var item = holidays.find(function(range) {
            var start = new DayPilot.Date(range.start);
            var end = new DayPilot.Date(range.end).addDays(1);
            return DayPilot.Util.overlaps(start, end, cell.start, cell.end);
          });
          if (item) {
            args.html = "resource holiday";
            return;
          }
        }

        // global holidays
        var item = globalHolidays.find(function(range) {
          var start = new DayPilot.Date(range.start);
          var end = new DayPilot.Date(range.end).addDays(1);
          return DayPilot.Util.overlaps(start, end, cell.start, cell.end);
        });

        if (item) {
          args.html = "global holiday";
          return;
        }
      }
    })

Comment posted by T175
5 years ago.

It is exactly what I wanted... Thank you!

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