Docs
Frameworks
React component

React component

This page offers documentation for using the Schedule-X calendar in React. For general documentation on configuring and interacting with the calendar, refer to the rest of the calendar documentation.

Installing

In this example we will set up a calendar with the default theme, and a plugin for retrieving and updating events.

npm install @schedule-x/react @schedule-x/theme-default @schedule-x/events-service

If you're using a package manager that does not automatically download peer dependencies, you will additionally need to install @schedule-x/calendar, @preact/signals and preact. This is for example the case for yarn and npm < v7.

Basic usage

Example

import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react'
import {
  createViewDay,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
} from '@schedule-x/calendar'
import { createEventsServicePlugin } from '@schedule-x/events-service'
 
import '@schedule-x/theme-default/dist/index.css'
 
function CalendarApp() {
  const eventsService = useState(() => createEventsServicePlugin())[0]
 
  const calendar = useCalendarApp({
    views: [createViewDay(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda()],
    events: [
      {
        id: '1',
        title: 'Event 1',
        start: '2023-12-16',
        end: '2023-12-16',
      },
    ],
    plugins: [eventsService]
  })
 
  useEffect(() => {
    // get all events
    eventsService.getAll()
  }, [])
 
  return (
    <div>
      <ScheduleXCalendar calendarApp={calendar} />
    </div>
  )
}
 
export default CalendarApp

Styles

The Schedule-X calendar is a responsive component. To achieve this, it cannot be delivered with a fixed height or width of its own. You need to define the height and width of the wrapping element .sx-react-calendar-wrapper according to your needs. For a regular desktop application, something like this might do the trick for you:

.sx-react-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}

Custom components

The Schedule-X calendar is built with customization in mind. Currently, you can use the following custom components to take control over certain parts of the calendar. This is done by writing your own React components:

Component nameDescriptionProps
timeGridEventThe component for timed events used in the week- and day viewscalendarEvent
dateGridEventThe component for all-day events used in the week- and day viewscalendarEvent
monthGridEventThe component for events used in the month grid viewcalendarEvent, hasStartDate
monthAgendaEventThe component for events used in the month agenda viewcalendarEvent
eventModalThe component for the event modalcalendarEvent

An example of how to use these components can be found here: https://github.com/schedule-x/react-example/blob/main/src/App.tsx (opens in a new tab)

More examples

A repo with more examples can be found here:

https://github.com/schedule-x/react-examples (opens in a new tab)