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

Resources

configuration

The configuration of the scheduler resource(s). A scheduler resource is optional metadata that can be associated with a scheduler event.

resources

Array

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
    date: new Date("2024/6/10"),
    startTime: new Date("2024/6/10 07:00 AM"),
    height: 600,
    views: [
        "day",
        { type: "workWeek", selected: true },
        "week",
        "month"
    ],
    timezone: "Etc/UTC",
    dataSource: {
        batch: true,
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/meetings", 
            }
        },
        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" }
                }
            }
        }
    },
    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"
        }
    ]
});
</script>

resources.dataColorField

String

The field of the resource data item which contains the resource color.

Default: "color"

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      dataColorField: "key",
      dataSource: [
        { text: "Small meeting room", value: 1, key: "#aabbcc" },
        { text: "Big meeting room", value: 2, key: "green" }
      ]
    }
  ]
});
</script>

resources.dataParentValueField

String

The field of the resource data item which represents the parent resource item value where the current resource should be nested in. Used in hierarchical grouping scenarios where only part of the members of one resource should be grouped within a member of the previous (parent) resource.

Default: "parentValue"

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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,
      attendees: [ 1, 2 ]
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      roomId: 2,
      attendees: [ 3 ]
    }
  ],
  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",
    dataParentValueField: "room",
    dataSource: [
        { text: "Alex", value: 1, room: 1 },
        { text: "Bob", value: 2, room: 1 },
        { text: "Charlie", value: 3, room: 2 }
    ],
    multiple: true,
    title: "Attendees"
  }],
  group: {
      resources: ["Rooms", "Attendees"],
      orientation: "vertical"
  }
});
</script>

resources.dataSource

Object|Array|kendo.data.DataSource

The data source which contains resource data items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>

resources.dataTextField

String

The field of the resource data item which represents the resource text.

Default: "text"

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      dataTextField: "room",
      dataSource: [
        { room: "Small meeting room", value: 1 },
        { room: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>

resources.dataValueField

String

The field of the resource data item which represents the resource value. The resource value is used to link a scheduler event with a resource.

Default: "value"

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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 roomId 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 roomId is 2
    }
  ],
  resources: [
    {
      field: "roomId",
      dataValueField: "roomId",
      dataSource: [
        { text: "Small meeting room", roomId: 1 },
        { text: "Big meeting room", roomId: 2 }
      ]
    }
  ]
});
</script>

resources.field

String

The field of the scheduler event which contains the resource id.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>

resources.icon

String

The name of the icon displayed instead of the resource text label in the desktop event editor. When the option is not set, the editor displays the resource title, or its existing field-name fallback.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2026/8/3"),
  dataSource: [
    { id: 1, title: "Equipment Inspection", start: new Date("2026/8/3 09:00"), end: new Date("2026/8/3 10:00"), technicianId: 1 }
  ],
  resources: [
    {
      field: "technicianId",
      title: "Technician",
      icon: "user",
      dataSource: [{ text: "Morgan Lee", value: 1 }]
    }
  ]
});
</script>

resources.multiple

Boolean

If set to true the scheduler event can be assigned multiple instances of the resource. The scheduler event field specified via the field option will contain an array of resources. By default only one resource instance can be assigned to an event.

Default: false

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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,
      atendees: [2, 3] // the resource instances with value 2 and 3 (Bob and Charlie)
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      roomId: 2,
      atendees: [1, 2] // the resource instances with value 1 and 2 (Alex and Bob)
    }
  ],
  resources: [
    {
      field: "roomId",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    },
    {
      field: "atendees",
      multiple: true,
      dataSource: [
        { text: "Alex", value: 1 },
        { text: "Bob", value: 2 },
        { text: "Charlie", value: 3 }
      ]
    }
  ]
});
</script>

resources.name

String

The name of the resource used to distinguish resource. If not set the value of the field option is used.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      title: "Room",
      name: "Room",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>

resources.title

String

The user friendly title of the resource displayed in the scheduler edit form. If not set the value of the field option is used.

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  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",
      title: "Room",
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>

resources.valuePrimitive

Boolean

Set to false if the scheduler event field specified via the field option contains a resource data item. By default the scheduler expects that field to contain a primitive value (string, number) which corresponds to the "value" of the resource (specified via dataValueField).

Default: true

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      room: { value: 1 } // the resource field is an object instead of a primitive value
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting",
      room: { value: 2 } // the resource field is an object instead of a primitive value
    }
  ],
  resources: [
    {
      field: "room",
      valuePrimitive: false,
      dataSource: [
        { text: "Small meeting room", value: 1 },
        { text: "Big meeting room", value: 2 }
      ]
    }
  ]
});
</script>