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

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.

Index.cshtml

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

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 REPL example on dynamically changing the background color of specified events in the Scheduler.

More ASP.NET MVC Scheduler Resources

• ASP.NET MVC Scheduler Documentation

• ASP.NET MVC Scheduler Demos

• ASP.NET MVC Scheduler Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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

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

• Change Scheduler event background dynamically Telerik REPL (HtmlHelper)

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base