Hi,
I added a class to half day events (the “half-day-morning” class, see attached image)
and I'm trying to add css to this event class parent (to add padding to “b-sch-event-wrap” from the children).
Is there an option to add a class to the parent instead of the children or to add css from the children to the parent?
My main goal is to have different paddings for events of half days
Sure, see docs https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer
wrapperCls
Hi,
I tried with wrapperCls but it dosen't seems to work for me
Hi michael cohen,
Please post the code you are using, and what do you see when you inspect DOM tree.
private getBobSchedulerEvents(requests: CalendarTORequest[]): BobSchedulerEvent[] {
return requests?.map(request => {
const eventColor = this.colorPaletteService.getPaletteColorByIndex(request.policyTypeOrder);
const eventType = request.status === TimeOffRequestStatus.approved ? EventBuiltInStyles.plain : EventBuiltInStyles.hollow;
const eventClassForTextColor = this.getEventTextColorClass(eventColor, eventType);
return {
id: request.id,
resourceId: request.employeeId,
name: `${request.policyTypeDisplayName}`,
...this.getEventRanges(request),
eventType: EventTypes.meeting,
eventColor: eventColor,
iconCls: null,
wrapperCls: 'testClass',
cls: eventClassForTextColor,
eventStyle: eventType,
startDatePortion: this.timePortionOfTheDay(request.startPortion),
endDatePortion: this.timePortionOfTheDay(request.endPortion),
hours: request.hoursOnDate,
};
});
}This is my code, if I add the function to the cls it works but for the wrapperCls it doesn't work.
I expect to see the class that I added but It's not there.
Hi,
EventModel doesn't have a wrapperCls property, you need to use it inside of https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer
Like this:
eventRenderer : ({ renderData, eventRecord }) => {
// adding wrapper cls to the parent of the event
renderData.wrapperCls.add('example-class');
return eventRecord.name;
}