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. 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'))