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

1. Create a property within the Scheduler Model that will hold the Color field.
2. Subscribe to the DataBound event of the Scheduler.
3. 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.

Razor

    @(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)
    )

Razor

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

SchedulerModel.cs

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.js

    <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:

• Telerik REPL for ASP.NET Core HtmlHelper example
• Telerik REPL for ASP.NET Core TagHelper example

More ASP.NET Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET Core

• Server-Side API Reference of the Scheduler for ASP.NET Core

• TagHelper API reference of the Scheduler

• Change Scheduler event background dynamically Telerik REPL (HtmlHelper)

• Change Scheduler event background dynamically Telerik REPL (TagHelper)

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base