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

Timeline 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.html
                    
                        Sample service

Also available for:

API REFERENCE

$(function () { $("#scheduler").kendoScheduler({ date: new Date("2013/6/13"), startTime: new Date("2013/6/13 07:00 AM"), eventHeight: 50, majorTick: 60, views: [ "timeline", "timelineWeek", "timelineWorkWeek", { type: "timelineMonth", startTime: new Date("2013/6/13 00:00 AM"), majorTick: 1440 }], 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", "Attendees"], 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" }, { field: "attendees", name: "Attendees", dataSource: [ { text: "Alex", value: 1, color: "#f8a398" }, { text: "Bob", value: 2, color: "#51a0ed" }, { text: "Charlie", value: 3, color: "#56ca85" } ], multiple: true, title: "Attendees" } ] }); });

Description

The Kendo UI Scheduler Timeline view allows you to display a variable number of appointment slots and define their duration. You can use the Timeline to provide end-users with an overview for scheduling purposes.

You can define and show the available time line views through the views attribute collection. Further customization for these views can be applied by setting their startTime, endTime, majorTick, showWorkHours, workDayStart, workDayEnd, workWeekStart, workWeekEnd, etc. properties.

Timeline view

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo