Quick Popup in the React Scheduler
The React Scheduler includes a built-in quick popup (also referred to as quickInfo) that appears upon clicking a cell or an existing event. This popup provides a lightweight, contextual interface for creating or viewing appointments without opening the editor window.
The quick popup supports full structural customization through the quickInfo property, which provides six renderer props that cover the header, content, and footer areas for both the cell (Add) and event (Edit) popup types. Each renderer receives contextual data, such as cellData or eventData, to facilitate dynamic and data-driven popup layouts.
Customizing the quick popup layout
Each renderer function receives context-specific data and returns a React node. This enables the cell and event popups to be structured independently using custom components, styles, and logic.
Cell popup
addHeader- Defines a custom header for the cell popup to provide specific context or branding.addContent- Defines custom content for the cell popup, such as input fields, previews, or default values.addFooter- Defines custom action buttons (e.g., Save, Cancel) in the cell popup footer for streamlined event creation.
Event popup
editHeader- Defines a custom header for the event popup to display event titles, status badges, or icons.editContent- Replaces the default event form with a custom layout, such as attendee lists or file attachments.editFooter- Defines custom footer actions (e.g., Update, Delete, Duplicate) for existing appointments.
When the adaptive property is set to true, both the cell and event quick popups automatically transform into a full-screen modal on mobile devices.
The Scheduler provides various built‑in methods such as openEditor, closeQuickInfoPopup, addEvent, and saveEvent. These methods can be utilized within the quick popup to perform actions like opening the full editor, closing the popup, or programmatically adding and saving events.
Preventing the quick popup
To prevent the quick popup from appearing when clicking on a cell or an event, set the showQuickInfo property to false.
Validation in the quick popup
Validation is applied to cell popup fields to verify data before an event is saved. The validation logic is executed within the footer renderer, where form state is checked prior to invoking addEvent. If validation fails, error messages are displayed inline and the save operation is prevented.
The following example demonstrates a customized quick popup featuring field-level validation: