New to Kendo UI for jQuery? Start a free 30-day trial

Views

configuration

The views displayed by the scheduler and their configuration. The array items can be either objects specifying the view configuration or strings representing the view types (assuming default configuration). By default the Kendo UI Scheduler widget displays "day" and "week" view.

views

Array

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ "day", "month" ], // day and month views
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "day" },
    { type: "month" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting"
    }
  ]
});
</script>

views.adaptiveSlotHeight

Boolean

Increases the slot height when containing events up to views.eventsPerDay and reduces its height if there are less events for that specific day.

The adaptiveSlotHeight option is supported when views.type is set to "month". The adaptiveSlotHeight option is not supported in resource grouping or date grouping scenarios.

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      eventsPerDay: 4,
      adaptiveSlotHeight: true
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview1"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview2"
    },
    {
      id: 3,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview3"
    },
    {
      id: 4,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview4"
    }
  ],
  height: 1000
});
</script>

views.allDayEventTemplate

String|Function

The template used to render the "all day" scheduler events.

The fields which can be used in the template are:

description String - the event description
end Date - the event end date
resources Array - the event resources
start Date - the event start date
title String - the event title

The allDayEventTemplate option is supported when views.type is set to "day" or "week".

<script id="event-template" type="text/x-kendo-template">
  <div>Title: #: title #</div>
  <div>Atendees:
      # for (var i = 0; i < resources.length; i++) { #
        #: resources[i].text #
      # } #
  </div>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      allDayEventTemplate: $("#event-template").html()
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      isAllDay: true,
      title: "Interview",
      atendees: [1,2]
    }
  ],
  resources: [
    {
      field: "atendees",
      dataSource: [
       { value: 1, text: "Alex" },
       { value: 2, text: "Bob" }
      ],
      multiple: true
    }
  ]
});
</script>

views.allDaySlot

Boolean

If set to true the scheduler will display a slot for "all day" events.

The allDaySlot option is supported when views.type is set to "day" or "week".

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      allDaySlot: false
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.allDaySlotTemplate

String|Function

The template used to render the all day slot cell.

The fields which can be used in the template are:

date - represents the slot date.
resources() - returns the relevant resources for the current slot.

The allDaySlotTemplate option is supported when views.type is set to "day", "week" or "workWeek".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      allDaySlotTemplate: kendo.template("<strong>#=kendo.toString(date)#</strong>")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script id="allDaySlotTemplate" type="text/x-kendo-template">
    # var resources = data.resources(); #
    # var color = resources.roomId === 1 ? "red" : "blue"; #

    <span style="background: #=color#">
      #=kendo.toString(date, "d")#
    </span>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [{
    type: "day",
    allDaySlotTemplate: kendo.template($("#allDaySlotTemplate").html())
  }],
  group: {
    resources: ["Rooms"]
  },
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
        { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
      ],
      title: "Room"
    }
  ]
})
</script>

views.columnWidth

Number

The width of the table columns in timeline views. Value is treated as pixels.

The columnWidth option is supported when views.type is set to "timeline", "timelineWeek", "timelineWorkWeek" or "timelineMonth".

Default: 100

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "timelineWeek",
      columnWidth: 50
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.dateHeaderTemplate

String|Function

The template used to render the date header cells.

By default the scheduler renders the date using a custom date format - "ddd M/dd". The "ddd" specifier, a.k.a abbreviated name of the week day, will be localized using the current Kendo UI culture. If the developer wants to control the day and month order then one needs to define a custom template.

The fields which can be used in the template are:

date - represents the major tick date.

The dateHeaderTemplate option is supported when views.type is set to "day", "week", "workweek" and "timeline" views.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'd')#</strong>")
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.dayTemplate

String|Function

The template used to render the day slots in month view.

The fields which can be used in the template are:

date Date - represents the current day
resources() - returns the relevant resources for the current slot.

The dayTemplate option is supported when views.type is set to "month".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      dayTemplate: kendo.template("<strong>#= kendo.toString(date, 'ddd') #</strong>")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script id="dayTemplate" type="text/x-kendo-template">
    # var resources = data.resources(); #
    # var color = resources.roomId === 1 ? "red" : "blue"; #

    <span style="height:100%;color:black;background-color:#:color#">
      #=kendo.toString(date, "d")#
    </span>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [{
    type: "month",
    dayTemplate: kendo.template($("#dayTemplate").html())
  }],
  group: {
    resources: ["Rooms"]
  },
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
        { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
      ],
      title: "Room"
    }
  ]
});
</script>

