Premium support for our pure JavaScript UI components


Post 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

Attachments
Screen Shot 2022-07-11 at 10.37.35.png
Screen Shot 2022-07-11 at 10.37.35.png (661.17 KiB) Viewed 189 times
Last edited by michael cohen on Sun Sep 04, 2022 2:48 pm, edited 1 time in total.

Post by mats »


Post by michael cohen »

Hi,
I tried with wrapperCls but it dosen't seems to work for me


Post by alex.l »

Hi michael cohen,
Please post the code you are using, and what do you see when you inspect DOM tree.

All the best,
Alex


Post 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.

Attachments
check.png
check.png (329.55 KiB) Viewed 71 times

Post 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;
}
Attachments
b9GoEYslhH.png
b9GoEYslhH.png (108.39 KiB) Viewed 64 times

Best of luck,
Tasnim


Post Reply