Highlight Scheduler Work Hours

Updated on Sep 8, 2026

Environment

Product

Progress® Kendo UI® Scheduler for jQuery

Description

How can I highlight work hours in the Kendo UI Scheduler?

Solution

1. Iterate over the cells in the Scheduler content.
2. Apply custom CSS based on the current time and group.

Example

View Source

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

    <script>
      $("#scheduler").kendoScheduler({
        date: new Date("2013/6/6"),
        group: {
          resources: ["Rooms"],
          date: true,
        },
        dataBound: highlightHours,
        dataSource: [
          {
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview",
            roomId: 1,
          },
          {
            id: 2,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Meeting",
            roomId: 2,
          },
        ],
        resources: [
          {
            field: "roomId",
            name: "Rooms",
            dataColorField: "key",
            dataSource: [
              { text: "Small meeting room", value: 1, key: "red" },
              { text: "Big meeting room", value: 2, key: "green" },
            ],
          },
        ],
      });

      function highlightHours() {
        var scheduler = $("#scheduler").data("kendoScheduler"),
          view = scheduler.view(),
          elements = view.content.find(
            ".k-scheduler-cell:not(.k-nonwork-hour)",
          );

        for (var i = 0; i < elements.length; i++) {
          var slot = scheduler.slotByElement($(elements[i]));

          if (slot.groupIndex == 0) {
            var startSlotMilliseconds = kendo.date.getMilliseconds(
                slot.startDate,
              ),
              endSlotMilliseconds = kendo.date.getMilliseconds(slot.endDate);

            if (
              startSlotMilliseconds / kendo.date.MS_PER_HOUR >= 8 &&
              endSlotMilliseconds / kendo.date.MS_PER_HOUR <= 12
            ) {
              $(slot.element).css({ background: "#aabbcc" });
            }
          }
        }
      }
    </script>

See Also

• API Reference of the Scheduler