Custom rendering requirements during PNG export

There are two options:

1. You can switch the built-in bar (displayed at the top of the event) to "progress" mode:
https://doc.daypilot.org/scheduler/percent-complete/

2. You can build the progress bar using two active areas like this:

dp.onBeforeEventRender = args => {
    const percentage = 56;

    const start = new DayPilot.Date(args.data.start);
    const end = new DayPilot.Date(args.data.end);

    const progress = (end.getTime() - start.getTime()) * (percentage / 100);
    const complete = start.addTime(progress);

    args.data.areas = [
        { start, end, bottom: 0, height: 20, backColor: "#ccc"},
        { start, end: complete, bottom: 0, height: 20, backColor: "#333", fontColor: "#fff", text: `${percentage}%`}
    ];

};