FullCalendar React Component

Render the FullCalendar component and pass FullCalendar options directly as props. You must provide a plugins array containing the plugins you have installed.

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

const events = [
  { title: 'Meeting', start: new Date() }
]

export function DemoApp() {
  return (
    <div>
      <h1>Demo App</h1>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        weekends={false}
        events={events}
        eventContent={renderEventContent}
      />
    </div>
  )
}

// a custom render function
function renderEventContent(eventInfo) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  )
}

To use FullCalendar in a React project, you must install the React connector (@fullcalendar/react), the core engine (@fullcalendar/core), and the specific plugins you intend to use (e.g., @fullcalendar/daygrid).

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

The FullCalendar component is the primary entry point for integrating FullCalendar into a React application. It accepts CalendarOptions as props, which are the standard configuration options used by the core FullCalendar library.

To interact with the underlying FullCalendar instance (for example, to call methods like .next(), .prev(), or .refetchEvents()), you can use the getApi() method provided by the component instance.