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

Date Grouping

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

            
                        date-grouping.html
                    
                        Sample service

Also available for:

API REFERENCE

Group Orientation

$(function () { $("#scheduler").kendoScheduler({ date: new Date("2013/6/13"), startTime: new Date("2013/6/13 07:00 AM"), height: 600, views: [ "day", "week", { type: "month", selected: true }, "agenda", "timeline" ], 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: { date: true, 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" }, { 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" } ] }); var scheduler = $("#scheduler").data("kendoScheduler"); $("#orientation").kendoDropDownList({ value: scheduler.options.group.orientation, change: function () { scheduler.options.group.orientation = this.value(); scheduler.view(scheduler.view().name); } }); });

Description

This demo shows horizontal and vertical grouping by Date in scheduler widget. The direction of the grouping can be controlled with the group ->orientation property (default value is horizontal).

The available orientation options are horizontal and vertical, having in mind that the agenda view is always in vertical orientation.

Date Grouping

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo