Draw

A plugin that enables your users to draw events directly onto the calendar. Compatible with week, day, and month views.

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

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/draw

Usage

API

`createDrawPlugin(config: { onFinishDrawing: (event: CalendarEvent) => void })`

Create the plugin instance.

`drawTimeGridEvent(dateTime: string, mouseDownEvent: MouseEvent, eventProperties: { [key: string]: any })`

Create a new event in the time grid of the day- and week views.

`drawDateGridEvent(date: string, mouseDownEvent: MouseEvent, eventProperties: { [key: string]: any })`

Create a new full-day event in the date grid of the day- and week view.

`drawMonthGridEvent(date: string, eventProperties: { [key: string]: any })`

Create a new full-day event in the month grid view.

Example


import {
  createCalendar,
  viewWeek,
  viewMonthGrid,
  viewDay,
} from '@schedule-x/calendar'
import { createDrawPlugin } from "@sx-premium/draw";
const drawPlugin = createDrawPlugin({
  onFinishDrawing: (event) => {
    // do something, like saving the event to the server
  },
 
  // (Optional) callback that runs on mouseup after drawing an event, before calling onFinishDrawing
  onBeforeFinishDrawing: (event) => {
    // do something, like validating the event
    // return false to remove the event, and true to keep it
  },
 
  // (Optional) async version of onBeforeFinishDrawing
  onBeforeFinishDrawingAsync: async (event) => {
    // do something, like validating the event
    // return false to remove the event, and true to keep it
  },
 
  // (Optional) configure the intervals, in minutes, at which a time grid-event can be drawn. Valid values: 15, 30, 60
  snapDuration: 30
})
 
const calendar = createCalendar({
  callbacks: {
    onMouseDownDateTime(dateTime, mouseDownEvent) {
      drawPlugin.drawTimeGridEvent(dateTime, mouseDownEvent, {
        title: 'Unknown event'
      })
    },
 
    onMouseDownMonthGridDate(date, _mouseDownEvent) {
      console.log(_mouseDownEvent)
      drawPlugin.drawMonthGridEvent(date, {
        title: 'Unknown event'
      })
    },
 
    onMouseDownDateGridDate(date, mouseDownEvent) {
      drawPlugin.drawDateGridEvent(date, mouseDownEvent, {
        title: 'Unknown event'
      })
    }
  },
  views: [viewMonthGrid, viewWeek, viewDay],
  plugins: [
    drawPlugin
  ]
})

Changelog

See changelog page.

Examples

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

Vue example: https://github.com/schedule-x/vue-examples/tree/main/draw
React example: https://github.com/schedule-x/react-examples/tree/main/draw
Svelte example: https://github.com/schedule-x/svelte-examples