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

Custom rendering requirements during PNG export

Asked by Olivier Rossel
2 days 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?

Answer posted by Dan Letecky [DayPilot]
2 days ago.

There are two options:

1. You can switch the built-in bar (displayed at the top of the event) to "progress" mode:

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

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

    const start = new DayPilot.Date(;
    const end = new DayPilot.Date(;

    const progress = (end.getTime() - start.getTime()) * (percentage / 100);
    const complete = start.addTime(progress); = [
        { start, end, bottom: 0, height: 20, backColor: "#ccc"},
        { start, end: complete, bottom: 0, height: 20, backColor: "#333", fontColor: "#fff", text: `${percentage}%`}

New Reply
This reply is
Your name (optional):