Preact component

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

Installing

npm install @schedule-x/preact @schedule-x/theme-default

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/preact'
import {
  createViewDay,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
} from '@schedule-x/calendar'
import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'
 
const dragAndDrop = createDragAndDropPlugin()
 
import '@schedule-x/theme-default/dist/index.css'
 
function CalendarApp() {
  const calendar = useCalendarApp({
    views: [
      createViewDay(),
      createViewWeek(),
      createViewMonthGrid(),
      createViewMonthAgenda(),
    ],
    events: [
      {
        id: '1',
        title: 'Event 1',
        start: '2023-12-16',
        end: '2023-12-16',
      },
    ],
    plugins: [dragAndDrop],
  })
 
  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-preact-calendar-wrapper according to your needs. For a regular desktop application, something like this might do the trick for you:

.sx-preact-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 Preact components: