SVAR Calendar: A Free, Modern Event Calendar for React, Svelte & Vue

#react #vue #svelte #opensource

If you’re looking for an event calendar for your web app and considering ready-to-use libraries, you’ve probably noticed that many open-source options cover the basics but leave you to build the rest yourself. On the other hand, enterprise-grade tools often include the features you need, but they also come with a higher price tag and more complexity.

SVAR Calendar addresses both of these pain points at once — a modern, framework-native event calendar for React, Svelte, and Vue with a free MIT-licensed core and a PRO edition for advanced scheduling needs.

👉 See the live demo

Find the demos and docs here:

SVAR Calendar: Open-Source Core under MIT

The open-source edition of SVAR Calendar is released under the MIT license, meaning you can use it freely in personal projects, open-source applications, and commercial products.

🛠 Fork the calendar components on GitHub: React • Svelte • Vue

The free core already includes everything needed to build a fully functional scheduling UI:

Day, Week, and Month views — three built-in layouts covering the most common scheduling patterns, from hour-by-hour daily planning to high-level monthly overviews.
Drag-and-drop editing — move events, resize them to adjust duration, or create new ones with a drag-to-create gesture directly on the time grid. The same interactions you're used to in Google Calendar or the iOS Calendar app.
Built-in event editor — a sidebar or modal edit form for updating event details, with support for custom fields, comments, and task lists.
Calendar groups — organize events by category (Work, Personal, Holidays, etc.) and toggle them on or off from a sidebar panel. Each group gets its own color.
Filtering — filter events by text, natural language query, or stack multiple conditions using the SVAR Filter engine.
iCal import/export — load .ics files from external calendars or export events for syncing with Google Calendar, Outlook, or Apple Calendar.
Theming and localization — built-in light and dark themes, CSS variable overrides, and localization support for labels and date formats.
Backend integration — connect to any REST API with the built-in RestDataProvider that handles data loading and CRUD syncing automatically.

Installation is straightforward, for React, Svelte and Vue accordingly:

npm install @svar-ui/react-calendar
npm install @svar-ui/svelte-calendar
npm install @svar-ui/vue-calendar

All three versions share a unified API and feature set, yet remain separate, framework-native components — no wrappers, no adapters, full TypeScript support across all three.

A Quick Svelte Example

Drop this snippet into your Svelte project and you'll immediately get a working weekly calendar with two color-coded groups, sample events, a sidebar calendar selector, and the built-in editor:

<script>
  import { Calendar, Editor, CalendarPanel } from "@svar-ui/svelte-calendar";

  let api = $state();

  const calendars = [
    { id: "work", label: "Work" },
    { id: "personal", label: "Personal" },
  ];

  const events = [
    {
      id: 1,
      start: new Date(2026, 4, 4, 9, 0),
      end: new Date(2026, 4, 4, 9, 30),
      text: "Daily standup",
      calendarId: "work",
    },
    {
      id: 2,
      start: new Date(2026, 4, 4, 13, 0),
      end: new Date(2026, 4, 4, 14, 0),
      text: "Lunch with team",
      calendarId: "personal",
    },
  ];
</script>

<Calendar bind:this={api} {events} view="week">
  <CalendarPanel {calendars} accessor="calendarId" />
</Calendar>

<Editor {api} />

Using React or Vue? The structure is almost identical — same API, same logic, just written with framework-native syntax.

👉 Find the detailed getting started guides in SVAR docs.

SVAR Calendar PRO with Additional Views

For teams that need more than the everyday scheduling basics, the PRO edition adds four advanced views and recurring event support:

Year View — all twelve months at a glance, with busy-day markers, today highlighted, and event previews on hover. Useful if your app needs a wide-angle view of the schedule.

Here's an example of how to enable an additional PRO view. Set view="year" and include "year" in the views prop, which defaults to ["day", "week", "month"].

<script>
  import { Calendar } from "@svar-ui/svelte-calendar";

  const events = [
    { id: 1, start: new Date(2025, 2, 10, 9), end: new Date(2025, 2, 10, 10), text: "Meeting" },
    { id: 2, start: new Date(2025, 2, 9), end: new Date(2025, 2, 12), text: "Conference" },
  ];
</script>

<Calendar
  {events}
  view="year"
  date={new Date(2025, 5, 15)}
  views={["year", "day", "week", "month"]}
/>

Agenda View — a clean, chronological list of events grouped by day. A natural fit for mobile layouts, daily briefing widgets, or customer-facing portals.

Resources View — a single-day schedule split into columns, one per resource such as rooms, people, or equipment. Particularly useful for booking calendars.

Timeline View — a horizontal single-day layout with each resource as its own row and events rendered as time-length bars. Well suited for shift planning, task timelines, and rental platforms.

Recurring Events — create repeating schedules using RRULE with full control over series updates, single-occurrence edits, and forward-only changes.

A 30-day free trial is available for teams who want to evaluate PRO features:

Wrapping Up

SVAR Calendar gives React, Svelte, and Vue developers a modern, framework-native event calendar that makes it easier to add scheduling interfaces to their apps with familiar code and flexible APIs.

Whether you’re adding a simple weekly planner to an internal tool or building a full resource booking system, the free edition gets you further than most libraries. The PRO edition adds advanced views and recurrence support for more complex booking and resource management scenarios.

If SVAR Calendar saves you time, a GitHub star helps other developers find it and motivates us to move forward with the new features and improvements ⭐

If you have any feedback, or have any questions, feel free to post in our community forum. We're here to listen and help.