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 plugins = [createEventsServicePlugin()]
 
  const calendar = useCalendarApp({
    views: [createViewDay(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda()],
    events: [
      {
        id: '1',
        title: 'Event 1',
        start: '2023-12-16',
        end: '2023-12-16',
      },
    ],
  }, plugins)
 
  useEffect(() => {
    // get all events
    calendar.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:

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)