Change the Background Color of an Event Dynamically in the Scheduler
Environment
| Product Version | 2024.1.130 |
| Product | Telerik UI for ASP.NET Core Scheduler |
Description
How can I change the color of the entire element of the Telerik UI for ASP.NET Core 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)
)
<kendo-scheduler name="scheduler"
height="400"
timezone="Etc/UTC"
on-data-bound="onDataBound">
<views>
<view type="day"></view>
<view type="week" selected="true"></view>
<view type="month"></view>
<view type="agenda"></view>
<view type="timeline"></view>
</views>
<scheduler-datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@data">
<schema data="Data" total="Total" errors="Errors">
<scheduler-model id="TaskID">
<fields>
<field name="TaskID" type="number"></field>
<field name="title" from="Title" type="string"></field>
<field name="start" from="Start" type="date"></field>
<field name="end" from="End" type="date"></field>
<field name="description" from="Description" type="string"></field>
<field name="recurrenceId" from="RecurrenceID" type="number" default-value=null></field>
<field name="recurrenceRule" from="RecurrenceRule" type="string" ></ field>
<field name="recurrenceException" from="RecurrenceException" type="string"></field>
<field name="OwnerID" type="number" default-value="1"></field>
<field name="startTimezone" from="StartTimezone" type="string"></ field>
<field name="endTimezone" from="EndTimezone" type="string"></field>
<field name="isAllDay" from="IsAllDay" type="boolean"></field>
</fields>
</scheduler-model>
</schema>
</scheduler-datasource>
</kendo-scheduler>
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 Telerik REPL examples: