Draw

npm install @sx-premium/draw

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
  ]
})