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

Timeline Overnight view

Loading Demo...

EXAMPLE
VIEW SOURCE
EDIT
- Edit in Kendo UI Dojo
- Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        timeline-night.html
                    
                        Sample service

Also available for:

API REFERENCE

$(function () { $("#scheduler").kendoScheduler({ date: new Date("2013/6/12"), startTime: new Date("2013/6/12 08:00 PM"), endTime: new Date("2013/6/12 08:00 PM"), dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'D')# - #=kendo.toString(kendo.date.nextDay(date), 'D')#</strong>"), eventHeight: 50, majorTick: 360, views: [ "timeline", "timelineWeek" ], timezone: "Etc/UTC", dataSource: { batch: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/meetings", dataType: "jsonp" }, update: { url: "https://demos.telerik.com/kendo-ui/service/meetings/update", dataType: "jsonp" }, create: { url: "https://demos.telerik.com/kendo-ui/service/meetings/create", dataType: "jsonp" }, destroy: { url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy", dataType: "jsonp" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, 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" }, startTimezone: { from: "StartTimezone" }, endTimezone: { from: "EndTimezone" }, description: { from: "Description" }, recurrenceId: { from: "RecurrenceID" }, recurrenceRule: { from: "RecurrenceRule" }, recurrenceException: { from: "RecurrenceException" }, roomId: { from: "RoomID", nullable: true }, attendees: { from: "Attendees", nullable: true }, isAllDay: { type: "boolean", from: "IsAllDay" } } } } }, group: { resources: ["Rooms"], orientation: "vertical" }, resources: [{ field: "roomId", name: "Rooms", dataSource: [ { text: "Meeting Room 101", value: 1, color: "#6eb3fa" }, { text: "Meeting Room 201", value: 2, color: "#f58a8a" } ], title: "Room" }] }); });

Description

The Kendo UI Scheduler Timeline view allows you to display overnight major slots by configuring the startTime and the endTime of the view.

Timeline Overnight view

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo