JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › set the background color of an event
- This topic has 3 replies, 2 voices, and was last updated 3 years, 1 month ago by
kboughaba.
-
AuthorPosts
-
July 28, 2021 at 9:00 am #102100
kboughaba
Memberhello,
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.July 28, 2021 at 9:34 am #102101kboughaba
Memberis 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.July 28, 2021 at 4:40 pm #102102yavordashew
MemberHi 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/July 29, 2021 at 8:20 am #102105kboughaba
MemberHello,
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. -
AuthorPosts
- You must be logged in to reply to this topic.