views.editable

Boolean|Object

If set to true the user would be able to create new scheduler events and modify or delete existing ones.

Overrides the editable option of the scheduler.

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      editable: false
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.endTime

Date

The end time of the view. The scheduler will display events ending before the endTime.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      startTime: new Date("2013/6/6 08:00"),
      endTime: new Date("2013/6/6 18:00")
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.eventDateTemplate

The template used by the agenda view to render the date of the scheduler events.

The fields which can be used in the template are:

date Date - represents the event date.

The eventDateTemplate option is supported when views.type is set to "agenda".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "agenda",
      eventDateTemplate: kendo.template("<strong>#= kendo.toString(date, 'dd-MM-yyyy')#</strong>")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.eventHeight

String|Number

The height of the scheduler event rendered in month and timeline views. In month view it could be set to a concrete number or to the string value "auto". When set to "auto" it will automatically set the views.adaptiveSlotHeight property to true.

The eventHeight option is supported when views.type is set to "month", "timeline", "timelineWeek", "timelineWorkWeek" or "timelineMonth". The "auto" value is supported when views.type is set to "month" and it sets the views.adaptiveSlotHeight to true. The eventHeight option is not supported in resource grouping or date grouping scenarios.

Default: 25

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      eventHeight: 40
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ],
  height: 1000
});
</script>

views.eventSpacing

Number

Specifies the distance between individual events.

