Interactive event modal

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

import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal } from "@sx-premium/interactive-event-modal";
 
import '@sx-premium/interactive-event-modal/index.css'
 
const eventsService = createEventsServicePlugin()
 
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): 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): configure the time picker to use 12-hour format
  has12HourTimeFormat: 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): 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: {},
  }
})
 
const calendar = createCalendar({
  // ...other configuration
  plugins: [
    eventModal,
    eventsService,
  ],
 
  callbacks: {
    onDoubleClickDateTime(dateTime) {
      eventModal.clickToCreate(dateTime, {
        id: 'some-event-id',
      })
    }
  }
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))

fields: {
  description: {}
  // other fields
}