Skip to Content
v3is coming! Temporal API, timezones, and more đŸ„ł
DocsCalendarPluginsEvent Modal

Event modal

If your events have more information than just their time and a short title, chances are it would be helpful to display information about the events in a modal.

Install

npm i @schedule-x/event-modal

Usage

import { createEventModalPlugin } from '@schedule-x/event-modal' const eventModal = createEventModalPlugin() const calendar = createCalendar({ // ...other configuration plugins: [eventModal], }) eventModal.close(); // close the modal

Methods

close

Close the modal programmatically.

Customization

If you’re using one of the framework adapter components, like for React, you can customize modal content via passing customComponents prop like so:

import { useCalendarApp } from '@schedule-x/react' import { createEventModalPlugin } from '@schedule-x/event-modal' const customComponents = { eventModal: ({ calendarEvent }) => { return ( <div style={{ padding: "40px", background: "yellow", color: "black", borderRadius: "24px", border: "1px solid black", fontSize: "24px", fontWeight: "bold", }} > {calendarEvent.title} </div> ); }, } function CalendarComponent() { const calendar = useCalendarApp({ // ...other configuration plugins: [createEventModalPlugin()], }) return <> <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} /> </> }
Last updated on

We use cookies for marketing purposes. By clicking "Accept", you consent to the use of all cookies. If you decline, we will only use functional cookies. You can read more about our cookie policy here.