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

Customizing time header cell after binding

Asked by Anonymous
3 months ago.

Hi,

I would like to customize the the time header cells by adding an icon that indicates whether a day has errors or not. I'm getting this information from the events array that is binded to the scheduler's property "events". The problem that I'm facing now, is that in the event onBeforeTimeHeaderRender this events array is not initialized yet.

So is there a way to customize the time header cells after everything is rendered?

Best regards

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

If you load the events using one of the optimized methods, e.g. events.load(); or update({events: [...]}); the Scheduler will only update the events. You'll need to force a full refresh to re-render the time headers as well, e.g.

dp.events.list = [...];
dp.update();
Comment posted by Anonymous
2 months ago.

I helped myself by adding a new top frozen row just below the timeline. The row contains events with a horizontally centered image, using the areas property. However ths image doesn't stay centered if I change the cell width like described in this tutorial: https://javascript.daypilot.org/demo/scheduler/cellwidth.html

I set a CSS class to the area, where I tried many known approaches to center the image horizontally, but without any success.

event.areas.push({
  top: 2,
  width: 16,
  height: 16,
  css: "error-day-icon",
  html: '<img src="assets/icons/warning_16.png" height="16" width="16">',
  toolTip: toolTip
});
Comment posted by Dan Letecky [DayPilot]
2 months ago.

Thanks for posting your solution!

To center the icon, you can try something like this:

var duration = new DayPilot.Duration(event.start, event.end);
var mid = event.start.addTime(duration.totalMilliseconds()/2);
event.areas.push(
{
  start: mid,
  offsetX: - 8,
  top: 2,
  width: 16,
  height: 16,
  css: "error-day-icon",
  html: '<img src="assets/icons/warning_16.png" height="16" width="16">',
  toolTip: toolTip
});

Instead of events, you can also use automatically-updated cells - that way you might be able to simplify the recalculation a bit. See also:

https://code.daypilot.org/93064/javascript-scheduler-column-summary
https://code.daypilot.org/97538/javascript-scheduler-displaying-group-availability

Comment posted by Anonymous
2 months ago.

Thank you for your answer! However this solution doesn't get rendered everytime I change the cell size. Is there any solution to trigger it? In whicht event should I put it?

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

In order to render the icon in cells, you need to use onBeforeCellRender:

dp.onBeforeCellRender = function(args) {
  if (args.cell.resource === "summary") {
    var cell = args.cell;
    var duration = new DayPilot.Duration(cell.start, cell.end);
    var mid = cell.start.addTime(duration.totalMilliseconds()/2);
    cell.areas = [{
      start: mid,
      offsetX: - 8,
      top: 2,
      width: 16,
      height: 16,
      backColor: "red",
    }];
  }
};

The cells get rendered on every update() call. If you mark the row with cellsAutoUpdated property, all cells from that row will be re-rendered on every event change (drag and drop, events.add/update/remove) as well:

dp.resources = [
  {name: "Summary", id: "summary", frozen: "top", cellsAutoUpdated: true},
  // ...
];

In some special cases (like window resize with cellWidthSpec: "Auto") the cells will be re-rendered but onBeforeCellRender will not be fired because the results are cached by default. You can turn the caching off for all cells using https://api.daypilot.org/daypilot-scheduler-beforecellrendercaching/ or you can explicitly invalidate the cache for specified cells:

dp.rows.find("summary").cells.all().invalidate();
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.