Skip to main content

FullCalendar vs Schedule-X

· 13 min read
Arsalan Khattak
Computer Science graduate and Developer Advocate at Bryntum, previously at Vercel. Writes about JavaScript UI components and developer tooling.

FullCalendar and Schedule-X are MIT-licensed JavaScript calendar libraries with day, week, and month views and TypeScript support. If you're choosing between them, you're deciding whether your application needs free drag-and-drop and resize from day one or whether Schedule-X's Premium model is acceptable for those interactions.

Start with these questions:

  • Does drag-and-drop need to stay in the free tier?
  • Does the project need Svelte support?
  • Does the team prefer per-developer Premium pricing or one Premium license per project?

This comparison uses these criteria:

  • Installation and setup
  • Licensing and cost
  • Calendar views
  • Interaction features
  • Resource scheduling
  • Framework support
  • TypeScript support
  • AI support

What to know about FullCalendar and Schedule-X​

The table below summarizes the criteria used in this comparison.

FeatureFullCalendarSchedule-X
LicenseMIT (core) / Annual subscription (Premium)MIT (core) / Paid per-project (Premium)
Free tierMIT (no watermark)MIT (no watermark)
Day / Week / Month views✔️✔️
Resource schedulingPremium onlyPremium only
Drag-and-drop✔️ (free with interaction plugin)Premium only
Event resize✔️ (free with interaction plugin)Premium only
Recurring events✔️ (free via rrule plugin)✔️ (free via event-recurrence plugin)
Undo / redo❌❌
Export to PDF / Excel❌❌
ICS import✔️ (free)✔️ (free)
Event dependencies❌❌
Multiple instances per page✔️✔️
React / Angular / Vue wrappers✔️✔️ (+ Svelte)
TypeScript✔️✔️
MCP server❌❌
Claude Code skill❌❌
Built-in AI assistant❌❌

FullCalendar​

FullCalendar is a JavaScript calendar library with an MIT-licensed core. The standard plugin set covers DayGrid, TimeGrid, List, and Multi-Month views. Drag-and-drop and resize are free via the @fullcalendar/interaction plugin. Resource scheduling, which maps events to rows of people, rooms, or other resources, requires the Premium license.

The FullCalendar architecture is plugin-based: each view type and feature is a separate importable package. The core package does nothing without at least one view plugin.

Installing FullCalendar​

The standard packages are available on the public npm registry under the MIT license:

npm install @fullcalendar/core@6.1.20 @fullcalendar/daygrid@6.1.20 @fullcalendar/timegrid@6.1.20 @fullcalendar/list@6.1.20 @fullcalendar/interaction@6.1.20

The following shows a team calendar week view with events spanning April 26 to May 1:

<!-- index.html -->
<style>
html, body { margin: 0; padding: 0; height: 100%; font-family: Arial, sans-serif; }
#app { padding: 16px; height: 100vh; box-sizing: border-box; }
#calendar { height: calc(100vh - 32px); }
</style>
<div id="app">
<div id="calendar"></div>
</div>
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

const calendarEl = document.getElementById('calendar');

const calendar = new Calendar(calendarEl, {
plugins : [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],

initialView : 'timeGridWeek',
initialDate : '2026-04-28',
height : '100%',

headerToolbar : {
left : 'prev,next today',
center : 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},

slotMinTime : '08:00:00',
slotMaxTime : '20:00:00',
editable : true,

events : [
{ id : '1', title : 'Team Standup', start : '2026-04-27T09:00', end : '2026-04-27T09:30' },
{ id : '2', title : 'Sprint Planning', start : '2026-04-27T10:00', end : '2026-04-27T12:00' },
{ id : '3', title : 'Design Review', start : '2026-04-27T14:00', end : '2026-04-27T15:00' },
{ id : '4', title : 'Team Standup', start : '2026-04-28T09:00', end : '2026-04-28T09:30' },
{ id : '5', title : 'API Workshop', start : '2026-04-28T11:00', end : '2026-04-28T13:00' },
{ id : '6', title : 'Client Demo Prep', start : '2026-04-28T15:00', end : '2026-04-28T17:00' },
{ id : '7', title : 'Team Standup', start : '2026-04-29T09:00', end : '2026-04-29T09:30' },
{ id : '8', title : 'Regression Testing', start : '2026-04-29T10:00', end : '2026-04-29T13:00' },
{ id : '9', title : 'Product Review', start : '2026-04-29T14:00', end : '2026-04-29T15:30' },
{ id : '10', title : 'Team Standup', start : '2026-04-30T09:00', end : '2026-04-30T09:30' },
{ id : '11', title : 'Release Planning', start : '2026-04-30T14:00', end : '2026-04-30T16:00' },
{ id : '12', title : 'Team Standup', start : '2026-05-01T09:00', end : '2026-05-01T09:30' },
{ id : '13', title : 'Retrospective', start : '2026-05-01T10:30', end : '2026-05-01T12:00' },
{ id : '14', title : 'UX Research Session', start : '2026-05-01T14:00', end : '2026-05-01T17:00' }
]
});

