Event Calendar - Resources

Define resources to group events, with support for nested hierarchies, custom colors, and visibility controls.

Define resources

Use the resources prop to define available resources, and the resource property on the event model to link an event to its resource:

const event = [
  { resource: 'work' /** other properties */ },
  { resource: 'holidays' /** other properties */ },
];

const resources = [
  { name: 'Work', id: 'work' },
  { name: 'Holidays', id: 'holidays' },
];

<EventCalendar events={events} resources={resources} />;

Nested resources

Use the children property to create hierarchical resource structures:

const resources = [
  {
    id: 'academics',
    title: 'Academics',
    children: [
      {
        id: 'stem',
        title: 'STEM',
        children: [
          { id: 'computer-science', title: 'Computer Science' },
          { id: 'mathematics', title: 'Mathematics' },
        ],
      },
    ],
  },
];

Default collapsed resources

Parent resources can be collapsed to hide their descendants in the resources tree. Use the defaultCollapsedResources prop to initialize the collapsed resources. A resource is expanded unless it is present in the object with a true value.

Controlled collapsed resources

You can also control the collapsed resources using collapsedResources and onCollapsedResourcesChange props:

const [collapsedResources, setCollapsedResources] = React.useState<
  Record<string, boolean>
>({});

return (
  <EventCalendar
    collapsedResources={collapsedResources}
    onCollapsedResourcesChange={setCollapsedResources}
  />
);

Visible resources

Default visible resources

Use the defaultVisibleResources prop to initialize the visible resources. A resource is visible if it's absent from the object or set to true.

Controlled visible resources

You can also control the visible resources using visibleResources and onVisibleResourcesChange props:

const [visibleResources, setVisibleResources] = React.useState<
  Record<string, boolean>
>({});

return (
  <EventCalendar
    visibleResources={visibleResources}
    onVisibleResourcesChange={setVisibleResources}
  />
);

Require a resource

By default, an event on the Event Calendar can be saved without a resource — the edit dialog includes a "No resource" option in the resource picker. Set shouldEventRequireResource to true to make the resource mandatory: the "No resource" option is hidden and the form cannot be submitted with an empty resource.

<EventCalendar shouldEventRequireResource />

Resource properties

Color

Use the eventColor property to define a resource's color. The available color palettes are shown below:

Drag interactions

Use the areEventsDraggable property to prevent dragging a resource's events to a different time slot:

const resource = {
  // ...other properties
  areEventsDraggable: false,
};

Use the areEventsResizable property to prevent resizing a resource's events by dragging their start or end edge:

const resource = {
  // ...other properties
  areEventsResizable: false,
  areEventsResizable: "start" // only the start edge is draggable.
  areEventsResizable: "end" // only the end edge is draggable.
};

See Drag interactions for details.

Read-only

Use the areEventsReadOnly property to mark all events of a resource as read-only:

const resource = {
  // ...other properties
  areEventsReadOnly: true,
};

See Editing—Read-only for details.

Store data in custom properties

Use the resourceModelStructure prop to define how to read resource properties when your data doesn't match the expected model:

const resourceModelStructure = {
  title: {
    getter: (resource) => resource.name,
  },
};

function Calendar() {
  return (
    <EventCalendar
      resources={[{ name: 'Resource 1' /** ... */ }]}
      resourceModelStructure={resourceModelStructure}
    />
  );
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <EventCalendar />
• <EventCalendarPremium />