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 name | Description | Props |
---|---|---|
timeGridEvent | The component for timed events used in the week- and day views | calendarEvent |
dateGridEvent | The component for all-day events used in the week- and day views | calendarEvent |
monthGridEvent | The component for events used in the month grid view | calendarEvent , hasStartDate |
monthAgendaEvent | The component for events used in the month agenda view | calendarEvent |
eventModal | The component for the event modal | calendarEvent |
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)