Change the Background Color of an Event Dynamically in the Scheduler
Environment
| Product Version | 2024.1.130 |
| Product | Telerik UI for ASP.NET MVC Scheduler |
Description
How can I change the color of the entire element of the Telerik UI for ASP.NET MVC Scheduler component's events dynamically?
Solution
- Create a property within the Scheduler Model that will hold the
Colorfield. - Subscribe to the
DataBoundevent of the Scheduler. - Within the event handler, iterate over the event records and their DOM element counterparts and explicitly change their background color by using the jQuery
css()method.
@(Html.Kendo().Scheduler<SchedulerModel>()
.Name("scheduler")
.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
.Height(600)
.Editable(false)
.Events(events => events.DataBound("onDataBound"))
.Views(views =>
{
views.DayView();
views.WorkWeekView(workWeekView =>
{
workWeekView.Selected(true);
});
views.WeekView();
views.MonthView();
})
.Timezone("Etc/UTC")
.BindTo(@data)
)
public class SchedulerModel : ISchedulerEvent
{
public int TaskID { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Color {get;set;} // Property that will be used in the DataBound event handler.
private DateTime start;
public DateTime Start
{
get
{
return start;
}
set
{
start = value.ToUniversalTime();
}
}
public string StartTimezone { get; set; }
private DateTime end;
public DateTime End
{
get
{
return end;
}
set
{
end = value.ToUniversalTime();
}
}
public string EndTimezone { get; set; }
public string RecurrenceRule { get; set; }
public int? RecurrenceID { get; set; }
public string RecurrenceException { get; set; }
public bool IsAllDay { get; set; }
public int? OwnerID { get; set; }
public Task ToEntity()
{
return new Task
{
TaskID = TaskID,
Title = Title,
Start = Start,
StartTimezone = StartTimezone,
End = End,
EndTimezone = EndTimezone,
Description = Description,
RecurrenceRule = RecurrenceRule,
RecurrenceException = RecurrenceException,
RecurrenceID = RecurrenceID,
IsAllDay = IsAllDay,
OwnerID = OwnerID
};
}
}
<script>
function onDataBound(e) {
var view = this.view();
var events = this.dataSource.view(); // 1. Gather the currently present events in the view.
var eventElement; // 2. Create Flag variables for the event DOM element and event object representation.
var event;
debugger;
for (var idx = 0, length = events.length; idx < length; idx++) { // 3. Iterate over each of the event entries.
event = events[idx];
eventElement = view.element.find("[data-uid=" + event.uid + "]"); // 4. Gather the DOM representation of the currently iterated event.
// Set the background of the element.
eventElement.css("background-color", event.Color); // 5. Change the color based on the established color field coming from the event model.
}
}
</script>
To see a full implementation of the aforementioned approach refer to the following REPL example on dynamically changing the background color of specified events in the Scheduler.