Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #102100

    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.


    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.


    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"

    and also in your app.component.css:{
        --smart-scheduler-event-background: 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


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.