Drag to create

A plugin that allows you to create events by dragging an external placeholder element onto the calendar. Has support for week, day and month-grid views.

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

Features

Drag events onto the day- and week views
Drag events onto the month-grid view
Customize event properties at creation-time

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/drag-to-create

Usage

API

`createDragToCreatePlugin(config: DragToCreateConfig)`

Create the plugin instance.

`DragToCreateConfig`

Configuration object for the plugin. Added as the first parameter to the createDragToCreatePlugin function.

Property	Type	Default
`onAddEvent`	`(event: CalendarEvent) => void`	-
`onBeforeAddEvent`	`(event: CalendarEvent) => boolean`	-
`onBeforeAddEventAsync`	`(event: CalendarEvent) => Promise<boolean>`	-
`snapDuration`	`15 \| 30 \| 60`	30

`dragToCreate(eventId: string, otherEventProperties: Partial<CalendarEvent>)`

Call this method as a response to a dragstart event on your placeholder element, in order to start the drag-to-create process. The eventId is a required, unique id for the event being created. otherEventProperties is an optional object-parameter with the properties of the event being created (however, start and end properties will have no effect here).

Example


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

Changelog

See changelog page.

Examples

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

React example: https://github.com/schedule-x/react-examples/blob/main/drag-to-create/src/App.tsx
Vue example: https://github.com/schedule-x/vue-examples/tree/main/drag-to-create
Angular example: https://github.com/schedule-x/angular-examples/tree/main/sidebar—modal—drag-to-create
Svelte example: https://github.com/schedule-x/svelte-examples