Reply To: set the background color of an event

[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/