calendar.render();

Three setup details require attention:

  • Drag-and-drop and event resize require the @fullcalendar/interaction plugin in the plugins array. Setting editable: true alone is insufficient without it.
  • In v6, CSS is injected automatically by the JavaScript bundle. No manual CSS imports are needed.
  • Resource views (@fullcalendar/resource-timeline, @fullcalendar/resource-timegrid) require a Premium license key set in schedulerLicenseKey.

FullCalendar rendering a team week view with color-coded events across April 26 to May 2, 2026

FullCalendar is best when drag-and-drop must stay free​

The MIT-licensed standard tier carries no evaluation watermark, no per-developer fee, and no restriction on open-source use. Day, week, month, list, and multi-month views are included, along with drag-and-drop, event resize, and ICS import.

Framework wrappers for React, Angular, and Vue are first-party and free. TypeScript definitions ship with every package, with no separate @types/ package required.

FullCalendar has been in active development since 2010. Documentation at fullcalendar.io covers all view types, event sources, and framework integrations.

Compared with Schedule-X, FullCalendar is the better choice when drag-and-drop and event resize must stay free. Schedule-X moves those interactions to Premium in v4, so a team pays earlier if the calendar needs interactive editing.

FullCalendar tradeoffs​

Resource scheduling requires the Premium subscription. Event dependencies, undo/redo, Excel export, and ICS export are absent from the standard package.

Premium is priced per developer per year. A three-person team pays $1,440 per year for resource views. The subscription covers updates while active. The last released version remains usable after expiration without further updates.

FullCalendar ships no MCP server, no Claude Code skill, and no AI tooling.

Compared with Schedule-X, FullCalendar has clearer seat pricing for Premium but becomes expensive as the number of developers grows. Schedule-X starts with lower published Premium prices for one developer, but teams need to confirm the price for additional developers.

FullCalendar cost​

The MIT-licensed core is free with no per-developer fee. Premium, which includes resource timeline and resource time-grid views, starts at $480 per developer per year (for up to ten developers). OEM licensing for products shipped to multiple clients requires a custom quote.

FullCalendar developer experience​

