Skip to main content

Free vs PRO

This guide maps out what ships with the open-source Calendar and what the PRO build adds on top, so you can decide which one fits your project before you start wiring views and editors.

Free vs PRO​

The Calendar comes in two builds: a free MIT-licensed version and a PRO version. The free build covers everyday scheduling - three core views, the editor, the toolbar, drag-to-create, theming, and backend wiring. PRO adds the heavier views and recurrence support that larger scheduling apps usually need.

Both builds share the same component, store, actions, and data shape. You don't write different code for PRO - you import from a different package and the extra views light up. Anything you built against the free API keeps working after an upgrade.

What's in the free build​

The MIT version covers most of the surface area of the widget:

  • Day, Week, and Month views.
  • Toolbar (date nav, Today, view switcher, add-event button), event editor, context menu, hover tooltip, click popup card.
  • Composite editor fields including comments and tasklist when you register the matching components.
  • Event filtering through filter-events.
  • Calendar groups via CalendarPanel
  • iCal import and export with parseICal / serializeICal.
  • Backend integration through RestDataProvider or your own action handlers.

What PRO adds​

PRO unlocks four extra views plus recurring-event handling:

  • Agenda view - chronological list grouped by day inside the current month range. Good for daily briefings and "next 14 days" digests.
  • Year view - twelve mini-month sections with day dots that mark event density. Useful for wide-angle planning.
  • Resources view - resources as columns, time as rows, single day. Drop-in for room and staff scheduling.
  • Timeline view - resources on the y-axis, time on the x-axis. Suits Gantt-style plans across people, equipment, or rooms.
  • Recurring events - set recurring={true} and provide events with an rrule field. The store expands occurrences and lets users edit a single occurrence or "this and following" through update-event's mode option.

Each PRO view is pre-registered under its id (agenda, year, resources, timeline), so you enable it just by adding the id to the views prop.

Trial version​

You can request a free 30-day trial of the PRO edition.

The trial package installs from the public registry:

# yarn
yarn add @svar-ui/trial-vue-calendar

# npm
npm install @svar-ui/trial-vue-calendar

PRO edition​

See the license page for pricing and purchase details.

After purchase you'll receive an email with credentials for the private npm registry that hosts the PRO build. Log in to the registry first:

npm config set @svar:registry https://npm.svar.dev
npm login --registry=https://npm.svar.dev --scope=@svar --auth-type=legacy

Then install the package:

# yarn
yarn add @svar/vue-calendar

# npm
npm install @svar/vue-calendar

Enabling agenda and year views​

Add the view ids to the views prop. The toolbar's view switcher picks them up automatically. The view prop selects which one is active on mount.

<Calendar
    :events="events"
    view="agenda"
    :views="['day', 'week', 'month', 'agenda', 'year']"
/>

The view prop picks which one is active on mount. The other views stay one click away in the switcher.

Resource scheduling​

Use the resources view (columns of resources for one day) or timeline view (rows of resources across a time range). Both bind events to a resource through an accessor you configure on the section's scale.

<Calendar
    :events="events"
    view="resources"
    :views="[
        'day',
        'week',
        {
            id: 'resources',
            sections: {
                timeGrid: {
                    xScale: {
                        items: [
                            { id: 'room-a', label: 'Room A' },
                            { id: 'room-b', label: 'Room B' },
                        ],
                        accessor: 'roomId',
                    },
                },
            },
        },
    ]"
/>

Each event needs the matching field (here roomId) so the store can route it to the right column. Swap to the timeline id for the row-based layout.

Recurring events​

Turn on recurring and feed events that carry an rrule string. The store expands them into occurrences for the visible range.

<Calendar
    :events="events"
    :recurring="true"
/>

A sample event:

const events = [
	{
		id: 1,
		start: new Date(2026, 4, 5, 9, 0),
		end: new Date(2026, 4, 5, 9, 30),
		text: "Daily standup",
		rrule: "FREQ=DAILY;COUNT=20",
	},
];