MUI

MUI’s Material UI is a React component framework.

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

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@beta \
  @fullcalendar/react@beta \
  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
  // your props here
/>

Option 2: Composable Components

Alternatively, you can control the exact plugins and toolbar:

import { useCalendarController } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/react/daygrid'
import timeGridPlugin from '@fullcalendar/react/timegrid'
import EventCalendarContainer from '@fullcalendar/mui/monarch/EventCalendarContainer' // YOUR FLAVOR
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 (
    <EventCalendarContainer>
      {/* use toolbar as-is or write your own */}
      <EventCalendarToolbar
        controller={controller}
        availableViews={['dayGridMonth', 'timeGridWeek', 'timeGridDay']}
      />
      <EventCalendarViews
        controller={controller}
        plugins={[dayGridPlugin, timeGridPlugin]}
        initialView='dayGridMonth'
        navLinkWeekClick='timeGridWeek'
        navLinkDayClick='timeGridDay'
        events={props.events}
      />
    </EventCalendarContainer>
  )
}

Premium Plugins

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

npm install \
  @fullcalendar/mui@beta \
  @fullcalendar/react-scheduler@beta \
  @fullcalendar/react@beta \
  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
    // your props here
  />
  <ResourceTimeGrid
    // your props here
  />
</div>

Option 2: Composable Components

Alternatively, you can control the exact plugins and toolbar:

import { useCalendarController } from '@fullcalendar/react'
import resourceTimelinePlugin from '@fullcalendar/react-scheduler/resource-timeline'
import EventCalendarContainer from '@fullcalendar/mui/monarch/EventCalendarContainer' // YOUR FLAVOR
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 (
    <EventCalendarContainer>
      {/* use toolbar as-is or write your own */}
      <EventCalendarToolbar
        controller={controller}
        availableViews={['resourceTimelineMonth', 'resourceTimelineWeek', 'resourceTimelineDay']}
      />
      <SchedulerViews
        controller={controller}
        plugins={[resourceTimelinePlugin]}
        initialView='resourceTimelineMonth'
        navLinkWeekClick='resourceTimelineWeek'
        navLinkDayClick='resourceTimelineDay'
        resources={props.resources}
        events={props.events}
      />
    </EventCalendarContainer>
  )
}