Timesheet Histogram

In the ASP.NET Core Timesheet tutorial, the histogram displayed in the first (frozen) row is calculated using the following logic (in onBeforeCellRender):

onBeforeCellRender: args => {

    if (args.cell.resource === "histogram") {
        const max = timesheet.rows.all().filter(r => r.data.frozen !== "top" && r.children().length === 0).length;

        const cStartTime = args.cell.start.getTimePart();
        const cEndTime = args.cell.end.getTimePart();
        
        const allEventParts = timesheet.rows.all().flatMap(row => row.events.all());
        const inUse = allEventParts.filter(e => {
            const eStartTime = e.part.start.getTimePart();
            const eEndTime = e.part.end === e.part.start.addDays(1) ? DayPilot.Duration.ofDays(1).totalMilliseconds() :e.part.end.getTimePart();
            return DayPilot.Util.overlaps(cStartTime, cEndTime, eStartTime, eEndTime);
        }).length;
        
        const percentage = inUse / max;

        args.cell.properties.backColor = "#ffffff";
        if (inUse > 0) {

            const cellHeight = timesheet.eventHeight - 1;
            const barHeight = Math.min(percentage, 1) * cellHeight;

            args.cell.properties.areas = [
                {
                    bottom: 1,
                    height: barHeight,
                    left: 3,
                    right: 3,
                    backColor: "#dd7e6b",
                    style: "box-sizing: border-box; border: 1px solid #cc4125;",
                }
            ];
        }
    }
}

This seems to work fine.

To make sure that the histogram gets updated after drag and drop changes, the histogram row needs to be marked for automatic updates (cellsAutoUpdated):

resources: [
    {name: "Histogram", id: "histogram", frozen: "top", cellsAutoUpdated: true, ... },
    // ...
],

We already have the same in our code:

resources: [{ name: "Histogram", id: "histogram", frozen: "top", cellsAutoUpdated: true, cellsDisabled: true }],

From your post, it’s not clear what the problem is - is there a problem with calculating the histogram during the initial page load, is there a problem with updating it after an event is moved, or both?

You can debug it by adding a console.log() call or a debugger; statement into the onBeforeCellRender handler. This way, you will be able to find out if it is being called properly and if the values are what you expect.

Generally, I recommend starting with the tutorial code. This way, you can get a working version and check the differences from your code.

It used to work on an older version from the demos but when we upgraded to DayPilot Pro for JavaScript 2025.2.6484 it seems to not work as before.

This is our code which seems to be identical to yours so we don’t know what we are doing wrong.

onBeforeCellRender: args => {
    if (args.cell.resource === "UTILIZATION") {
        //const color = "#dd7e6b";
        const color = "#fcb711";
        const borderColor = DayPilot.ColorUtil.darker(color);
        const max = scheduler.rows.all().filter(r => r.data.frozen !== "top" && r.children().length === 0).length;
        const start = args.cell.start;
        const end = args.cell.end;
        const inUse = scheduler.events.all().filter(e => { return DayPilot.Util.overlaps(start, end, e.start(), e.end()); }).length;
        const percentage = inUse / max;
        args.cell.properties.backColor = "#ffffff";
        if (inUse > 0) {
            const cellHeight = scheduler.eventHeight - 10;  //was 1
            const barHeight = Math.min(percentage, 1) * cellHeight;
            args.cell.areas = [
                {
                    bottom: 1,
                    height: barHeight,
                    left: 3,
                    right: 3,
                    backColor: color,
                    style: `box-sizing: border-box; border: 1px solid ${borderColor}`,
                }
            ];
        }
    }
},

Sorry that was the wrong one - here is the correct one:

onBeforeCellRender: args => {
    if (args.cell.resource === "histogram") {
        const max = timesheet.rows.all().filter(r => r.data.frozen !== "top" && r.children().length === 0).length;
        const cStartTime = args.cell.start.getTimePart();
        const cEndTime = args.cell.end.getTimePart();
        const allEventParts = timesheet.rows.all().flatMap(row => row.events.all());
        const inUse = allEventParts.filter(e => {
            const eStartTime = e.part.start.getTimePart();
            const eEndTime = e.part.end === e.part.start.addDays(1) ? DayPilot.Duration.ofDays(1).totalMilliseconds() : e.part.end.getTimePart();
            return DayPilot.Util.overlaps(cStartTime, cEndTime, eStartTime, eEndTime);
        }).length;
        const percentage = inUse / max;
        args.cell.properties.backColor = "#ffffff";
        if (inUse > 0) {
            const cellHeight = timesheet.eventHeight - 1;
            const barHeight = Math.min(percentage, 1) * cellHeight;
            args.cell.properties.areas = [
                {
                    bottom: 1,
                    height: barHeight,
                    left: 3,
                    right: 3,
                    backColor: "#dd7e6b",
                    style: "box-sizing: border-box; border: 1px solid #cc4125;",
                }
            ];
        }
    }
}

Your second example corresponds to the logic from the latest tutorial project.

I recommend the following steps:

1. Try running the tutorial code with the latest DayPilot Pro version to see if it works for you. It seems to work fine in my tests.

2. If it does, try the debugging steps described above:

You can debug it by adding a console.log() call or a debugger; statement into the onBeforeCellRender handler. This way, you will be able to find out if it is being called properly and if the values are what you expect.

You are right. It works in the demo with 2025.2.6484 but we cannot figure out why it does not work for us.
We will keep trying.