Skip to Content
DocsCalendarPlugins⭐ Drag to create

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.

PropertyTypeDefault
onAddEvent(event: CalendarEvent) => void-
onBeforeAddEvent(event: CalendarEvent) => boolean-
onBeforeAddEventAsync(event: CalendarEvent) => Promise<boolean>-
snapDuration15 | 30 | 6030

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.

Last updated on