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}
    />
  </>
}

Resize ⭐ Interactive Event Modal