Skip to Content
DocsCalendarPlugins⭐ Draw

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.

Last updated on