FullCalendar

MUI

MUI’s Material UI is a React component framework. FullCalendar provides ready-made MUI components, built on the React package, so everything in that guide applies here too.

Useful links:

FullCalendar inherits all style variables from the MUI theme while also allowing choice in theme “flavor”. Visit themes.fullcalendar.io/mui to see the available flavors (monarch, forma, breezy, pulse, and classic). This choice will be used in the examples below.

Before you begin#

FullCalendar supports Material UI v7 and v9 (MUI skipped v8). v9 support was added in v7.1.1.

You’ll need cssVariables:true for your MUI theme (more info). Something like this:

import { createTheme, ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const theme = createTheme({
  cssVariables: true,
  colorSchemes: { light: true, dark: true },
})

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      Hello World
    </ThemeProvider>
  )
}

Standard Plugins#

Install the MUI package, the React “standard” package, and temporal-polyfill:

npm install \
  @fullcalendar/mui \
  @fullcalendar/react \
  temporal-polyfill

There are two ways to initialize a component:

Option 1: Stock Component#

FullCalendar provides a stock MUI EventCalendar component with standard plugins and toolbar:

import EventCalendar from '@fullcalendar/mui/monarch/EventCalendar' // YOUR FLAVOR

import '@fullcalendar/react/skeleton.css'
import '@fullcalendar/mui/monarch/theme.css' // YOUR FLAVOR

<EventCalendar
  availableViews={['dayGridMonth', 'timeGridWeek', 'listWeek']}
  addButton={{
    text: 'Add Event',
    click() {
      alert('add event...')
    },
  }}
  editable
  selectable
  events={[
    { title: 'event 1', date: '2026-04-01' },
    { title: 'event 2', date: '2026-04-02' },
  ]}
/>

Besides availableViews (the toolbar’s view buttons; the first is the initial view) and addButton, the component accepts all of FullCalendar’s options as props, except headerToolbar/footerToolbar, which the MUI toolbar replaces. The standard plugins are already included.

Option 2: Composable Components#

Alternatively, you can control the exact plugins and toolbar:

import Box from '@mui/material/Box'
import { useCalendarController } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/react/daygrid'
import timeGridPlugin from '@fullcalendar/react/timegrid'
import interactionPlugin from '@fullcalendar/react/interaction'
import EventCalendarToolbar from '@fullcalendar/mui/monarch/EventCalendarToolbar' // YOUR FLAVOR
import EventCalendarViews from '@fullcalendar/mui/monarch/EventCalendarViews' // YOUR FLAVOR

import '@fullcalendar/react/skeleton.css'
import '@fullcalendar/mui/monarch/theme.css' // YOUR FLAVOR

function CustomEventCalendar(props) {
  const controller = useCalendarController()

  return (
    <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, bgcolor: 'background.paper' }}>
      {/* use the toolbar as-is, or write your own with the controller */}
      <EventCalendarToolbar
        sx={{ p: 2 }}
        controller={controller}
        availableViews={['dayGridMonth', 'timeGridWeek', 'timeGridDay']}
      />
      <EventCalendarViews
        controller={controller}
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView='dayGridMonth'
        navLinkWeekClick='timeGridWeek'
        navLinkDayClick='timeGridDay'
        events={props.events}
      />
    </Box>
  )
}

EventCalendarToolbar is an MUI Box, so it accepts sx and the other Box props. EventCalendarViews accepts all of FullCalendar’s options except headerToolbar/footerToolbar, since the toolbar is your own. The controller prop links the two; learn more in the CalendarController API.

Premium Plugins#

Install the MUI package, the React “scheduler” package, the React “standard” package, and temporal-polyfill:

npm install \
  @fullcalendar/mui \
  @fullcalendar/react-scheduler \
  @fullcalendar/react \
  temporal-polyfill

There are two ways to initialize a component:

Option 1: Stock Component#

FullCalendar provides stock MUI components with preset toolbar:

import ResourceTimeline from '@fullcalendar/mui/monarch/ResourceTimeline' // YOUR FLAVOR
import ResourceTimeGrid from '@fullcalendar/mui/monarch/ResourceTimeGrid' // YOUR FLAVOR

import '@fullcalendar/react/skeleton.css'
import '@fullcalendar/mui/monarch/theme.css' // YOUR FLAVOR

<div>
  <ResourceTimeline
    schedulerLicenseKey='XXX'
    resources={[
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' },
    ]}
    events={[{ title: 'Meeting', start: '2026-07-15T10:00:00', resourceId: 'a' }]}
  />
  <ResourceTimeGrid
    schedulerLicenseKey='XXX'
    // same props as above
  />
</div>

Make sure to include your schedulerLicenseKey. The premium plugins are already included.

Option 2: Composable Components#

Alternatively, you can control the exact plugins and toolbar:

import Box from '@mui/material/Box'
import { useCalendarController } from '@fullcalendar/react'
import interactionPlugin from '@fullcalendar/react/interaction'
import resourceTimelinePlugin from '@fullcalendar/react-scheduler/resource-timeline'
import EventCalendarToolbar from '@fullcalendar/mui/monarch/EventCalendarToolbar' // YOUR FLAVOR
import SchedulerViews from '@fullcalendar/mui/monarch/SchedulerViews' // YOUR FLAVOR

import '@fullcalendar/react/skeleton.css'
import '@fullcalendar/mui/monarch/theme.css' // YOUR FLAVOR

function CustomScheduler(props) {
  const controller = useCalendarController()

  return (
    <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, bgcolor: 'background.paper' }}>
      {/* use the toolbar as-is, or write your own with the controller */}
      <EventCalendarToolbar
        sx={{ p: 2 }}
        controller={controller}
        availableViews={['resourceTimelineMonth', 'resourceTimelineWeek', 'resourceTimelineDay']}
      />
      <SchedulerViews
        controller={controller}
        schedulerLicenseKey='XXX'
        plugins={[resourceTimelinePlugin, interactionPlugin]}
        initialView='resourceTimelineMonth'
        navLinkWeekClick='resourceTimelineWeek'
        navLinkDayClick='resourceTimelineDay'
        resources={props.resources}
        events={props.events}
      />
    </Box>
  )
}