Integrating a user-friendly calendar feature with the ability to draw events directly on your React app can significantly enhance user experience. This guide will walk you through setting up a Schedule-X calendar with drawing functionality akin to Google Calendar.

Installation

Start by installing the required packages using npm:

npm install @schedule-x/react @schedule-x/theme-default

If your package manager doesn't handle peer dependencies automatically, install these additional packages:

npm install @schedule-x/calendar @preact/signals preact

Drawing Capabilities Setup

Enhance your calendar with drawing capabilities by using a premium plugin. Ensure your premium authorization is set up as specified in the Schedule-X premium documentation, then install the plugin:

npm install @sx-premium/draw

Full Implementation


import {useState} from 'react';
import {useCalendarApp, ScheduleXCalendar} from '@schedule-x/react';
import {
  createViewDay,
  createViewMonthGrid,
  createViewWeek,
} from '@schedule-x/calendar';
import {createDrawPlugin} from "@sx-premium/draw";

import '@schedule-x/theme-default/dist/index.css';

function CalendarApp() {
  const drawPlugin = useState(() => createDrawPlugin({
    onFinishDrawing: (calendarEvent) => {
      console.log(calendarEvent)
      // Add functionality to save the event, e.g., to a server
    }
  }))[0];

  const calendar = useCalendarApp({
    views: [createViewDay(), createViewWeek(), createViewMonthGrid()],
    events: [],
    plugins: [drawPlugin],
    callbacks: {
      onMouseDownDateTime(dateTime, mouseDownEvent) {
        drawPlugin.drawTimeGridEvent(dateTime, mouseDownEvent, {
          title: 'Unknown event'
        });
      },

      onMouseDownMonthGridDate(date) {
        drawPlugin.drawMonthGridEvent(date, {
          title: 'Unknown event'
        });
      },

      onMouseDownDateGridDate(date, mouseDownEvent) {
        drawPlugin.drawDateGridEvent(date, mouseDownEvent, {
          title: 'Unknown event'
        });
      }
    },
  })

  return (
    <div>
      <ScheduleXCalendar calendarApp={calendar}/>
    </div>
  )
}

export default CalendarApp

Styling the Calendar

The calendar requires a responsive design. Define the dimensions for its wrapper element:


.sx-react-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}

It's a wrap!

Integrating a calendar with drawing capabilities in React is very simple with Schedule-X. Your calendar is now set up to offer a modern, user-friendly UX, similar to what users expect from platforms like Google Calendar.

Building an Advanced Event Calendar in React with Event Drawing