Our pure JavaScript Scheduler component

Post by emma.fourier@moss.fr »


I would like to display between events B and C a particular colour as in the Nested Event Demo (https://bryntum.com/products/scheduler/examples/nestedevents/).
This works when the zoomLevel is greater than or equal to 7, if the zoom is less there is a significant offset.

capture.PNG (9.29 KiB) Viewed 139 times
Capture2.PNG (11.43 KiB) Viewed 139 times

I use the getDistanceForDuration function to calculate the position and size of the nestedEvent.

startDateMainEvent is the date of the event A.

                    ... new OffsetMultiColorEventConfig(),
                   startOffset : this.getDistanceForDuration(startDateMainEvent, moment(startEvent.getData('startDate'))),
                    widthOffset: this.getDistanceForDuration(moment(startEvent.getData('startDate')), moment(endEvent.getData('endDate'))),
                    color: config.color + 'a3'

In the eventBodyTemplate I recalculate the position and size each time :

offset?.forEach((o, i) => {
                    result += `<div class="nested" style="left : ${o.startOffset}px; width: ${o.widthOffset}px; background-color : ${o.color}; border-radius: 2em; opacity : 0.8"></div>`;

Is there anything I am doing wrong? Can you help me to solve the problem please?


Post by tasnim »


Can't say what's wrong without seeing the whole code. Could you please upload full code here so we can reproduce it and debug it?

Best of luck,

Post by emma.fourier@moss.fr »

Hi Tasnim,

Here is the file containing all the code.

(294.11 KiB) Downloaded 3 times

You will find in bcs_ng\entity\road-map\bryntum\display-config.ts the function calculateOffsetMultiColorEventConfig which allows to calculate the position and the size

Thanks for your help

Post by Animal »

Maybe try using getPositionFromDate instead? That will handle non-contiguous timelines.

Post by emma.fourier@moss.fr »

I have already tried to use getPositionFromDate but if the date of event A is no longer in the timeAxis it returns -1. So I can't get the distance in px between event A and B.

Post by mats »

Need to then set boundaries on your parameters to limit to what's in view. DateHelper has methods to help you: https://bryntum.com/products/grid/docs/api/Core/helper/DateHelper#function-min-static

Post Reply