Customizing time header cell after binding

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

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

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

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?

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