`<Calendar>`

This Enterprise Edition component, part of the ra-calendar module, renders a list of events as a calendar.

The user interface offers everything you expect:

month, week, day views
list view
drag and resize events
whole-day events
creating an event by clicking in the calendar
edition of event title, and metadata
events spanning on multiple days
recurring events
background events
theming
locales and timezones
resource time grid (e.g. rooms) (requires additional licence from Full Calendar)

Usage

Use <Calendar> as a child of <List> to render a list of events in a calendar:

import { Calendar, getFilterValuesFromInterval } from '@react-admin/ra-calendar';
import { List } from 'react-admin';

const EventList = () => (
    <List
        filterDefaultValues={getFilterValuesFromInterval()}
        perPage={1000}
        pagination={false}
    >
        <Calendar />
    </List>
);

The ra-calendar module also offers a full replacement for the <List> component, complete with show and edit views for events, called <CompleteCalendar>:

import {
    Admin,
    Resource,
    SimpleForm,
    TextInput,
    DateTimeInput,
} from 'react-admin';
import { CompleteCalendar } from '@react-admin/ra-calendar';

import dataProvider from './dataProvider';

const EventList = () => (
    <CompleteCalendar>
        <SimpleForm>
            <TextInput source="title" autoFocus />
            <DateTimeInput source="start" />
            <DateTimeInput source="end" />
        </SimpleForm>
    </CompleteCalendar>
);

export const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="events" list={EventList} />
    </Admin>
);

Check the ra-calendar documentation for more details.