Docs
Calendar
⭐ Resource scheduler

Resource Scheduler

A view for displaying resources (people, rooms, equipment etc.) in a time grid.

This is a premium plugin which requires an active license to be used. Learn more at Schedule-X premium.

Features & demo

  • Infinite scroll & lazy loading
  • Drag & drop
  • Resizing events
  • Interactive modal for adding, editing or deleting events

Go to Demo


2. Installation

2.1 Set up premium auth (only once)

Follow the instructions for setting up an .npmrc

2.2 Install

npm install @sx-premium/resource-scheduler

Usage

import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal } from "@sx-premium/interactive-event-modal";
import { createHourlyView, createDailyView, createConfig } from "@sx-premium/resource-scheduler";
 
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);
 
resourceConfig.resources.value = [
  {
    label: 'Room 100',
    id: '1'
  },
  {
    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({
  events: [
    {
      id: 1,
      title: 'Event 1',
      start: '2024-05-11 14:00',
      end: '2024-05-11 17:00',
      resourceId: '1'
    },
    {
      id: 2,
      title: 'Event 2',
      start: '2024-05-11 14:00',
      end: '2024-05-11 16:00',
      resourceId: '2'
    }
  ],
  views: [hourlyView, dailyView],
  plugins: [
    eventsService,
    interactiveEventModal
  ]
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))

Changelog

See changelog page.

Examples

These can be added on request. Please let us know if you need an example for a specific framework.

iCalendar pluginTheme