views.group Object

The configuration of the view resource(s) grouping.

views.group.date Boolean (default: false)

If set to true and the group.resources has some resources set the view is grouped by date.

Overrides the date option of the scheduler.

Example - define group by date

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
   views: [
    {
        type: "month",
        group: {
            date: true
        }
    }
  ],
  group: {
    resources: ["Rooms"]
  },
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      roomId: 1 // the event is held in "Small meeting room" whose value is 1
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      roomId: 2 // the event is held in "Big meeting room" whose value is 2
    }
  ],
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataColorField: "key",
      dataSource: [
        { text: "Small meeting room", value: 1, key: "#aabbcc" },
        { text: "Big meeting room", value: 2, key: "green" }
      ]
    }
  ]
});
</script>

views.group.orientation String (default: "horizontal")

The orientation of the group headers. Supported values are horizontal or vertical. Note that the agenda view is always in vertical orientation.

Example - disable delete confirmation

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
        type: "month",
        group: {
            orientation: "vertical"
        }
    }
  ],
  group: {
    resources: ["Rooms"]
  },
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      roomId: 1 // the event is held in "Small meeting room" whose value is 1
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      roomId: 2 // the event is held in "Big meeting room" whose value is 2
    }
  ],
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataColorField: "key",
      dataSource: [
        { text: "Small meeting room", value: 1, key: "#aabbcc" },
        { text: "Big meeting room", value: 2, key: "green" }
      ]
    }
  ]
});
</script>
In this article
Not finding the help you need?