set the background color of an event

[kboughaba]

hello,
i’m trying to insert into scheduler ( i took the exemple of doctor’s scheduler) some events, but i want to set other color background for my event that I just created it, so for each onItemInsert($event) i want to set the backgroundColor of the event by another color.
Is there any way to do that please ?
Thank you.

[kboughaba]

is there any way to change the default value of –smart-scheduler-event-background-rgb ? to set it into Angular ?
i want for each time i create an event ( each time i click Ok while creating an event ), i set a color for the event background.
Thank you.

[yavordashew]

Hi kboughaba,
By default the Scheduler component does not support this functionality by default but I have created a workaround how to achieve this functionality and we bind for the insertItem event.
In your app.component.ts:

  onItemInsert(event) {
    const detail = event.detail,
        item = detail.item;
    setTimeout(() => {
      let schedulerEvents = document.querySelectorAll('.smart-scheduler-event');
      let schedulerEventsCount = schedulerEvents.length;
      schedulerEvents[schedulerEventsCount - 1 ].classList.add('new-event-class');
    }, 100);
}

and in your app.component.html:

<smart-scheduler #scheduler id="scheduler" [dataSource]="dataSource" [view]="view" [views]="views"
    [hideAllDay]="hideAllDay" [hourStart]="hourStart" [hourEnd]="hourEnd" [nonworkingDays]="nonworkingDays"
    [nonworkingHours]="nonworkingHours" [hideNonworkingWeekdays]="hideNonworkingWeekdays"
    [firstDayOfWeek]="firstDayOfWeek" [viewSelectorType]="viewSelectorType" [groups]="groups"
    [groupTemplate]="groupTemplate" [timelineDayScale]="timelineDayScale"
    [timelineHeaderFormatFunction]="timelineHeaderFormatFunction" [resources]="resources"
    (itemInsert)="onItemInsert($event)"
    >
</smart-scheduler>

and also in your app.component.css:

.smart-scheduler-event.new-event-class{
    --smart-scheduler-event-background: red!important;
    --smart-scheduler-event-focus:red!important;
    --smart-scheduler-event-hover:red!important;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kboughaba]

Hello,
thank you for your reply, it works yes, but i wanted to set the color of the event’s color in the onItemInsert function, each event has his own color that i will set it while onItemInsert($event).
your code set only one color for all the event, i want for exemple, event_1 has color green, event_2 has color blue, etc,..
I’m waiting for your feedback,
thank you.

[Author]

Posts