Sidebar

npm install @sx-premium/sidebar

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
  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: factory function for generating event ids when events are created
  idFactory: () => uuidv4() // or any other id generator
})
 
const calendar = createCalendar(
  {
    translations: mergeLocales(
      translations,
      sidebarTranslations,
      modalTranslations
    )
    // ...config options
  },
  [
    eventsService,
    sidebar,
    interactiveEventModal,
    createDragToCreatePlugin(/* drag-to-create options */)
  ]
)
 
calendar.render(document.getElementById('your-calendar-wrapper'))