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.

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.

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
  }
})
 
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 (opens in a new tab)
• Vue example: https://github.com/schedule-x/vue-examples/tree/main/drag-to-create (opens in a new tab)
• Angular example: https://github.com/schedule-x/angular-examples/tree/main/sidebar--modal--drag-to-create (opens in a new tab)