Custom rendering requirements during PNG export

Asked by Olivier Rossel
4 years ago.

Before considering buying a licence of DayPilot, we would like to evaluate the difficulty of adapting the export PNG feature to some custom rendering requirements.
Basically, the idea is to have a "xPercent" property in each event data, and each event rendering will background-color only the left xPercent% of the event rectangle.
[like a kind of progress bar]

Is it a difficult behaviour to add to DayPilot?

how-to javascript

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

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}%`}
    ];

};

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