A week-view scheduling calendar on a monitor with a red Maine Coon cat resting nearby on the desk.

SVAR React Calendar: A Scheduler That Ships With Batteries Included

The Orange Cat
The Orange Cat

Building a scheduling UI from scratch is one of those tasks that looks small until you start. You need a time grid, collision math for overlapping events, drag-to-move and drag-to-resize, an edit form, keyboard handling, theming, and probably a way to sync everything to a backend. SVAR React Calendar packages all of that into a single drop-in component with a refreshingly small prop surface and one tidy API handle for the rest.

It comes from XB Software, the team behind DHTMLX and the older Webix widgets, and it is part of the broader SVAR UI suite that ships for React, Svelte, and Vue from a shared TypeScript core. Crucially, the published React package is @svar-ui/react-calendar (the legacy wx-* naming no longer applies). If you are reaching for a Google-Calendar or Outlook-style scheduling surface rather than a simple date picker, this is the right tool, and a generous chunk of it is MIT licensed.

What You Get For Free

The open-source core is more batteries-included than you might expect from a freemium product. The MIT-licensed build covers:

  • Day, Week, and Month views with a proper time grid
  • Drag-and-drop to move and resize events, plus drag-to-create in the time-grid views
  • A sidebar or popup event editor that wires straight into the calendar
  • A calendar groups sidebar with built-in color-coded filtering (work, personal, and so on)
  • Context menus, custom toolbar layouts, and helper APIs
  • Custom event content, cards, and tooltips
  • Localization, configurable first day of week, and custom working hours
  • Built-in light and dark themes
  • iCal import and export
  • Full TypeScript definitions, with React 18 / 19 and Next.js compatibility

The PRO edition layers on more views without changing the component API: an Agenda list, a Year overview, a Resources view for side-by-side columns, a Timeline view, and recurring events with RRULE expansion. That is the one detail worth being precise about: agenda, year, resources, timeline, and recurrence are paid features. The free core is day, week, and month. PRO offers a 30-day trial (with a watermark) if you want to evaluate them.

Getting It Installed

Add the package with your manager of choice:

npm install @svar-ui/react-calendar

yarn add @svar-ui/react-calendar

The only peer dependencies are react and react-dom at version 18 or higher. One thing not to forget: you must import the stylesheet, or the calendar will render as unstyled markup.

import "@svar-ui/react-calendar/all.css";

Your First Calendar

The minimal setup is a Calendar component fed an array of events and a focus date. The one React-specific idiom to learn is init, a callback that hands you the calendar's API handle, which you stash in state so you can wire up the companion Editor.

import { useState } from "react";
import { Calendar, Editor } from "@svar-ui/react-calendar";
import "@svar-ui/react-calendar/all.css";

const events = [
  {
    id: 1,
    text: "Team standup",
    start: new Date(2026, 3, 20, 9, 0),
    end: new Date(2026, 3, 20, 9, 30),
  },
  {
    id: 2,
    text: "Sprint planning",
    start: new Date(2026, 3, 20, 10, 0),
    end: new Date(2026, 3, 20, 11, 30),
  },
];

export default function App() {
  const [api, setApi] = useState(null);

  return (
    <>
      <Calendar init={setApi} events={events} date={new Date(2026, 3, 20)} />
      {api && <Editor api={api} />}
    </>
  );
}

That is genuinely the whole thing for a working scheduler: a draggable, resizable week grid with an editor that opens when you click an event. The init={setApi} pattern is the canonical React way to capture the handle. You will see ref-style snippets floating around, but init is the one the official examples lean on.

The Shape Of An Event

Events need three required fields, id, start, and end, and almost always carry a text. Beyond that you can attach a calendar/group id for color coding, an allDay flag, and any custom domain fields, which pass through untouched to your renderers.

const event = {
  id: 1,
  start: new Date(2026, 4, 5, 9, 0),
  end: new Date(2026, 4, 5, 10, 0),
  text: "Standup",
  details: "Daily sync",
  // optional: allDay, a calendar/group id, custom fields...
};

Here is the gotcha that trips people up: start and end must be real Date objects. ISO date strings will silently fail to render. If your backend returns ISO strings (it probably does), map them before handing the array to the component:

const events = raw.map((e) => ({
  ...e,
  start: new Date(e.start),
  end: new Date(e.end),
}));

Turning On More Views

The view switcher is driven by a single views prop. The default trio is free; the rest require PRO but slot in without any other code changes.

<Calendar
  init={setApi}
  events={events}
  date={new Date(2026, 3, 20)}
  views={["day", "week", "month", "agenda", "year", "resources", "timeline"]}
/>

This is one of the nicer aspects of the design. You do not re-architect anything to adopt PRO features; you just list more strings.

The Store-As-API Model

Everything past the props flows through one reactive store, a pattern shared across the whole SVAR suite. State (current date, active view, filters, selection) lives in the store, and every user interaction dispatches a named action: add-event, update-event, delete-event, select-event, and so on. Dragging, resizing, editing, and creating all funnel through these.

You can observe and dispatch them programmatically through the API handle. To react after the fact, attach a listener with api.on. To dispatch an action yourself, use api.exec.

api.on("update-event", (ev) => {
  console.log("event moved or edited:", ev);
});

api.exec("add-event", {
  event: {
    id: undefined,
    text: "Ad-hoc review",
    start: new Date(2026, 4, 6, 14, 0),
    end: new Date(2026, 4, 6, 15, 0),
  },
});

If you prefer prop-based wiring, the component also accepts onaddevent, onupdateevent, ondeleteevent, and onselectevent callbacks, which mirror the same actions.

Intercepting Actions To Sync A Backend

The standout feature of this model is api.intercept, which lets you step in before an action applies and veto or transform it. This is the idiomatic way to keep a server in sync: let the UI respond, intercept the action, persist the change, and reconcile.

api.intercept("delete-event", (ev) => {
  if (ev.event.locked) {
    return false; // veto: the calendar won't delete it
  }
  return true;
});

api.intercept("update-event", async (ev) => {
  await fetch(`/api/events/${ev.event.id}`, {
    method: "PUT",
    body: JSON.stringify(ev.event),
  });
  return true;
});

Returning false cancels the action, while returning the (possibly modified) payload lets it proceed. For teams that would rather not hand-roll this, SVAR also ships a REST data provider in calendar-provider for server sync, alongside iCal import/export via calendar-ical.

Customizing The Look And The Editor

Two themes ship in the box: Willow (light) and WillowDark (dark), the standard SVAR theme pair. Because the widgets are themed through a wrapper and CSS custom properties, you can override accent colors, fonts, and spacing without forking stylesheets.

import { Calendar, Willow, WillowDark } from "@svar-ui/react-calendar";

export default function ThemedApp({ dark }: { dark: boolean }) {
  const Theme = dark ? WillowDark : Willow;
  return (
    <Theme>
      <Calendar init={setApi} events={events} date={new Date()} />
    </Theme>
  );
}

The companion Editor is flexible too. By default it auto-saves field changes through the update-event action, which is great for a live-feeling sidebar. If you want a deliberate Save button instead, turn off auto-save and supply your own bottom bar, and you can pop it into a dialog with placement.

<Editor api={api} placement="modal" autoSave={false} />

Combine that with custom event content, cards, and tooltips, plus custom toolbar layouts, and you can reshape the calendar fairly far from its defaults while keeping the underlying behavior intact.

Is It The Right Pick?

A fair bit of honesty belongs here. The React package is brand new, first published in mid-May 2026, sitting at version 2.6.1 (the 2.x reflects the suite's shared versioning, not the calendar's age). Weekly downloads are still tiny and the star count is modest. The engine is mature, drawing on the Svelte version and years of DHTMLX scheduling heritage, but the React port itself is fresh, which means fewer Stack Overflow answers than a heavyweight like FullCalendar. You will lean on the official docs and the SVAR forum more than on community Q&A.

Where it shines is the free core. Compared to react-big-calendar, you get an editor, iCal, themes, and drag-to-create without wiring a date library yourself. Compared to FullCalendar, you avoid the premium-plugin-per-feature sprawl, though FullCalendar still wins on ecosystem maturity and free recurrence. Its closest peer is Schedule-X, another modern freemium multi-framework scheduler; Schedule-X has more traction today, while SVAR brings the deeper engineering pedigree.

If you need a battle-tested React scheduler in production this week, the established options are safer. But if you are starting something greenfield and want a polished, well-architected scheduler with a genuinely usable MIT core and a clean upgrade path to advanced views, SVAR React Calendar is a promising newcomer well worth a trial run.