Highlight Scheduler Work Hours

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.

    <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