Skip to main content
Version: 5.33.0

Resources

Resources can be many things, ranging from people through conference rooms to company assets, that need schedulig. The Eventcalendar can handle multiple resources inside a single instance.

The resource object supports the following properties:

  • background String - Specifies the background color of the resource row or column.
  • children Array of object - Array of resource objects which will render as a child of the specified resource.
  • collapsed Boolean - Defines the displayed state of the child resoruce group.
  • id Number, String - This is an id that can be referenced in the events/invalids/colors data.
  • name String - The name of the resource that will be displayed at the top of the resource column.
  • color String - The color controls the default event color of the resource. Event colors can be specified further on the event object itself. If the color is omitted the events of the resource will inherit the default calendar color.
  • fixed Boolean - Specifies whether the resource is fixed to the top. It applies for timeline view if resolutionVertical in view option is not given, or it's value is set to none.
  • eventCreation Boolean - Disables event creation on specific resources by setting it to false. It's true by default.
  • eventDragBetweenResources Boolean - Specifies whether the events in the specified resource are movable across resources. It applies for scheduler and timeline views and has precedence over dragBetweenResources option.
  • eventDragBetweenSlots Boolean - Specifies whether the events in this resource are movable in time. Has precedence over the dragInTime option.
  • eventDragInTime Boolean - Specifies whether the events in the specified resource are movable in time. Has precedence over the dragInTime option.
  • eventOverlap Boolean - Specifies whether the events in this resource can be overlapped. Has precedence over the eventOverlap option.
  • eventResize Boolean - Specifies whether the events in the specified resource are resizable. Has precedence over dragToResize option.
  • reorder Boolean - Specifies whether the resource can be dragged and reordered. It applies for timeline view if resourceReorder in view option is enabled. Has precedence over the resourceReorder property.

Besides the base properties you can add any custom property, like title, job, etc.

Defining resources
const myResources = [
{ id: "my_id_1", name: "Jane", job: "Developer" },
{ id: "my_id_2", name: "Bob", job: "Administrator" },
{ id: "my_id_3", name: "Andy", job: "Designer" },
];
tip

For more information on resource grouping and hierarchy check out the timeline's or the scheduler's sections for resources.

Events, colors, invalids can be tied to a single or multiple resources. This can be done with the resource property of the objects, where the id of the resource should be passed. It can be a single value and the element would be linked to a single resource or in case of an array the element will show up at the specified resources. If no resource property is specified to the color/event/invalid object then the element will show up in every resource group.

Invalid rule for specific resources
const myResources = [
{ id: 1, name: 'General Courier'},
{ id: 2, name: 'Express Courier'},
{ id: 3, name: 'Super Express Courier'},
];

const myInvalid = [
{
resource: [2, 3]
// is unavailable at weekends:
recurring: {
repeat: 'weekly',
weekDays: 'SU,SA',
interval: 1
}
}
];
tip

Check out the recurrence section for more details on recurring rules