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

Timeline Overnight 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_night.cshtml
                    
                        Timeline_NightController.cs
                    
                        SchedulerMeetingService.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#scheduler").kendoScheduler({"date":new Date(2013,5,12,0,0,0,0),"startTime":new Date(2013,5,12,20,0,0,0),"endTime":new Date(2013,5,12,20,0,0,0),"editable":{"editRecurringMode":"dialog"},"footer":false,"dateHeaderTemplate":"\u003cstrong\u003e#=kendo.toString(date, \u0027D\u0027)# - #=kendo.toString(kendo.date.nextDay(date), \u0027D\u0027)#\u003c/strong\u003e","majorTick":360,"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"}],"views":[{"type":"timeline","eventHeight":50},{"type":"timelineWeek","eventHeight":50}],"messages":{"resetSeries":"Reset Series","views":{"timelineWeek":"Timeline Week","timelineWorkWeek":"Timeline Work Week","timelineMonth":"Timeline Month"}},"group":{"resources":["Rooms"],"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_night_read"},"prefix":"","update":{"url":"/aspnet-mvc/scheduler/timeline_night_update"},"create":{"url":"/aspnet-mvc/scheduler/timeline_night_create"},"destroy":{"url":"/aspnet-mvc/scheduler/timeline_night_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 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