Disable and Style Timeslots for Specific Days

Environment

Product	Progress® Kendo UI® Scheduler for jQuery
Operating System	Windows 7 64bit
Browser	All

Description

How can I disable timeslots for a specific day and style them?

Solution

1. To style the slots for a specific day, use the slotTemplate configuration.
2. To check the date of the event which is about to be added, handle the add event of the Scheduler. If the event you want to add is for the day during which all events will be restricted, cancel the propagation and raise a descriptive alert.

 <div id="scheduler"></div>
    <style>
      /* Remove the padding of scheduler slots */
      .k-scheduler-table td, .k-scheduler-table th
      {
        padding: 0;
      }
    </style>
    <script>

      function getColorBasedOnHour(date) {
        var myDate = new Date("Thu Jun 13 2013 08:30:00 GMT+0300");

  			if(date.getDay() == myDate.getDay())
       	 return "#A9A9A9"
      }

      $(function() {
        $("#scheduler").kendoScheduler({
          date: new Date("2025/6/13"),
          add: function(e) {

              var myDate = new Date("Thu Jun 13 2022 08:30:00 GMT+0300");
         			if(e.event.start.getDay() == myDate.getDay())
              {
                  setTimeout(function() {
                    alert("This person is not available in this time period.");
                }, 0);
								e.preventDefault();
            		return false;
              }
        	},
          startTime: new Date("2025/6/13 07:00 AM"),
          height: 600,
          slotTemplate: "<div class='myClass' style='background:#=getColorBasedOnHour(date)#; height: 100%;width: 100%;'></div>",
          views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda",
            { type: "timeline", eventHeight: 50}
          ],
          timezone: "Etc/UTC",
          dataSource: {
            batch: true,
            transport: {
              read: {
                  url: "https://demos.telerik.com/service/v2/core/tasks"
              },
              update: {
                  url: "https://demos.telerik.com/service/v2/core/tasks/update",
                  type: "POST",
                  contentType: "application/json"
              },
              create: {
                  url: "https://demos.telerik.com/service/v2/core/tasks/create",
                  type: "POST",
                  contentType: "application/json"
              },
              destroy: {
                  url: "https://demos.telerik.com/service/v2/core/tasks/destroy",
                  type: "POST",
                  contentType: "application/json"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return kendo.stringify(options.models);
                }
              }
            },
            schema: {
              model: {
                id: "taskId",
                fields: {
                  taskId: { from: "TaskID", type: "number" },
                  title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                  start: { type: "date", from: "Start" },
                  end: { type: "date", from: "End" },
                  startTimezone: { from: "StartTimezone" },
                  endTimezone: { from: "EndTimezone" },
                  description: { from: "Description" },
                  recurrenceId: { from: "RecurrenceID" },
                  recurrenceRule: { from: "RecurrenceRule" },
                  recurrenceException: { from: "RecurrenceException" },
                  ownerId: { from: "OwnerID", defaultValue: 1 },
                  isAllDay: { type: "boolean", from: "IsAllDay" }
                }
              }
            }
          },
          resources: [
            {
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1},
                { text: "Bob", value: 2},
                { text: "Charlie", value: 3}
              ]
            }
          ]
        });
      });
    </script>

Notes

For more information on modifying the appearance of slots, refer to this example.

The functionality that the example demonstrates is not applicable to MonthView because slotTemplate is not supported.