group Object

The configuration of the scheduler resource(s) grouping.

group.date Boolean (default: false)

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

Example - define group by date

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  group: {
    resources: ["Rooms"],
    date: true
  },
  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>

group.resources Array

An array of resource names by which the scheduler events will be grouped.

Example - define groups

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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>

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 - define group orientation

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  group: {
    resources: ["Rooms"],
    orientation: "vertical"
  },
  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>

groupHeaderTemplate String|Function

The template used to render the group headers of scheduler day, week, workWeek and timeline views.

The fields which can be used in the template are:

• text String - the group text
• color String - the group color
• value - the group value
• field String - the field of the scheduler event which contains the resource id
• title String - the 'title' option of the resource
• name String - the 'name' option of the resource

Example - set the group header template

<script id="groupHeaderTemplate" type="text/x-kendo-template">
  <strong style="color: #=color#">#=text#</strong>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  groupHeaderTemplate: $("#groupHeaderTemplate").html(),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      isAllDay: true,
      title: "Interview",
      attendees: [1,2]
    }
  ],
  group: {
    resources: ["Attendees"],
    orientation: "horizontal"
  },
  resources: [
    {
      field: "attendees",
      name: "Attendees",
      dataSource: [
       { value: 1, text: "Alex" },
       { value: 2, text: "Bob" }
      ],
      multiple: true
    }
  ]
});
</script>