SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Just released

Feature-Rich Vue Calendar

SVAR Vue Calendar is a high-performance calendar component that helps you build a fully functional Vue event calendar in minutes, with intuitive interactions and flexible configuration.

Also available for:

100% Vue Event Calendar for Modern Apps

Seamless Vue & backend integration

SVAR Vue Calendar is written in Vue.js, with built-in TypeScript support, making it easy to integrate with your Vue application and backend. The component comes with a REST helper to load, update, and synchronize event data with your backend.

Flexible customization

Easily adapt the Vue calendar component to match your application design and requirements. Configure styles, labels, time scales, and layout with a developer-friendly, extensive API and CSS variables.

Day, Week, Month views

Day, Week, and Month views are available out-of-the-box, allowing users to explore schedules at different levels of detail. You can also define custom working hours, configure the first day of the week, and localize the UI to your region.

Drag-and-drop event management

Our Vue event calendar allows users to work with events directly in the calendar interface. Move events by dragging, resize them to change duration, or create new entries in the time grid with simple interactions.

Multiple calendars

With a sidebar panel, you can organize events using separate color-coded calendars, such as work, personal, or other categories. Users can select which calendars to display to focus on specific groups of events.

Custom event edit form

The calendar component comes with a built-in popup form for event editing. Configure the edit form to match your project requirements by adding custom fields and adjusting the layout. Extend it with comments and task lists.
Star on GitHub

Try Live Demo

For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Vue Calendar PRO with Advanced Views

The PRO Edition of SVAR Vue Calendar adds four more views and recurring event support for effective resource management, long-term planning, and complex booking calendars.

Pricing & Details Get Trial

Year View & Recurring Events

Get a complete picture of the year in a single compact layout — perfect for spotting busy periods and planning ahead. Recurring event support handles repeating schedules automatically using RRULE, so users define a pattern once and the Vue calendar expands it across the full date range.

Agenda View

Display upcoming events as an organized, date-grouped list that's easy to scan at any screen size. The Agenda View is a natural fit for mobile Vue apps, sidebars, and dashboard widgets where a focused event list is more practical than a full calendar grid.

Resources View

Schedule and track people, rooms, or equipment side by side in a clean booking calendar. Availability is immediately visible across all resources, making it straightforward to allocate time, prevent double-booking, and keep your Vue calendar data synchronized with the backend via the built-in REST helper.

Timeline View

Present events along a horizontal timeline to better visualize schedules and resource allocation across different time ranges. The Timeline view of SVAR Vue Calendar is useful for shift planning, facility booking, and any scheduling scenario that spans multiple resources over hours or days.

Try Calendar PRO

Get full access to SVAR Vue Calendar PRO for 30 days. We'll email you installation instructions right after you submit the form.

  • Fully functional trial
  • 30-day trial period
  • SVAR watermark

Read the full Trial License Agreement

Need help with integration?

We offer paid consulting and custom development services to help you get the most from SVAR Vue Calendar, from setup and customization to full web app development.

Contact Us

Frequently Asked Questions

SVAR Vue Calendar provides a full-fledged calendar system with multiple views, drag-and-drop support, and flexible customization options via CSS variables and extensive Vue-first API. Here is what makes it stand out from other calendar components:
  • Written natively in Vue 3
  • Built-in editor for editing event details
  • Multiple calendar support
  • Built-in toolbar and context menu
  • Event filtering (from simple to advanced)
  • Nice-looking light and dark themes
  • REST backend integration helper
This makes it suitable for use in Vue calendar applications, dashboards, and scheduling interfaces with complex user interface requirements.
Yes. The component includes full TypeScript support and a built-in REST helper for syncing event data with backend systems. It is designed for seamless integration with Vue-based scheduling applications that need live updates and complex client-server interactions.
Yes, the open-source edition is available for free under the permissive MIT license. It includes Day/Week/Month Views, interactive event editing, drag-and-drop UI, filtering, multi-calendar support, toolbar, context menu, and iCal import/export. It is suitable for building Vue-based, production-ready event calendars and schedulers for everyday event management.
PRO edition of SVAR Vue Calendar adds advanced scheduling views (Agenda, Year, Resources, Timeline) and recurring event support using RRULE. It is intended for complex scheduling applications like booking systems, enterprise dashboards, and planning tools. Compare editions and see pricing →
Yes. SVAR Vue Calendar PRO includes Resource and Timeline Views, allowing you to build booking systems, staff scheduling tools, and operational dashboards. Events can be assigned to resources such as rooms, users, or equipment.
SVAR Vue Calendar can be added to a Vue 3 project in just a few steps using npm or yarn.
  • Install the open-source Vue calendar component: npm install @svar-ui/vue-calendar
  • Import the Vue calendar component into your Vue application
  • Configure Day, Week, Month views
  • Synchronize events with a backend using the REST helper
  • Customize layouts, toolbars, editor forms, filters, and calendar styling
SVAR Vue Calendar is built specifically for Vue 3 and includes full TypeScript support, flexible APIs, and deep customization hooks for modern scheduling applications. Helpful resources: If you would like to try SVAR Vue Calendar PRO, request a free 30-day evaluation package.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github