Drag to create

npm install @sx-premium/drag-to-create

// somewhere in your html structure
<div id="event-placeholder" draggable="true">Create new event</div>

import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createDragToCreatePlugin } from '@sx-premium/drag-to-create'
 
import '@sx-premium/drag-to-create/index.css'
import '@schedule-x/theme-default/dist/calendar.css'
 
const onAddEvent = (event) => {
  console.log('Event added', event)
}
 
const dragToCreatePlugin = createDragToCreatePlugin({
  onAddEvent,
 
  // Optional: add a validation hook. Return false to prevent the event from being added.
  onBeforeAddEvent: (event, $app) => {
    // Your validation logic
    return true
  },
 
  // Optional: async version of onBeforeAddEvent
  onBeforeAddEventAsync: async (event, $app) => {
    // Your async validation logic
    // Return false to prevent the event from being added.
    return true
  }
})
 
const calendar = createCalendar({
  plugins: [
    createEventsServicePlugin(),
    dragToCreatePlugin,
  ],
})
 
const eventPlaceholder = document.getElementById('event-placeholder')
eventPlaceholder.addEventListener('dragstart', () => {
  dragToCreatePlugin.dragToCreate('yourEventId123', {
    title: '(No title)',
    calendarId: 'leisure',
  })
})
 
calendar.render(document.getElementById('your-calendar-wrapper'))