TheeventSpacing option is supported when views.type` is set to "month".

Default: 3

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      eventsPerDay: 4,
      eventSpacing: 4
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview1"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview2"
    },
    {
      id: 3,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview3"
    },
    {
      id: 4,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview4"
    }
  ],
  height: 1000
});
</script>

views.eventTemplate

String|Function

The template used by the view to render the scheduler events.

The fields which can be used in the template are:

description String - the event description
end Date - the event end date
resources Array - the event resources
start Date - the event start date
title String - the event title

<script id="event-template" type="text/x-kendo-template">
  <div>Title: #: title #</div>
  <div>Atendees:
      # for (var i = 0; i < resources.length; i++) { #
        #: resources[i].text #
      # } #
  </div>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      eventTemplate: $("#event-template").html()
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      atendees: [1,2]
    }
  ],
  resources: [
    {
      field: "atendees",
      dataSource: [
       { value: 1, text: "Alex" },
       { value: 2, text: "Bob" }
      ],
      multiple: true
    }
  ]
});
</script>

views.eventTimeTemplate

String|Function

The template used by the agenda view to render the time of the scheduler events.

The fields which can be used in the template are:

description String - the event description
end Date - the event end date
isAllDay Boolean - if true the event is "all day"
resources Array - the event resources
start Date - the event start date
title String - the event title

The eventTimeTemplate option is supported when views.type is set to "agenda".

<script id="event-time-template" type="text/x-kendo-template">
  # if (isAllDay) { #
    All day
  # } else { #
    #= kendo.toString(start, "t") # - #= kendo.toString(end, "t") #
  # }  #
</script>

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

<script>
  $("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    views: [
      {
        type: "agenda",
        eventTimeTemplate: $("#event-time-template").html(),
      }
    ],
    dataSource: [
      {
        isAllDay:true,
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
      },
      {
        isAllDay:false,
        id: 2,
        start: new Date("2013/6/6 09:00 AM"),
        end: new Date("2013/6/6 10:00 AM"),
        title: "Workshop"
      }
    ]
  });
</script>

views.eventsPerDay

Number

Indicates how many events could be listed for a day. When there are more events for a specific day a "more" link will be placed at the bottom of the day slot and will navigate to the day view if clicked.

The eventsPerDay option is supported when views.type is set to "month". If it is set to 0 it is internally set to 1.

Default: 2

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      eventsPerDay: 4
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview1"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview2"
    },
    {
      id: 3,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview3"
    },
    {
      id: 4,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview4"
    }
  ],
  height: 1000
});
</script>

views.group

Object

The configuration of the view resource(s) grouping.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2024/6/10"),
    startTime: new Date("2024/6/10 07:00 AM"),
    height: 600,
    timezone: "Etc/UTC",
    dataSource: {
        batch: true,
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/meetings", 
            }
        },
        schema: {
            model: {
                id: "meetingID",
                fields: {
                    meetingID: { from: "MeetingID", type: "number" },
                    title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                    start: { type: "date", from: "Start" },
                    end: { type: "date", from: "End" },
                    roomId: { from: "RoomID", nullable: true },
                    attendees: { from: "Attendees", nullable: true },
                    isAllDay: { type: "boolean", from: "IsAllDay" }
                }
            }
        }
    },
    views: [
        {
            type: "workWeek",
            selected: true,
            group: {
                resources: ["Rooms", "Attendees"],
                orientation: "horizontal"
            }
        }
    ],
    resources: [
        {
            field: "roomId",
            name: "Rooms",
            dataSource: [
                { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
                { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
            ],
            title: "Room"
        },
        {
            field: "attendees", 
            name: "Attendees",
            dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" }
            ],
            multiple: true,
            title: "Attendees"
        }
    ]
});
</script>

views.majorTick

Number

The number of minutes represented by a major tick.

The majorTick option is supported when views.type is set to "day" or "week".

Default: 60

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      majorTick: 120 // a major tick represents 120 minutes (2 hours)
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.majorTimeHeaderTemplate

String|Function

The template used to render the major ticks.

By default the scheduler renders the time using the current culture time format.

The fields which can be used in the template are:

date - represents the major tick date.

The majorTimeHeaderTemplate option is supported when views.type is set to "day", "week", "workweek" and "timeline" views.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>")
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.minorTickCount

Number

The number of time slots to display per major tick.

The minorTickCount option is supported when views.type is set to "day", "week" or "timeline".

Default: 2

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      minorTickCount: 1 // display one time slot per major tick
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.minorTimeHeaderTemplate

String|Function

The template used to render the minor ticks.

By default the scheduler renders a " ".

The fields which can be used in the template are:

date - represents the major tick date.

The minorTimeHeaderTemplate option is supported when views.type is set to "day" or "week".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      minorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 't')#</strong>")
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.months

Number

Configures the number of months that will be displayed in the year view calendar.

The months option is supported when views.type is set to "year".

Default: 12

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

<script>
  $("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    views: [
      {
        type: "year",
        months: 10
      },
    ],
    dataSource: [
      {
        id: 1,
        start: new Date("2013/1/1 08:00 AM"),
        end: new Date("2013/1/1 09:00 AM"),
        title: "Interview"
      }
    ]
  });
</script>

views.moreEventsPopover

Boolean

Controls how event overflow is opened in the Month view. When set to true, clicking the more-events link opens a popover for the date. When set to false, clicking the link uses the legacy behavior and navigates to the Day view.

The moreEventsPopover option is supported only when views.type is set to "month". The messages.moreEventsPopover messages are processed only when this option is true.

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2026/8/3"),
  views: [
    { type: "month", selected: true, eventsPerDay: 1, moreEventsPopover: true }
  ],
  dataSource: [
    { id: 1, title: "Inspection", start: new Date("2026/8/3 09:00"), end: new Date("2026/8/3 10:00") },
    { id: 2, title: "Delivery", start: new Date("2026/8/3 11:00"), end: new Date("2026/8/3 12:00") }
  ]
});
</script>

views.name

String

The name of the view. Typically, used to get the name of the currently selected view via the view method.

<div id="scheduler"></div>
<script>
  $("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    views: [ "day", "month" ],
    dataSource: [
      {
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
      }
    ]
  });
  setTimeout(function(){
    // Check the browser console to see the result

    var scheduler = $("#scheduler").data("kendoScheduler");
    var viewName = scheduler.view();
    console.log(scheduler.view().name)
  })
</script>

views.selected

Boolean

If set to true the view will be initially selected by the scheduler widget.

If more than one view is selected then last of them will prevail.

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "day" },
    { type: "month", selected: true }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.selectedDateFormat

String

The format used to display the selected date. Uses kendo.format.

Contains two placeholders - "{0}" and "{1}" which represent the start and end date displayed by the view.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      selectedDateFormat: "{0:dd-MM-yyyy}"
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.selectedShortDateFormat

String

The format used to display the selected date when viewport is narrow, and the date is displayed in short ("d") format by default. Uses kendo.format.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2022/6/13"),
    startTime: new Date("2022/6/13 07:00 AM"),
    height: 600,
    timezone: "Etc/UTC",
    dataSource: [
        {
            id: 1,
            start: new Date("2022/6/13 10:00 AM"),
            end: new Date("2022/6/13 11:00 AM"),
            title: "Team Meeting"
        }
    ],
    views: [
        {
            type: "day",
            selectedShortDateFormat: "dd/MM"
        },
        {
            type: "week",
            selectedShortDateFormat: "MMM dd"
        }
    ]
});
</script>

views.showWorkHours

Boolean

If set to true the view will be initially shown in business hours mode. By default view is displayed in full day mode.

The showWorkHours option is supported when views.type is set to "day" or "week".

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ { type: "day", showWorkHours: true }, "week"],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.slotTemplate

String|Function

The template used to render the time slot cells.

The fields which can be used in the template are:

date - represents the slot date and time.
resources() - returns the relevant resources for the current slot.

The slotTemplate option is supported when views.type is set to "day", "week", "workWeek" or "timeline" views.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      slotTemplate: kendo.template("<strong>#=kendo.toString(date)#</strong>")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

<div id="scheduler"></div>
<script id="slotTemplate" type="text/x-kendo-template">
    # var resources = data.resources(); #
    # var color = resources.roomId === 1 ? "red" : "blue"; #

    <span style="background: #=color#">
      #=kendo.toString(date, "d")#
    </span>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [{
    type: "day",
    slotTemplate: kendo.template($("#slotTemplate").html())
  }],
  group: {
    resources: ["Rooms"]
  },
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
        { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
      ],
      title: "Room"
    }
  ]
});
</script>

views.startDate

Date

Configures the start date of the year view. The Scheduler will display 12 months starting from the startDate.

The startDate option is supported when views.type is set to "year".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  views: [
    {
      type: "year",
      startDate: new Date("2021/2/1")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2021/2/2 08:00 AM"),
      end: new Date("2021/2/2 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.startTime

Date

The start time of the view. The scheduler will display events starting after the startTime.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      startTime: new Date("2013/6/6 08:00"),
      endTime: new Date("2013/6/6 18:00")
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.title

String

The user-friendly title of the view displayed by the scheduler.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      title: "Today",
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.tooltipTemplate

String|Function

Configures the template used to render the Tooltip in the Scheduler year view.

The tooltipTemplate option is supported when views.type is set to "year".

The fields which can be used in the template are:

date Date - the selected date from the calendar
events Array - list of the events and their respective resource for the selected date
messages Object - the configuration of the Scheduler messages used for localization.

<div id="scheduler"></div>
<script id="tooltip-template" type="text/x-kendo-template">
  <div>Events: </div>
  <div>
      # for (var i = 0; i < events.length; i++) { #
        #: events[i].title #
      # } #
  </div>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "year",
      tooltipTemplate:  $("#tooltip-template").html()
    },
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.type

String

The type of the view. The built-in views are: "day", "week", "workWeek", "month", "agenda", "timeline", "timelineWeek", "timelineWorkWeek", "timelineMonth" and "year".

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.virtual

Boolean

Enables the DOM virtualization for vertical grouping of the view - renders batches of DOM elements as you scroll. The views that support this option are: "day", "week", "workWeek", "month".

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  height: 400,
  views: [
    { type: "week", virtual: true }
  ],
  group: {
    resources: ["Rooms"],
    orientation: "vertical"
  },
  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 // the event is held in "Small meeting room" whose value is 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 // the event is held in "Big meeting room" whose value is 2
    }
  ],
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataColorField: "key",
      dataSource: [
        { text: "Small meeting room", value: 1, key: "#aabbcc" },
        { text: "Big meeting room", value: 2, key: "green" }
      ]
    }
  ]
});
</script>

views.workDays

Array

Sets the working days (index based).

<div id="scheduler"></div>
<script>
  $("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    views: [
        { type: "week", workDays: [1,2,4] },
        { type: "workWeek", selected: true, workDays: [1,2,4] },
        { type: "timelineWeek", workDays: [1,2,4] },
        { type: "timelineWorkWeek", workDays: [1,2,4] },
    ],
    dataSource: [
      {
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
      }
    ]
  });
</script>

views.workWeekEnd

Number

The end of working week (index based).

The workWeekEnd option is supported when views.type is set to "day" or "week".

Default: 5

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "week", workWeekEnd: 6 }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

views.workWeekStart

Number

The start of working week (index based).

The workWeekStart option is supported when views.type is set to "day" or "week".

Default: 1

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "week", workWeekStart: 2 }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

Related Members