Custom Event Form for a React Calendar

<Scheduler
  renderEventForm={({ isOpen, onClose, event, onSave, onDelete }) => (
    <MyCustomForm
      open={isOpen}
      onClose={onClose}
      event={event}
      onSave={onSave}
      onDelete={onDelete}
    />
  )}
/>

Your form replaces the built-in quick card and full form. It receives:

Prop	Type
`isOpen`	`boolean`	Whether the form should be shown
`onClose`	`() => void`	Call it to close the form
`event`	`CalendarEvent \| null`	The event being edited; `null` or absent for a new one
`initialDate`	`Date`	Start of the slot that was clicked, for a new event
`initialAllDay`	`boolean`	`true` when the form is opened from the all-day row
`onSave`	`(event: Partial<CalendarEvent>) => void`	Save the event (create or update)
`onDelete`	`(eventId: string) => void`	Delete the event

A click on a free slot, or Create, opens your form for a new event; a click on an event opens it with that event (onEventClick is still called first).
It opens in every layout: Classic, Focus and Flow.
When it closes, the focus goes back to what opened it.
components.EventEditor is the same thing under another name; pass one or the other.

Custom event form

Props

Custom event form

Props

Related