Edit this page

Disable and Style Timeslots for Specific Days

Environment

Product Scheduler for Progress Kendo UI
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("2013/6/13"),
          add: function(e) {

              var myDate = new Date("Thu Jun 13 2013 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("2013/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: "//demos.telerik.com/kendo-ui/service/tasks",
                dataType: "jsonp"
              },
              update: {
                url: "//demos.telerik.com/kendo-ui/service/tasks/update",
                dataType: "jsonp"
              },
              create: {
                url: "//demos.telerik.com/kendo-ui/service/tasks/create",
                dataType: "jsonp"
              },
              destroy: {
                url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: 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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy