Our pure JavaScript Scheduler component


Post by Softhouse »

Hi!

We are using our own custom event layout to get certain events to be displayed on top of other events (the purple event):
Image

In some cases the event is shown behind instead though (only a small line below is shown):
Image

From what I can see the reason that the event is displayed behind or not is depending on the order of the html-elements.

Do you have any ideas on how to control the order or setting z-index?

It is possible to set a class on the event using renderData.cls in the eventRenderer-function, but that class is set on "b-sch-event", which is a child to "b-sch-event-wrap", so setting z-index there doesn't help.

Attachments
Overlapping event bug.png
Overlapping event bug.png (1.2 KiB) Viewed 362 times
Overlapping event.png
Overlapping event.png (1.51 KiB) Viewed 362 times

Post by alex.l »

Try to use renderData.wrapperCls?
Check in docs: https://bryntum.com/docs/scheduler-pro/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

rendererData.wrapperCls
An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.

All the best,
Alex


Post by Softhouse »

Thanks! Exactly what I was looking for.


Post Reply