Premium support for our pure JavaScript UI components


Post by indumati.raghumajji »

Hi Team,

I'm currently working on an event with a custom properties "loadDuration" and "unloadDuration" , this needs to be rendered before and after event (Please refer attachment) .

The problem is I have the "loadDuration" in minutes and I need to convert it to px in the "eventRenderer".

I calculated using few methods like below. But am not sure if this is the correct way. Please point me to correct method.

             const dateToPx = (date1, date2) => this.getCoordinateFromDate(date2) - 
             this.getCoordinateFromDate(date1);

           var load = {
                            left: "0px",
                            width: dateToPx(eventRecord.startDate, loadEndDate)
                        };
                        var unload = {
                            right: "0px",
                            width: dateToPx(unloadStartDate, eventRecord.endDate)
                        };
 

And also this doesn't work if the user starts zooming in and out as the width of the cells change, is there a way to obtain the zoom level or tick width inside the "eventRenderer"?

And event name is not rendered after overriding eventRenderer, How to persist event name ?

Please clarify.

Thanks!

Attachments
loadunload.PNG
loadunload.PNG (134.49 KiB) Viewed 365 times

Post by mats »

I calculated using few methods like below. But am not sure if this is the correct way. Please point me to correct method.

Looks like a reasonable approach yes.

And also this doesn't work if the user starts zooming in and out as the width of the cells change, is there a way to obtain the zoom level or tick width inside the "eventRenderer"?

Yes it will work fine, events are redrawn when zooming.

And event name is not rendered after overriding eventRenderer, How to persist event name ?

Please study our docs: https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

You need to return the string / HTML you want inside the event bar from the eventRenderer.


Post Reply