Scheduler - Event properties

Define the properties of your events.

Event creation

You can use the eventCreation prop to customize how newly created events are defined:

Disable event creation

Pass eventCreation={false} to disable the event creation:

<EventCreation eventCreation={false} />

Custom default duration

Pass a custom value to eventCreation.duration to change the default duration of newly created event:

<EventCreation eventCreation={{ duration: 60 }} />

Create event on click

Set eventCreation.interaction to "click" to open the creation form when clicking a cell instead of double-clicking:

<EventCreation eventCreation={{ interaction: 'click' }} />

Define the data in custom properties

You can use the eventModelStructure prop to define how to read and write properties of the event model when they don't match the model expected by the components:

const eventModelStructure = {
  title: {
    getter: (event) => event.name,
    setter: (event, newValue) => {
      event.name = newValue;
    },
  },
};

function Calendar() {
  return (
    <EventCalendar
      events={[{ name: 'Event 1' /** ... */ }]}
      eventModelStructure={eventModelStructure}
    />
  );
}

String dates

A common use case is to convert your dates from a string to a valid date object:

Dynamic resource field

This can also be useful to switch the resource between several fields:

Other properties

Class name

You can use the className property on your events to apply custom CSS styles. When defined, this class is applied to the event element in all views (Week, Month, Day, and Agenda views).

const events = [
  {
    id: '1',
    title: 'Important Meeting',
    start: new Date('2025-07-01T10:00:00'),
    end: new Date('2025-07-01T11:00:00'),
    className: 'highlighted-event',
  },
];