Skip to Content
DocsCalendarPlugins⭐ Scheduling Assistant

Scheduling assistant

An Outlook-inspired scheduling assistant that helps you find the best time for a meeting or event.

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

Features & demo

  • Outlook-inspired Scheduling assistant
  • Drag & drop or resize the assistant, to find the best time given the people/resources

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/scheduling-assistant @sx-premium/resource-scheduler @schedule-x/calendar
@schedule-x/theme-default

Usage

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: '2025-03-07 10:00',
  initialEnd: '2025-03-07 12:00'
})
 
const calendar = createCalendar({
  selectedDate: '2025-03-07',
  events: [
    {
      id: 'event1',
      resourceId: 'janedoe',
      start: '2025-03-07 09:00',
      end: '2025-03-07 10:00',
      title: 'Event 1'
    },
    {
      id: 'event2',
      resourceId: 'johnsmith',
      start: '2025-03-07 10:00',
      end: '2025-03-07 11:00',
      title: 'Event 2'
    },
    {
      id: 'event3',
      resourceId: 'tedmosby',
      start: '2025-03-07 11:00',
      end: '2025-03-07 12:00',
      title: 'Event 3'
    },
    {
      id: 'event4',
      resourceId: 'janedoe',
      start: '2025-03-07 17:00',
      end: '2025-03-07 18:00',
      title: 'Event 4'
    }
  ],
  views: [hourlyView],
  plugins: [
    schedulingAssistant
  ]
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))

API

SchedulingAssistant

export interface SchedulingAssistant extends PluginBase<string> {
  currentStart: Signal<string>
  currentEnd: Signal<string>
  hasCollision: Signal<boolean>
}

Signal is a reactive variable which holds a value property. You can access the value anywhere in your code like schedulingAssistant.currentStart.value, or reactively listen to updates:

import { effect } from '@preact/signals'
 
effect(() => {
  console.log(schedulingAssistant.currentStart.value)
})

Changelog

See changelog page.

Examples

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

⭐ DrawEvents Service