TypeScript definitions are bundled with every @fullcalendar/* package. The config object passed to new Calendar() covers all settings.

Drag-and-drop and event resize require @fullcalendar/interaction in the plugins array. Without it, events are read-only regardless of the editable property value.

Framework integrations ship as separate packages: @fullcalendar/react, @fullcalendar/angular, and @fullcalendar/vue3. Accessing the calendar API imperatively in React requires useRef and .getApi().

FullCalendar AI support​

FullCalendar ships no MCP server, no Claude Code skill, and no built-in AI assistant.

The plugin system is the main friction point for AI agents. An agent without current documentation may omit @fullcalendar/interaction from the plugins array, producing a calendar where editable: true has no effect. Agents may also attempt to access resource views without the Premium license key, producing a watermark warning in the rendered output.

Use FullCalendar when free interactive editing matters​

FullCalendar fits applications that need standard calendar views with free drag-and-drop and event resize, broad framework support, and a library with a decade of production use. Teams that plan to add resource scheduling later need to account for the Premium subscription cost upfront.

Schedule-X​

Schedule-X is an open-source JavaScript calendar library with an MIT-licensed core. The free core includes six views:

  • Day
  • Week
  • Month grid
  • Month agenda
  • Week agenda
  • List

The library is built on Preact and ships first-party framework integrations for React, Angular, Vue, and Svelte. Resource scheduling, drag-and-drop, and event resize are paid Premium add-ons.

Installing Schedule-X​

The core package and default theme are on the public npm registry. Schedule-X v4 uses the Temporal API for configuration dates, so the polyfill is a required peer dependency:

npm install @schedule-x/calendar@4.5.0 @schedule-x/theme-default@4.5.0 temporal-polyfill@0.3.2

The temporal-polyfill/global import must come before creating any dates or rendering the calendar:

<!-- index.html -->
<style>
html, body { margin: 0; height: 100%; }
#calendar-container { width: 100%; height: calc(100vh - 32px); }
</style>
<div id="calendar-container"></div>
import 'temporal-polyfill/global';
import {
createCalendar,
createViewDay,
createViewWeek,
createViewMonthGrid,
createViewMonthAgenda
} from '@schedule-x/calendar';
import '@schedule-x/theme-default/dist/index.css';

const calendar = createCalendar({
views : [createViewWeek(), createViewDay(), createViewMonthGrid(), createViewMonthAgenda()],
defaultView : 'week',
selectedDate : Temporal.PlainDate.from('2026-04-28'),
weekOptions : { gridHeight : 700, scrollToHour : 8 },

events : [
{ id : '1', title : 'Team Standup', start : '2026-04-27 09:00', end : '2026-04-27 09:30' },
{ id : '2', title : 'Sprint Planning', start : '2026-04-27 10:00', end : '2026-04-27 12:00' },
{ id : '3', title : 'Design Review', start : '2026-04-27 14:00', end : '2026-04-27 15:00' },
{ id : '4', title : 'Team Standup', start : '2026-04-28 09:00', end : '2026-04-28 09:30' },
{ id : '5', title : 'API Workshop', start : '2026-04-28 11:00', end : '2026-04-28 13:00' },
{ id : '6', title : 'Client Demo Prep', start : '2026-04-28 15:00', end : '2026-04-28 17:00' },
{ id : '7', title : 'Team Standup', start : '2026-04-29 09:00', end : '2026-04-29 09:30' },
{ id : '8', title : 'Regression Testing', start : '2026-04-29 10:00', end : '2026-04-29 13:00' },
{ id : '9', title : 'Product Review', start : '2026-04-29 14:00', end : '2026-04-29 15:30' },
{ id : '10', title : 'Team Standup', start : '2026-04-30 09:00', end : '2026-04-30 09:30' },
{ id : '11', title : 'Release Planning', start : '2026-04-30 14:00', end : '2026-04-30 16:00' },
{ id : '12', title : 'Team Standup', start : '2026-05-01 09:00', end : '2026-05-01 09:30' },
{ id : '13', title : 'Retrospective', start : '2026-05-01 10:30', end : '2026-05-01 12:00' },
{ id : '14', title : 'UX Research Session', start : '2026-05-01 14:00', end : '2026-05-01 17:00' }
]
});

calendar.render(document.getElementById('calendar-container'));

Three setup details require attention:

  • The temporal-polyfill/global import must come before any call to Temporal.*. Without it, Temporal is undefined at runtime.
  • The selectedDate property accepts a Temporal.PlainDate object, not a plain string.
  • Event start and end use 'YYYY-MM-DD HH:mm' strings for timed events, or 'YYYY-MM-DD' for all-day events.

Schedule-X rendering a week view with color-coded events across April 27 to May 3, 2026

Schedule-X is best when Svelte support and project pricing matter​

The MIT-licensed core carries no evaluation watermark, no per-developer fee, and no restriction on open-source use. The functional API (createCalendar(), createViewWeek()) is small and tree-shakable. The production bundle includes only the views imported.

Framework support spans React, Angular, Vue, and Svelte, all with first-party integrations. Premium licensing is per project, and the published €299 yearly and €599 lifetime prices apply to one developer.

Compared with FullCalendar, Schedule-X is better when first-party Svelte support matters and the team accepts Premium for drag-and-drop, resize, or resource scheduling. FullCalendar is the better free option for teams that need interactive event editing from day one.

Schedule-X tradeoffs​

Drag-and-drop and event resize are premium in v4, moved from the free tier in Schedule-X v3. Teams upgrading from v3 hit this gate unexpectedly. Resource scheduling is also premium.

The free core has no Excel export, no PDF export, and no undo/redo. ICS support is import-only. Event dependencies are not supported.

The Temporal API dependency adds a polyfill requirement. LLM training data still contains string-based Schedule-X examples from v2 and v3, so an AI agent without current documentation is likely to produce code that fails at runtime.

Schedule-X ships no MCP server, no Claude Code skill, and no AI tooling.

Compared with FullCalendar, Schedule-X prices Premium by project rather than only by developer seat. That makes the cost model different, but not automatically cheaper for a larger team because the public prices shown on the Premium page are for one developer.

Schedule-X cost​

The MIT-licensed core is free with no per-developer fee, no watermark, and no evaluation restrictions. Premium add-ons (@sx-premium/drag-and-drop, @sx-premium/resize, @sx-premium/resource-scheduler, and others) require one license per project:

  • Yearly: from €299 per year for one developer
  • Lifetime: from €599 one-time for one developer (includes one year of updates)
  • Enterprise: custom quote

Premium includes all Premium packages for the licensed project.

Schedule-X developer experience​

TypeScript definitions ship with every @schedule-x/* package. The library is written in TypeScript. Documentation at schedule-x.dev covers all free and premium plugins.

The calendar wrapper element must have an explicit height set via CSS. Omitting this produces a zero-height container with no visible calendar.

When using Vite, add the following to vite.config.js to prevent duplicate Preact instances:

export default defineConfig({
optimizeDeps : {
include : ['@schedule-x/calendar', 'preact', 'preact/hooks', 'preact/jsx-runtime']
},
resolve : {
dedupe : ['preact', 'preact/hooks', 'preact/jsx-runtime']
}
});

Schedule-X AI support​

Schedule-X ships no MCP server, no Claude Code skill, and no built-in AI assistant.

The Temporal polyfill and the v4 API are the main friction points for AI agents. An agent working from training data is likely to omit the polyfill import, use plain date strings for selectedDate, or generate @schedule-x/drag-and-drop imports that are now behind a premium paywall.

Use Schedule-X when Svelte support is worth Premium add-ons​

Schedule-X fits applications that need an MIT-licensed calendar with Svelte support, the team is comfortable with the Temporal API, and drag-and-drop can wait for a Premium add-on. Teams should price the Premium license by project and developer count before choosing it for paid features.

Which one to pick​

For production calendar applications that need free drag-and-drop, FullCalendar is the right choice. The following features are included in the MIT core:

  • Day, week, month, list views
  • Drag-and-drop and event resize
  • Recurring events
  • ICS import
  • React, Angular, Vue wrappers

The $480-per-developer-per-year Premium tier adds resource timeline and resource time-grid views.

Schedule-X is the right choice when the application needs an MIT-licensed calendar with Svelte support, one Premium license per project is preferable to a FullCalendar Premium subscription, and drag-and-drop is either not required or worth purchasing as a Premium add-on. The published Premium price starts at €299 per year or €599 lifetime for one developer, so teams should confirm seat cost before comparing it with FullCalendar Premium.

Neither library ships AI tooling. Teams using AI coding agents should expect to provide current documentation in both cases.

Bryntum Calendar​

Bryntum Calendar is the stronger commercial choice when your application needs resource scheduling and drag-and-drop without a Premium subscription. It includes those features alongside export and undo/redo in a single commercial package across React, Angular, Vue, and plain JavaScript.

Bryntum publishes per-developer pricing and provides a free Calendar trial download. Trial packages and framework wrappers are available on the public npm registry, and the Bryntum Calendar npm repository guide explains licensed package access.