New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Timeline view

Loading Demo...

EXAMPLE
VIEW SOURCE
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.cshtml
                    
                        TimelineController.cs
                    
                        SchedulerMeetingService.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#scheduler").kendoScheduler({"date":new Date(2013,5,13,0,0,0,0),"startTime":new Date(2013,5,13,7,0,0,0),"editable":{"editRecurringMode":"dialog"},"majorTick":60,"timezone":"Etc/UTC","resources":[{"dataSource":[{"Text":"Meeting Room 101","Value":1,"Color":"#6eb3fa"},{"Text":"Meeting Room 201","Value":2,"Color":"#f58a8a"}],"title":"Room","field":"RoomID","dataTextField":"Text","dataValueField":"Value","dataColorField":"Color","name":"Rooms"},{"dataSource":[{"Text":"Alex","Value":1,"Color":"#f8a398"},{"Text":"Bob","Value":2,"Color":"#51a0ed"},{"Text":"Charlie","Value":3,"Color":"#56ca85"}],"title":"Attendees","field":"Attendees","multiple":true,"dataTextField":"Text","dataValueField":"Value","dataColorField":"Color","name":"Attendees"}],"views":[{"type":"timeline","eventHeight":50},{"type":"timelineWeek","eventHeight":50},{"type":"timelineWorkWeek","eventHeight":50},{"type":"timelineMonth","majorTick":1440,"eventHeight":50,"startTime":new Date(2013,5,13,0,0,0,0),"endTime":new Date(2013,5,13,0,0,0,0)}],"messages":{"resetSeries":"Reset Series","views":{"timelineWeek":"Timeline Week","timelineWorkWeek":"Timeline Work Week","timelineMonth":"Timeline Month"}},"group":{"resources":["Rooms","Attendees"],"orientation":"vertical"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/scheduler/timeline_read"},"prefix":"","update":{"url":"/aspnet-mvc/scheduler/timeline_update"},"create":{"url":"/aspnet-mvc/scheduler/timeline_create"},"destroy":{"url":"/aspnet-mvc/scheduler/timeline_destroy"},"stringifyDates":true},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"MeetingID","fields":{"MeetingID":{"type":"number"},"title":{"from":"Title","type":"string","defaultValue":"No title"},"description":{"from":"Description","type":"string"},"start":{"from":"Start","type":"date"},"startTimezone":{"from":"StartTimezone","type":"string"},"end":{"from":"End","type":"date"},"endTimezone":{"from":"EndTimezone","type":"string"},"recurrenceRule":{"from":"RecurrenceRule","type":"string"},"recurrenceId":{"from":"RecurrenceID","type":"number","defaultValue":null},"recurrenceException":{"from":"RecurrenceException","type":"string"},"isAllDay":{"from":"IsAllDay","type":"boolean"},"Timezone":{"type":"string"},"RoomID":{"type":"number","defaultValue":null},"Attendees":{"type":"object"}}}}}});});

Description

The Scheduler's 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 -> TimelineView, TimelineWeekView, TimelineWorkWeekView and TimelineMonthView settings. You can further customize these views by setting their StartTime, EndTime, MajorTick, ShowWorkHours, WorkDayStart, WorkDayEnd, WorkWeekStart, WorkWeekEnd and other properties.

Timeline view

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo