Schedule-X Calendar

https://schedule-x.dev/docs
Admin
Schedule-X is a highly customizable calendar component for web applications, offering various views,...
Tokens:30,426
Snippets:335
Trust Score:7.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Calendar Setup with createCalendar

Source: https://schedule-x.dev/docs/calendar

Set up a basic calendar instance using `createCalendar`. This example includes the month grid view and a sample event, utilizing `Temporal.ZonedDateTime` for event times. Ensure `temporal-polyfill/global` is imported.

```javascript
import { createCalendar, createViewMonthGrid } from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
import 'temporal-polyfill/global'

const calendar = createCalendar({
  views: [createViewMonthGrid()],
  events: [
    {
      id: 1,
      title: 'Coffee with John',
      start: Temporal.ZonedDateTime.from('2023-12-04T10:05:00+01:00[Europe/Berlin]'),
      end: Temporal.ZonedDateTime.from('2023-12-04T10:35:00+01:00[Europe/Berlin]')
    },
  ],
})

calendar.render(document.getElementById('calendar'))
```

--------------------------------

### Install Schedule-X with npm

Source: https://schedule-x.dev/docs/frameworks/preact

Install the Preact component and its dependencies using npm.

```bash
npm install @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default temporal-polyfill
```

--------------------------------

### Install Schedule-X with yarn

Source: https://schedule-x.dev/docs/frameworks/preact

Install the Preact component and its dependencies using yarn.

```bash
yarn add @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### Install Schedule-X with pnpm

Source: https://schedule-x.dev/docs/frameworks/preact

Install the Preact component and its dependencies using pnpm.

```bash
pnpm install @schedule-x/preact @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### Install Premium Package

Source: https://schedule-x.dev/docs/calendar/installing-premium

Command to install a specific premium package using npm.

```bash
npm i @sx-premium/interactive-event-modal
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/resize

Install the Resize plugin using npm.

```bash
npm i @sx-premium/resize
```

--------------------------------

### Install the plugin

Source: https://schedule-x.dev/docs/calendar/plugins/scheduling-assistant

Install the scheduling assistant plugin and its dependencies.

```bash
npm install @sx-premium/scheduling-assistant @sx-premium/resource-scheduler @schedule-x/calendar
@schedule-x/theme-default
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/drag-and-drop

Install the drag and drop plugin using npm.

```bash
npm i @sx-premium/drag-and-drop
```

--------------------------------

### Install Draw Plugin

Source: https://schedule-x.dev/docs/calendar/plugins/draw

Installation command for the premium draw plugin.

```bash
npm install @sx-premium/draw
```

--------------------------------

### Install the plugin

Source: https://schedule-x.dev/docs/calendar/plugins/drag-to-create

Install the drag-to-create plugin using npm.

```bash
npm install @sx-premium/drag-to-create
```

--------------------------------

### npm installation

Source: https://schedule-x.dev/docs/frameworks/react

Install the necessary Schedule-X packages using npm.

```bash
npm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service temporal-polyfill
```

--------------------------------

### Install Schedule-X Calendar and Theme

Source: https://schedule-x.dev/docs/calendar

Install the calendar core package and the default theme using npm. The `temporal-polyfill` is also included for date/time handling.

```bash
npm i @schedule-x/calendar @schedule-x/theme-default temporal-polyfill
```

--------------------------------

### yarn installation

Source: https://schedule-x.dev/docs/frameworks/react

Install the necessary Schedule-X packages using yarn.

```bash
yarn add @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill
```

--------------------------------

### Install with yarn

Source: https://schedule-x.dev/docs/frameworks/vue

Install the necessary Schedule-X packages using yarn.

```bash
yarn add @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### Install with npm

Source: https://schedule-x.dev/docs/frameworks/vue

Install the necessary Schedule-X packages using npm.

```bash
npm install @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default temporal-polyfill
```

--------------------------------

### Install MCP Server with npx

Source: https://schedule-x.dev/docs/ai/mcp

Use this command to install the Schedule-X MCP server in any client that supports local stdio servers. Ensure you have npx available.

```json
{
  "mcpServers": {
    "schedule-x": {
      "command": "npx",
      "args": ["-y", "@schedule-x/mcp"]
    }
  }
}
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/recurrence

Install the event recurrence plugin using npm.

```bash
npm install @schedule-x/event-recurrence
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/scroll-controller

Install the scroll controller plugin using npm.

```bash
npm i @schedule-x/scroll-controller
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/ical

Install the iCalendar plugin using npm.

```shell
npm install @schedule-x/ical
```

--------------------------------

### Usage Example

Source: https://schedule-x.dev/docs/calendar/plugins/sidebar

Example demonstrating how to import and use the sidebar plugin with Schedule-X, including other related plugins and CSS.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import { createSidebarPlugin, translations as sidebarTranslations } from "@sx-premium/sidebar";
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal, translations as modalTranslations } from "@sx-premium/interactive-event-modal";
import { createDragToCreatePlugin } from "@sx-premium/drag-to-create";
import { translations, mergeLocales } from '@schedule-x/translations'

import '@sx-premium/sidebar/index.css'
import '@sx-premium/interactive-event-modal/index.css'
import '@schedule-x/theme-default/dist/time-picker.css'

const eventsService = createEventsServicePlugin()
const interactiveEventModal = createInteractiveEventModal({
  eventsService,
  availablePeople: ['John Doe', 'Jane Doe'],
  onAddEvent: (event) => {
    console.log('Event added', event)
  }
})
const sidebar = createSidebarPlugin({
  eventsService,

  // Optional: Should the sidebar be open on render
  openOnRender: false,

  // Optional: Which calendars should be active on render
  activeCalendarIds: ['personal', 'work', 'leisure', 'school'],

  // Optional: Should there be calendar toggles
  hasCalendarToggles: true,

  // Optional: placeholder events for drag-to-create. These can later be updated by calling updatePlaceholderEvents
  placeholderEvents: [
    {
      title: 'Morning brief',
      calendarId: 'internal',
      people: ['John Doe', 'Jane Doe', 'Steve Smith'],
    },
    {
      title: 'Client demo',
      calendarId: 'internal',
      people: ['John Doe', 'Jane Doe'],
    },
    {
      title: 'Team meeting',
      calendarId: 'clients',
      people: ['John Doe', 'Jane Doe', 'Steve Smith'],
    }
  ],

  /**
  * Optional: Should placeholder events be selectable
  * If set to true, you can later grab the currently selected placeholder event via sidebar.selectedPlaceholderEvent.value
  * This can, for example, help your users draw events belonging to different calendars
  * */
  isPlaceholderEventSelectable: true,

  // Optional: factory function for generating event ids when events are created
  idFactory: () => uuidv4() // or any other id generator
})

// Update placeholder events
sidebar.updatePlaceholderEvents([
  {
    title: 'event 1',
    calendarId: 'internal',
  }
])

const calendar = createCalendar(
  {
    translations: mergeLocales(
      translations,
      sidebarTranslations,
      modalTranslations
    ),

    plugins: [
      eventsService,
      sidebar,
      interactiveEventModal,
      createDragToCreatePlugin(/* drag-to-create options */)
    ]
    // ...config options
  },
)

calendar.render(document.getElementById('your-calendar-wrapper'))
```

--------------------------------

### Installation

Source: https://schedule-x.dev/docs/calendar/plugins/timezone-select

Install the timezone-select plugin using npm.

```bash
npm install @schedule-x/timezone-select
```

--------------------------------

### Install with pnpm

Source: https://schedule-x.dev/docs/frameworks/vue

Install the necessary Schedule-X packages using pnpm.

```bash
pnpm install @schedule-x/vue @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### pnpm installation

Source: https://schedule-x.dev/docs/frameworks/react

Install the necessary Schedule-X packages using pnpm.

```bash
pnpm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill
```

--------------------------------

### Full Example

Source: https://schedule-x.dev/docs/calendar/plugins/drag-to-create

A comprehensive example demonstrating how to integrate and use the drag-to-create plugin with Schedule-X, including event handling and configuration.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createDragToCreatePlugin } from '@sx-premium/drag-to-create'

import '@sx-premium/drag-to-create/index.css'
import '@schedule-x/theme-default/dist/calendar.css'

const onAddEvent = (event) => {
  console.log('Event added', event)
}

const dragToCreatePlugin = createDragToCreatePlugin({
  onAddEvent,

  // Optional: add a validation hook. Return false to prevent the event from being added.
  onBeforeAddEvent: (event, $app) => {
    // Your validation logic
    return true
  },

  // Optional: async version of onBeforeAddEvent
  onBeforeAddEventAsync: async (event, $app) => {
    // Your async validation logic
    // Return false to prevent the event from being added.
    return true
  }
})

const calendar = createCalendar({
  plugins: [
    createEventsServicePlugin(),
    dragToCreatePlugin,
  ],
})

const eventPlaceholder = document.getElementById('event-placeholder')
eventPlaceholder.addEventListener('dragstart', () => {
  dragToCreatePlugin.dragToCreate('yourEventId123', {
    title: '(No title)',
    calendarId: 'leisure',
  })
})

calendar.render(document.getElementById('your-calendar-calendar-wrapper'))

```

--------------------------------

### Schedule-X Calendar Setup via CDN

Source: https://schedule-x.dev/docs/calendar

Integrate Schedule-X calendar and drag-and-drop plugin using CDN links in an HTML file. This setup includes necessary Preact dependencies and the calendar's core and plugin UMD bundles. Ensure the script order is maintained.

```html
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Do not change the order of these dependencies, since some of them depend on others -->
  <script src="https://cdn.jsdelivr.net/npm/preact@10.23.2/dist/preact.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/preact@10.23.2/hooks/dist/hooks.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@preact/signals-core@1.8.0/dist/signals-core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@preact/signals@1.3.0/dist/signals.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/preact@10.23.2/jsx-runtime/dist/jsxRuntime.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/preact@10.23.2/compat/dist/compat.umd.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/@schedule-x/calendar@2.2.0/dist/core.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@schedule-x/drag-and-drop@2.2.0/dist/core.umd.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@schedule-x/theme-default@2.2.0/dist/index.css">
</head>

<body>
  <div class="calendar"></div>

  <script type="module">
    const { createCalendar, viewWeek } = window.SXCalendar;
    const { createDragAndDropPlugin } = window.SXDragAndDrop;

    const plugins = [
      createDragAndDropPlugin(),
    ]

    const calendar = createCalendar({
      views: [viewWeek],
      events: [
        {
          id: '1',
          title: 'Event 1',
          start: '2024-08-23 09:00',
          end: '2024-08-23 10:00'
        },
      ],
      plugins,
    })

    calendar.render(document.querySelector('.calendar'))
  </script>
</body>

</html>
```

--------------------------------

### Install Shadcn Theme

Source: https://schedule-x.dev/docs/calendar/theme

Install the Shadcn theme package using npm.

```bash
npm i @schedule-x/theme-shadcn
```

--------------------------------

### Install the resource scheduler

Source: https://schedule-x.dev/docs/calendar/resource-scheduler

Install the resource scheduler package along with its dependencies.

```bash
npm install @sx-premium/resource-scheduler @schedule-x/calendar @schedule-x/translations @schedule-x/theme-default
```

--------------------------------

### Install the plugin

Source: https://schedule-x.dev/docs/calendar/plugins/current-time

Install the current time indicator plugin using npm.

```bash
npm i @schedule-x/current-time
```

--------------------------------

### Draw Plugin Usage Example

Source: https://schedule-x.dev/docs/calendar/plugins/draw

Example demonstrating how to integrate and use the draw plugin with Schedule-X, including event drawing callbacks and configuration.

```javascript
import {
  createCalendar,
  viewWeek,
  viewMonthGrid,
  viewDay,
} from '@schedule-x/calendar'
import { createDrawPlugin } from "@sx-premium/draw";
const drawPlugin = createDrawPlugin({
  onFinishDrawing: (event) => {
    // do something, like saving the event to the server
  },
 
  // (Optional) callback that runs on mouseup after drawing an event, before calling onFinishDrawing
  onBeforeFinishDrawing: (event) => {
    // do something, like validating the event
    // return false to remove the event, and true to keep it
  },
 
  // (Optional) async version of onBeforeFinishDrawing
  onBeforeFinishDrawingAsync: async (event) => {
    // do something, like validating the event
    // return false to remove the event, and true to keep it
  },
 
  // (Optional) configure the intervals, in minutes, at which a time grid-event can be drawn. Valid values: 15, 30, 60
  snapDuration: 30
})

const calendar = createCalendar({
  callbacks: {
    onMouseDownDateTime(dateTime, mouseDownEvent) {
      drawPlugin.drawTimeGridEvent(dateTime, mouseDownEvent, {
        title: 'Unknown event'
      })
    },
 
    onMouseDownMonthGridDate(date, _mouseDownEvent) {
      console.log(_mouseDownEvent)
      drawPlugin.drawMonthGridEvent(date, {
        title: 'Unknown event'
      })
    },
 
    onMouseDownDateGridDate(date, mouseDownEvent) {
      drawPlugin.drawDateGridEvent(date, mouseDownEvent, {
        title: 'Unknown event'
      })
    }
  },
  views: [viewMonthGrid, viewWeek, viewDay],
  plugins: [
    drawPlugin
  ]
})
```

--------------------------------

### Usage example

Source: https://schedule-x.dev/docs/calendar/plugins/scheduling-assistant

Example of how to use the scheduling assistant plugin with Schedule-X calendar.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import { createHourlyView, createConfig, TimeUnits } from "@sx-premium/resource-scheduler";
import { createSchedulingAssistant } from '@sx-premium/scheduling-assistant'

import '@sx-premium/resource-scheduler/index.css'
import '@sx-premium/scheduling-assistant/index.css'
import '@schedule-x/theme-default/dist/index.css'

const rConfig = createConfig()
rConfig.initialHours.value = new TimeUnits().getDayHoursBetween(
  '2025-03-07 08:00',
  '2025-03-07 19:00'
)
rConfig.infiniteScroll.value = false
const hourlyView = createHourlyView(rConfig)

rConfig.resources.value = [
  {
    id: 'janedoe',
    label: 'Jane Doe'
  },
  {
    id: 'johnsmith',
    label: 'John Smith'
  },
  {
    id: 'tedmosby',
    label: 'Ted Mosby'
  }
]

const schedulingAssistant = createSchedulingAssistant({
  initialStart: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'),
  initialEnd: Temporal.ZonedDateTime.from('2025-03-07T12:00:00+09:00[Asia/Tokyo]')
})

const calendar = createCalendar({
  selectedDate: Temporal.PlainDate.from('2025-03-07'),
  events: [
    {
      id: 'event1',
      resourceId: 'janedoe',
      start: Temporal.ZonedDateTime.from('2025-03-07T09:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'),
      title: 'Event 1'
    },
    {
      id: 'event2',
      resourceId: 'johnsmith',
      start: Temporal.ZonedDateTime.from('2025-03-07T10:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2025-03-07T11:00:00+09:00[Asia/Tokyo]'),
      title: 'Event 2'
    },
    {
      id: 'event3',
      resourceId: 'tedmosby',
      start: Temporal.ZonedDateTime.from('2025-03-07T11:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2025-03-07T12:00:00+09:00[Asia/Tokyo]'),
      title: 'Event 3'
    },
    {
      id: 'event4',
      resourceId: 'janedoe',
      start: Temporal.ZonedDateTime.from('2025-03-07T17:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2025-03-07T18:00:00+09:00[Asia/Tokyo]'),
      title: 'Event 4'
    }
  ],
  views: [hourlyView],
  plugins: [
    schedulingAssistant
  ]
})

calendar.render(document.getElementById('your-calendar-wrapper'))
```

--------------------------------

### Install with npm

Source: https://schedule-x.dev/docs/frameworks/svelte

Installs the necessary Schedule-X packages and temporal-polyfill using npm.

```bash
npm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default temporal-polyfill
```

--------------------------------

### npm installation

Source: https://schedule-x.dev/docs/frameworks/angular

Install the Schedule-X Angular component and its dependencies using npm.

```bash
npm install @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default
```

--------------------------------

### Calendar Initialization

Source: https://schedule-x.dev/docs/calendar/configuration

Example of creating and rendering a calendar instance with a configuration object.

```javascript
const calendar = createCalendar(config)

calendar.render(document.getElementById('calendar'))
```

--------------------------------

### Install Calendar Controls

Source: https://schedule-x.dev/docs/calendar/plugins/calendar-controls

Install the calendar controls plugin using npm.

```bash
npm i @schedule-x/calendar-controls
```

--------------------------------

### Install Sidebar Plugin

Source: https://schedule-x.dev/docs/calendar/plugins/sidebar

Command to install the sidebar plugin using npm.

```bash
npm install @sx-premium/sidebar
```

--------------------------------

### Calendar Initialization with Events

Source: https://schedule-x.dev/docs/calendar/events

Example of creating a Schedule X calendar with initial events.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'

const calendar = createCalendar({
  // ... other config
  events: [
    {
      id: 1,
      title: 'Coffee with John',
      start: Temporal.ZonedDateTime.from('2023-11-04T10:05:00+01:00[Europe/Berlin]'),
      end: Temporal.ZonedDateTime.from('2023-11-04T10:35:00+01:00[Europe/Berlin]')
    },
    {
      id: 2,
      title: 'Ski trip',
      start: Temporal.PlainDate.from('2023-12-04'),
      end: Temporal.PlainDate.from('2023-12-06')
    },
  ]
})

calendar.render(document.getElementById('calendar'))
```

--------------------------------

### Install Event Modal Plugin

Source: https://schedule-x.dev/docs/calendar/plugins/event-modal

Install the event modal plugin using npm.

```bash
npm i @schedule-x/event-modal
```

--------------------------------

### pnpm installation

Source: https://schedule-x.dev/docs/frameworks/angular

Install the Schedule-X Angular component and its dependencies using pnpm.

```bash
pnpm install @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default @preact/signals preact
```

--------------------------------

### Install the package

Source: https://schedule-x.dev/docs/calendar/time-grid-resource-view

Install the time grid resource view package along with the core calendar and default theme.

```bash
npm install @sx-premium/time-grid-resource-view @schedule-x/calendar @schedule-x/theme-default
```

--------------------------------

### yarn installation

Source: https://schedule-x.dev/docs/frameworks/angular

Install the Schedule-X Angular component and its dependencies using yarn.

```bash
yarn add @schedule-x/angular @schedule-x/calendar @schedule-x/theme-default @preact/signals preact
```

--------------------------------

### Basic example

Source: https://schedule-x.dev/docs/calendar/plugins

You can add plugins to the calendar by adding them to the config object.

```javascript
import { createCalendar, createViewMonthGrid } from '@schedule-x/calendar'
import { createDragAndDropPlugin } from '@sx-premium/drag-and-drop'
import '@schedule-x/theme-default/dist/index.css'

const calendar = createCalendar({
  views: [createViewMonthGrid()],
  events: [
    {
      id: 1,
      title: 'Coffee with John',
      start: '2023-12-04 10:05',
      end: '2023-12-04 10:35',
    },
  ],
  plugins: [
    createDragAndDropPlugin()
  ],
})

calendar.render(document.getElementById('calendar'))
```

--------------------------------

### Usage Example

Source: https://schedule-x.dev/docs/calendar/plugins/interactive-event-modal

Example demonstrating how to import and configure the interactive event modal plugin with Schedule-X calendar.

```typescript
import {
  createCalendar
} from '@schedule-x/calendar'
import {
  createEventsServicePlugin,
  createEventRecurrencePlugin
} from "@schedule-x/event-recurrence"
import {
  createInteractiveEventModal
} from "@sx-premium/interactive-event-modal"

import '@sx-premium/interactive-event-modal/index.css'


const eventsService = createEventsServicePlugin()
const eventRecurrence = createEventRecurrencePlugin()

const eventModal = createInteractiveEventModal({
  // dependency needed to add events
  eventsService,

  // (Optional): Available people for the event form
  availablePeople: ['John Doe', 'Jane Doe'],

  // (Optional): callback for when an event is added
  onAddEvent: (event) => {
    console.log(event)
  },

  // Optional: async callback for when an event is added. If added, it takes precedence over the onAddEvent callback.
  onAddEventAsync: async (event) => {
    console.log(event)
  },

  // (Optional): callback for when an event is updated
  onDeleteEvent: (eventId) => {
    console.log(eventId)
  },

  // (Optional): callback for when an event start property is updated
  onStartUpdate(start) {
    console.log(start)
  },

  // (Optional): callback for when an event end property is updated
  onEndUpdate(end) {
    console.log(end)
  },

  // (Optional): callback which is invoked before opening the modal. Return false to prevent the modal from opening
  canOpenModal: (event) => {
    return event.calendarId === 'calendar-1';
  },

  // (Optional): callback for deciding whether to display edit- and delete buttons for an event
  isEventEditable(event) {
    return event.calendarId === 'internal'
  },

  // (Optional): configure the time picker to use 12-hour format
  has12HourTimeFormat: true,

  // (Optional): prevent the modal from closing on click outside. "false" by default
  preventClosingOnClickOutside: true,

  // (Optional): add a gray "move-bar" bar at the top of the modal, which can be used to move the modal
  movable: true,

  // (Optional): configure whether the title field should be hidden (is currently shown by default)
  hideTitle: false,

  // (Optional): configuration for the field "title"
  fields: {
    title: {
      label: 'Event Title',
      name: 'event-title',
      validator: (value) => {
        return {
          isValid: !!value && value.length >= 3,
          message: 'Title must be at least 3 characters long'
        }
      }
    },
    description: {},
  },

  // (Optional): date picker config
  datePicker: {
    min: Temporal.PlainDate.from('2025-01-01'),
    max: Temporal.PlainDate.from('2025-12-31'),
  }
})

const calendar = createCalendar({
  // ...other configuration
  plugins: [
    eventModal,
    eventsService,
    eventRecurrence,
  ],

  callbacks: {
    onDoubleClickDateTime(dateTime) {
      eventModal.clickToCreate(dateTime, {
        id: 'some-event-id',
      })
    }
  }
})

calendar.render(document.getElementById('your-calendar-wrapper'))
```

--------------------------------

### Install with yarn

Source: https://schedule-x.dev/docs/frameworks/svelte

Installs the necessary Schedule-X packages, preact/signals, preact, and temporal-polyfill using yarn.

```bash
yarn add @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### Install with pnpm

Source: https://schedule-x.dev/docs/frameworks/svelte

Installs the necessary Schedule-X packages, preact/signals, preact, and temporal-polyfill using pnpm.

```bash
pnpm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
```

--------------------------------

### Usage

Source: https://schedule-x.dev/docs/calendar/resource-scheduler

Example of how to use the resource scheduler in a web application.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal, translations as modalTranslations } from "@sx-premium/interactive-event-modal";
import { createHourlyView, createDailyView, createConfig, translations as resourceViewTranslations, TimeUnits } from
"@sx-premium/resource-scheduler";
import { translations, mergeLocales } from '@schedule-x/translations'
import { signal } from "@preact/signals";

import '@sx-premium/resource-scheduler/index.css'
import '@sx-premium/interactive-event-modal/index.css'
import '@schedule-x/theme-default/dist/time-picker.css'

const resourceConfig = createConfig();
const hourlyView = createHourlyView(resourceConfig);
const dailyView = createDailyView(resourceConfig);

// enable or disable drag and drop, resizing
resourceConfig.resize.value = true
resourceConfig.dragAndDrop.value = true

// optionally set the initially displayed columns of the hourly view
// can be combined with `infiniteScroll.value = false` to achieve a scheduler with fixed columns
resourceConfig.initialHours.value = new TimeUnits().getDayHoursBetween(
  Temporal.PlainDateTime.from('2025-03-07T08:00'),
  Temporal.PlainDateTime.from('2025-03-07T19:00')
)

// optionally set the initially displayed days of the daily view
// can be combined with `infiniteScroll.value = false` to achieve a scheduler with fixed columns
resourceConfig.initialDays.value = new TimeUnits().getDaysBetween(
  Temporal.PlainDate.from('2025-03-05'),
  Temporal.PlainDate.from('2025-03-20')
)

const resources = [
  {
    label: 'Room 100',
    id: '1',
    resources: [
      {
        label: 'Room 100A',
        id: '1.1',
        isOpen: signal(false),
        resources: [
          {
            label: 'Room 100A1',
            id: '1.1.1',
            colorName: 'room-100A1',
            lightColors: {
              main: '#1c7df9',
              container: '#d2e7ff',
              onContainer: '#002859',
            },
          },
          {
            label: 'Room 100A2',
            id: '1.1.2',
          },
          {
            label: 'Room 100A3',
            id: '1.1.3',
          }
        ],
      },
      {
        label: 'Room 100B',
        id: '1.2',
        isOpen: signal(false),
        resources: [
          {
            label: 'Room 100B1',
            id: '1.2.1',
          },
          {
            label: 'Room 100B2',
            id: '1.2.2',
          },
          {
            label: 'Room 100B3',
            id: '1.2.3',
          }
        ]
      }
    ]
  },
  {
    labelHTML: '<span>Room <strong>101</strong></span>',
    id: '2',
    colorName: 'room-101',
    lightColors: {
      main: '#1c7df9',
      container: '#d2e7ff',
      onContainer: '#002859'
    },
    darkColors: {
      main: '#c0dfff',
      onContainer: '#dee6ff',
      container: '#426aa2'
    }
  }
]


const eventsService = createEventsServicePlugin()

const interactiveEventModal = createInteractiveEventModal({
  eventsService,

  onAddEvent: (event) => {
    console.log('Event added', event)
  },

  fields: {
    title: {},
    resourceId: {}
  }
})

const calendar = createCalendar({
  resources,
  translations: mergeLocales(
    translations,
    modalTranslations,
    resourceViewTranslations
  ),
  events: [
    {
      id: 1,
      title: 'Event 1',
      start: Temporal.ZonedDateTime.from('2024-05-11T14:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2024-05-11T17:00:00+09:00[Asia/Tokyo]') ,
      resourceId: '1'
    },
    {
      id: 2,
      title: 'Event 2',
      start: Temporal.ZonedDateTime.from('2024-05-11T14:00:00+09:00[Asia/Tokyo]') ,
      end: Temporal.ZonedDateTime.from('2024-05-11T16:00:00+09:00[Asia/Tokyo]') ,
      resourceId: '2'
    }
  ],
  views: [hourlyView, dailyView],
  plugins: [
    eventsService,
    interactiveEventModal
  ]
})

calendar.render(document.getElementById('your-calendar-wrapper'))

```

--------------------------------

### Basic usage example

Source: https://schedule-x.dev/docs/frameworks/vue

A basic example of how to use the ScheduleXCalendar component in a Vue application.

```vue
<script setup>
import { ScheduleXCalendar } from '@schedule-x/vue'
import {
  createCalendar,
  createViewDay,
  createViewWeekAgenda,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'
import 'temporal-polyfill/global'

// Do not use a ref here, as the calendar instance is not reactive, and doing so might cause issues
// For updating events, use the events service plugin
const calendarApp = createCalendar({
  selectedDate: Temporal.PlainDate.from('2023-12-19'),
  views: [
    createViewDay(),
    createViewWeekAgenda(),
    createViewWeek(),
    createViewMonthGrid(),
    createViewMonthAgenda(),
  ],
  events: [
    {
      id: 1,
      title: 'Event 1',
      start: Temporal.PlainDate.from('2023-12-19'),
      end: Temporal.PlainDate.from('2023-12-19'),
    },
    {
      id: 2,
      title: 'Event 2',
      start: Temporal.ZonedDateTime.from('2023-12-20T12:00:00+09:00[Asia/Tokyo]'),
      end: Temporal.ZonedDateTime.from('2023-12-20T13:00:00+09:00[Asia/Tokyo]'),
    },
  ],
})
</script>

<template>
  <div>
    <ScheduleXCalendar :calendar-app="calendarApp" />
  </div>
</template>
```

--------------------------------

### Basic usage - app.component.ts

Source: https://schedule-x.dev/docs/frameworks/angular

Example of setting up the Schedule-X calendar in an Angular component.

```typescript
// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CalendarComponent } from "@schedule-x/angular";
import { createCalendar, createViewWeek } from "@schedule-x/calendar";
import '@schedule-x/theme-default/dist/index.css' // can alternatively be added in your angular.json
import 'temporal-polyfill/global';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CalendarComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-example';
  calendarApp = createCalendar({
    events: [
      {
        id: '1',
        title: 'Event 1',
        start: Temporal.Now.zonedDateTimeISO(),
        end: Temporal.Now.zonedDateTimeISO().add({ hours: 1 }),
 
      },
    ],
    views: [createViewWeek()],
  })
}
 

```

--------------------------------

### Example Usage of Events Service Plugin

Source: https://schedule-x.dev/docs/calendar/plugins/events-service

Demonstrates how to create and use the events service plugin with a calendar instance, including adding, getting, updating, and removing events.

```javascript
import { createEventsServicePlugin } from '@schedule-x/events-service'

const eventsServicePlugin = createEventsServicePlugin();

const calendar = createCalendar(
  { /* config */ },
  [eventsServicePlugin]
)
calendar.render(document.getElementById('calendar'))

calendar.eventsService.add({
  title: 'Event 1',
  start: Temporal.PlainDate.from('2024-04-20'),
  end: Temporal.PlainDate.from('2024-04-20'),
  id: 1
})

eventsServicePlugin.get(1) // { title: 'Event 1', start: '2024-04-20', end: '2024-04-20', id: 1 }

eventsServicePlugin.getAll() // [{ title: 'Event 1', start: '2024-04-20', end: '2024-04-20', id: 1 }]

eventsServicePlugin.update({
  title: 'Real title',
  start: Temporal.PlainDate.from('2024-04-20'),
  end: Temporal.PlainDate.from('2024-04-20'),
  id: 1
})

eventsServicePlugin.remove(1)
```

--------------------------------

### Create Calendar with All Views

Source: https://schedule-x.dev/docs/calendar/views

Demonstrates how to initialize a Schedule-X calendar with all available views. Ensure you include views compatible with both small and large screens if your application supports them.

```javascript
import {
  createViewDay,
  createViewWeekAgenda,
  createViewMonthAgenda,
  createViewMonthGrid,
  createViewWeek,
  createViewList,
  createCalendar
} from '@schedule-x/calendar'
import '@schedule-x/theme-default/dist/index.css'

const calendar = createCalendar({
  views: [createViewDay(), createViewWeekAgenda(), createViewMonthAgenda(), createViewMonthGrid(), createViewWeek(), createViewList()],

  events: [],
})

calendar.render(document.getElementById('calendar'))
```

--------------------------------

### Polyfilling Temporal Example

Source: https://schedule-x.dev/docs/calendar/temporal

Demonstrates how to import the temporal-polyfill and use Temporal.PlainDate and Temporal.ZonedDateTime to create dates and events.

```javascript
import 'temporal-polyfill/global'
 
const date = Temporal.PlainDate.from('2025-01-01')
console.log(date.toString())
 
const calendar = createCalendar({
    events: [
        {
            id: 1,
            start: Temporal.PlainDate.from('2025-01-01'),
            end: Temporal.PlainDate.from('2025-01-02'),
        },
        {
            id: 2,
            start: Temporal.ZonedDateTime.from('2025-01-01T12:00:00+01:00[Europe/Berlin]'),
            end: Temporal.ZonedDateTime.from('2025-01-01T13:00:00+01:00[Europe/Berlin]')
        }
   ] 
})
```

--------------------------------

### Timed Event Example

Source: https://schedule-x.dev/docs/calendar/events

An example of a timed event using Temporal.ZonedDateTime.

```javascript
const timedEvent = {
  id: 1,
  start: Temporal.ZonedDateTime.from('2025-10-01T20:15:00+02:00[Europe/Berlin]'),
  end: Temporal.ZonedDateTime.from('2025-10-01T21:15:00+02:00[Europe/Berlin]')
}
```

--------------------------------

### Usage Example

Source: https://schedule-x.dev/docs/calendar/plugins/scroll-controller

Demonstrates how to import, create, and use the scroll controller plugin with Schedule-X.

```javascript
import { createScrollControllerPlugin } from '@schedule-x/scroll-controller'

const scrollController = createScrollControllerPlugin({
  initialScroll: '07:50'
})

const calendar = createCalendar({
  /* other configuration */

  plugins: [scrollController]
})
calendar.render(document.getElementById('calendar'))

scrollController.scrollTo('04:00')
```

--------------------------------

### Usage Example

Source: https://schedule-x.dev/docs/calendar/time-grid-resource-view

Demonstrates how to create a calendar with the time grid resource view, including defining resources and events associated with them.

```javascript
import { createCalendar } from '@schedule-x/calendar'
import { createViewTimeGridResource } from "@sx-premium/time-grid-resource-view";

import '@schedule-x/theme-default/dist/index.css'
import '@sx-premium/time-grid-resource-view/index.css'

const resources = [
  {
    id: 'room-1',
    label: 'Conference Room A',
    colorName: 'room-a',
    lightColors: {
      main: '#1c7df9',
      container: '#d2e7ff',
      onContainer: '#002859',
    },
    darkColors: {
      main: '#c0dfff',
      onContainer: '#dee6ff',
      container: '#426aa2',
    },
  },
  {
    id: 'room-2',
    label: 'Meeting Room B',
    colorName: 'room-b',
    lightColors: {
      main: '#f91c45',
      container: '#ffd2dc',
      onContainer: '#59000d',
    },
    darkColors: {
      main: '#ffc0cc',
      onContainer: '#ffdee6',
      container: '#a24258',
    },
  },
]

const calendar = createCalendar({
  resources,
  views: [createViewTimeGridResource()],
  events: [
    {
      id: '1',
      title: 'Team standup',
      start: Temporal.ZonedDateTime.from('2024-05-06T09:00:00-04:00[America/New_York]'),
      end: Temporal.ZonedDateTime.from('2024-05-06T09:30:00-04:00[America/New_York]'),
      resourceId: 'room-1',
    },
    {
      id: '2',
      title: 'Client presentation',
      start: Temporal.ZonedDateTime.from('2024-05-06T10:00:00-04:00[America/New_York]'),
      end: Temporal.ZonedDateTime.from('2024-05-06T12:00:00-04:00[America/New_York]'),
      resourceId: 'room-1',
    },
    {
      id: '3',
      title: 'Product review',
      start: Temporal.ZonedDateTime.from('2024-05-06T09:00:00-04:00[America/New_York]'),
      end: Temporal.ZonedDateTime.from('2024-05-06T10:30:00-04:00[America/New_York]'),
      resourceId: 'room-2',
    },
    {
      id: '4',
      title: 'Design workshop',
      start: Temporal.ZonedDateTime.from('2024-05-06T13:00:00-04:00[America/New_York]'),
      end: Temporal.ZonedDateTime.from('2024-05-06T15:00:00-04:00[America/New_York]'),
      resourceId: 'room-2',
    },
  ],
})

calendar.render(document.getElementById('your-calendar-wrapper'))
```

--------------------------------

### Install Events Service Plugin

Source: https://schedule-x.dev/docs/calendar/plugins/events-service

Install the events-service plugin using npm.

```bash
npm i @schedule-x/events-service
```

--------------------------------

### Full Day Event Example

Source: https://schedule-x.dev/docs/calendar/events

An example of a full day event using Temporal.PlainDate.

```javascript
const fullDayEvent = {
  id: 2,
  start: Temporal.PlainDate.from('2025-10-01'),
  end: Temporal.PlainDate.from('2025-10-01')
}
```

--------------------------------

### Slot Example

Source: https://schedule-x.dev/docs/frameworks/vue

This example demonstrates how to use a Vue slot to customize the rendering of timed events in week and day views.

```html
<template>
  <ScheduleXCalendar :calendar-app="calendarApp">
    <template #timeGridEvent="{ calendarEvent }">
      <div class="event">
        {{ calendarEvent.title }}
      </div>
    </template>
  </ScheduleXCalendar>
</template>
```

--------------------------------

### Calendar Configuration Example

Source: https://schedule-x.dev/docs/calendar/calendars

This JavaScript code snippet demonstrates how to configure multiple calendars, including their names, color schemes for light and dark modes, and associated events.

```javascript
const config = {
  // ... other configuration
  calendars: {
    personal: {
      colorName: 'personal',
      lightColors: {
        main: '#f9d71c',
        container: '#fff5aa',
        onContainer: '#594800',
      },
      darkColors: {
        main: '#fff5c0',
        onContainer: '#fff5de',
        container: '#a29742',
      },
    },
    work: {
      colorName: 'work',
      lightColors: {
        main: '#f91c45',
        container: '#ffd2dc',
        onContainer: '#59000d',
      },
      darkColors: {
        main: '#ffc0cc',
        onContainer: '#ffdee6',
        container: '#a24258',
      },
    },
    leisure: {
      colorName: 'leisure',
      lightColors: {
        main: '#1cf9b0',
        container: '#dafff0',
        onContainer: '#004d3d',
      },
      darkColors: {
        main: '#c0fff5',
        onContainer: '#e6fff5',
        container: '#42a297',
      },
    },
    school: {
      colorName: 'school',
      lightColors: {
        main: '#1c7df9',
        container: '#d2e7ff',
        onContainer: '#002859',
      },
      darkColors: {
        main: '#c0dfff',
        onContainer: '#dee6ff',
        container: '#426aa2',
      },
    },
  },
  events: [
    // ... other events
    {
      title: "Meeting with Mr. boss",
      start: Temporal.ZonedDateTime.from('2024-01-05T05:15:00+01:00[Europe/Berlin]\n'),
      end: Temporal.ZonedDateTime.from('2024-01-05T06:00:00+01:00[Europe/Berlin]\n'),
      id: "98d85d98541f",
      calendarId: "work"
    }, {
      title: "Sipping Aperol Spritz on the beach",
      start: Temporal.ZonedDateTime.from('2024-01-05T12:00:00+01:00[Europe/Berlin]\n'),
      end: Temporal.ZonedDateTime.from('2024-01-05T15:20:00+01:00[Europe/Berlin]\n'),
      id: "0d13aae3b8a1",
      calendarId: "leisure"
    },
  ]
}
```

--------------------------------

### Logger Plugin Example

Source: https://schedule-x.dev/docs/calendar/plugins/custom-plugins

A basic example of a custom plugin that logs calendar events upon initialization and demonstrates an additional lifecycle method.

```typescript
import {
  CalendarAppSingleton
} from '@schedule-x/shared'
import {
  createCalendar
} from '@schedule-x/calendar'

class LoggerPlugin {
  name = 'logger-plugin'

  beforeRender($app: CalendarAppSingleton) {
    $app.calendarEvents.list.value.forEach((event) => {
      console.log('init', event)
    })
  }

  onRender($app: CalendarAppSingleton) {
    console.log('do something else')
  }
}

const calendar = createCalendar(
  { /* config */ },
  [new LoggerPlugin()]
)
```

--------------------------------

### Initialize and Use Calendar Controls

Source: https://schedule-x.dev/docs/calendar/plugins/calendar-controls

Example of initializing the calendar with the controls plugin and programmatically changing the view and date.

```javascript
import { createCalendarControlsPlugin } from '@schedule-x/calendar-controls'

const calendarControls = createCalendarControlsPlugin()

const calendar = createCalendar(
  { /** config */ },
  [calendarControls]
)
calendar.render(/** your calendar element */)

// Programmatically change the calendar view
calendarControls.setView('week')

// Programmatically set the date
calendarControls.setDate(Temporal.PlainDate.from('2025-01-01'))
```
Tokens:
Raw