New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.
    @(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:

More ASP.NET Core Scheduler Resources

See Also

In this article