Change background color of event in the databound of the Scheduler

Environment

Product	Progress® Kendo UI® Scheduler for jQuery
Operating System	All
Browser	All

Description

I want to change the color of the entire element of the Scheduler event.

Solution

1. Subscribe to the dataBound event of the Scheduler.
2. In the dataBound event handler iterate over the rendered events and change the background of the needed events.

<div id="scheduler"></div>

<script>
    $(function() {
      $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 10:00"),
        endTime: new Date("2013/6/13 23:00"),
        height: 600,
        views: ["day", "agenda"],
        editable: false,         
        dataBound: function(e){
          var view = this.view();
          var events = this.dataSource.view();
          var eventElement;
          var event;

          for (var idx = 0, length = events.length; idx < length; idx++) {
            event = events[idx];
	  		if(event.title === "The Help"){
            	eventElement = view.element.find("[data-uid=" + event.uid + "]");
              //set the background of the element
              eventElement.css("background-color", "lightgreen");
            }              
          }
        },
        dataSource: [
          {
            title: "Fast and furious 6",
            image: "https://demos.telerik.com/kendo-ui/content/web/scheduler/fast-and-furious.jpg",
            imdb: "http://www.imdb.com/title/tt1905041/",
            start: new Date("2013/6/13 17:00"),
            end: new Date("2013/6/13 18:30")
          },
          {
            title: "The Internship",
            image: "https://demos.telerik.com/kendo-ui/content/web/scheduler/the-internship.jpg",
            imdb: "http://www.imdb.com/title/tt2234155/",
            start: new Date("2013/6/13 14:00"),
            end: new Date("2013/6/13 15:30")
          },
          {
            title: "The Help",
            image: "https://demos.telerik.com/kendo-ui/content/web/scheduler/the-help.jpg",
            imdb: "http://www.imdb.com/title/tt1454029/",
            start: new Date("2013/6/13 12:00"),
            end: new Date("2013/6/13 13:30")
          },
          {
            title: "The Perks of Being a Wallflower",
            image: "https://demos.telerik.com/kendo-ui/content/web/scheduler/wallflower.jpg",
            imdb: "http://www.imdb.com/title/tt1659337/",
            start: new Date("2013/6/13 17:30"),
            end: new Date("2013/6/13 19:00")
          },
          {
            title: "The Help",
            image: "https://demos.telerik.com/kendo-ui/content/web/scheduler/the-help.jpg",
            imdb: "http://www.imdb.com/title/tt1454029/",
            start: new Date("2013/6/13 13:30"),
            end: new Date("2013/6/13 15:00")
          }
        ]
      });
    });
</script>   

See Also

• API Reference of the Scheduler.