Page 1 of 1
[ANGULAR] Add class to event parent
Posted: Mon Jul 11, 2022 10:29 am
by michael cohen
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
Re: [ANGULAR] Add class to event parent
Posted: Mon Jul 11, 2022 10:59 am
by mats
Re: [ANGULAR] Add class to event parent
Posted: Sun Aug 07, 2022 3:06 pm
by michael cohen
Hi,
I tried with wrapperCls but it dosen't seems to work for me
Re: [ANGULAR] Add class to event parent
Posted: Mon Aug 08, 2022 8:05 am
by alex.l
Hi michael cohen,
Please post the code you are using, and what do you see when you inspect DOM tree.
Re: [ANGULAR] Add class to event parent
Posted: Sun Sep 04, 2022 2:57 pm
by michael cohen
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.
Re: [ANGULAR] Add class to event parent
Posted: Mon Sep 05, 2022 4:31 am
by tasnim
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;
}