Bryntum Calendar vs Mobiscroll Event Calendar

If you're choosing between Bryntum Calendar and Mobiscroll Event Calendar, you're deciding whether your application needs Excel and ICS export, undo/redo, and AI tooling or a calendar package that also supports jQuery and Ionic. Both libraries support resource scheduling, drag-and-drop editing, and multiple frameworks.

Start with these questions:

• Does the application need Excel or ICS export?
• Does the team need undo and redo in the calendar component?
• Does the project target jQuery or Ionic as well as React, Angular, or Vue?

This comparison uses these criteria:

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

Bryntum Calendar vs Mobiscroll: features and licensing at a glance

The table below covers the criteria most relevant to a production integration decision.

Feature	Bryntum Calendar	Mobiscroll Event Calendar
License	Commercial (perpetual)	Commercial (perpetual internal / SaaS subscription)
Free tier	Trial only	90-day trial; Lite excludes Event Calendar
View types	11	4 configurable
Day / Week / Month views	✔️	✔️
Resource scheduling	✔️	✔️
Event dependencies	❌	❌
Undo / redo	✔️	❌
Multiple instances per page	✔️	✔️
Export (Excel / ICS / print)	✔️ (client-side)	Print add-on; no Excel / ICS
React / Angular / Vue wrappers	✔️	✔️ (+ jQuery, Ionic)
TypeScript	✔️	✔️
MCP server	✔️	❌
Claude Code skill	✔️	❌
Built-in AI assistant	Experimental feature	❌

Bryntum Calendar

Bryntum Calendar is a commercial JavaScript calendar component with 11 view types:

• Standard: day, week, month, year, agenda, list, and multi-day
• Resource: resource day, resource week, resource month, and scheduler resource

Resources appear as color-coded lanes in resource views. The same resource data populates a configurable sidebar for filtering. The component is built on Bryntum Grid, so sorting, filtering, and grouping carry over without extra configuration.

Installing Bryntum Calendar

The trial package is available on the public npm registry without authentication:

npm install @bryntum/calendar@npm:@bryntum/calendar-trial@7.2.4

This minimal team calendar shows five team members across a work week. The container sets min-height: 100vh to fill the viewport:

<!-- index.html -->
<style>
  html, body { margin: 0; padding: 0; }
  #app { padding: 1rem; background: #f8f9fa; min-height: 100vh; }
</style>
<div id="app"></div>

import '@bryntum/calendar/fontawesome/css/fontawesome.css';
import '@bryntum/calendar/fontawesome/css/solid.css';
import '@bryntum/calendar/calendar.css';
import '@bryntum/calendar/svalbard-light.css';
import { Calendar } from '@bryntum/calendar';

new Calendar({
  appendTo : 'app',
  date     : '2025-10-12',
  height   : 700,
  mode     : 'week',

  modes : {
    week  : { showAllDayHeader : true },
    month : true,
    day   : true
  },

  resources : [
    { id : 'bryntum', name : 'Bryntum team',     eventColor : 'blue' },
    { id : 'hotel',   name : 'Hotel Park',       eventColor : 'orange' },
    { id : 'michael', name : 'Michael Johnson', eventColor : 'deep-orange' }
  ],

  events : [
    { id : 1, name : 'Hackathon 2025',                       startDate : '2025-10-11T14:00:00', endDate : '2025-10-18T12:00:00', allDay : true, resourceId : 'bryntum', eventColor : 'green' },
    { id : 2, name : 'Breakfast',                            startDate : '2025-10-12T09:00:00', endDate : '2025-10-12T10:00:00', resourceId : 'hotel' },
    { id : 3, name : 'Team Scrum',                           startDate : '2025-10-12T10:00:00', endDate : '2025-10-12T12:00:00', resourceId : 'bryntum' },
    { id : 4, name : 'Scheduler Grid introduction + review', startDate : '2025-10-12T12:00:00', endDate : '2025-10-12T14:00:00', resourceId : 'bryntum' }
  ]
});

Three CSS imports are required in order: FontAwesome icons, the structural calendar.css, and a theme file. Bryntum ships ten themes across five light/dark pairs, all switchable at runtime via DomHelper.setTheme().

Resource scheduling, export, undo/redo, and 45-language localization

The 11 view types include resource scheduling without a paid add-on. The base license also includes:

• Recurring events
• All-day events
• Drag-and-drop across views
• Undo/redo
• Client-side export to Excel, ICS, and print

The built-in localization covers 45 languages. The theming system is consistent across the Bryntum product suite (Gantt, Scheduler, Grid, and Task Board), so mixing components on the same page requires no visual reconciliation.

Bryntum Calendar: bundle size, trial watermark, and API surface

The trial watermark persists during evaluation, which complicates early stakeholder demos. The uncompressed bundle exceeds 4 MB, and applications where initial load time is critical should measure this impact early. The API surface (Calendar, ResourceStore, EventStore, and the view configuration layer) takes time to learn relative to a lighter alternative.

Bryntum Calendar pricing: perpetual license from $680 per developer

Per-developer licensing starts at $680 for a small team. OEM licensing for SaaS applications requires a separate quote. All licenses are perpetual and include 12 months of updates.

TypeScript, live code examples, and React/Angular/Vue wrappers

TypeScript type definitions ship with the package. Documentation at bryntum.com includes live code examples with an in-browser editor covering all 11 view types.

Framework wrappers for React (@bryntum/calendar-react), Angular, and Vue 3 are published on the same version cycle as the core.

For runtime theme switching, load theme files with <link> tags marked for Bryntum theme detection and call DomHelper.setTheme().

Locale files for all 45 languages ship with the package. Activating a locale requires importing the relevant locale file.

Coding agent support: MCP server, Claude Code skill, and AI assistant

Bryntum ships two complementary AI tools: the MCP server handles documentation retrieval, and the Claude Code skill adds judgment about common coding mistakes.

The MCP server (mcp.bryntum.com) exposes a search_bryntum_docs tool that returns version-specific documentation, source code examples, and API references for Calendar and the rest of the Bryntum suite. The command to register it in Claude Code:

claude mcp add --transport http bryntum https://mcp.bryntum.com

The Claude Code skill guides agents through mistakes that documentation retrieval alone misses: CSS import order, view configuration structure, and the correct dark mode pattern via DomHelper.setTheme(). An agent with both the MCP server and the skill produces working Calendar code with fewer correction cycles.

Bryntum also ships an experimental, disabled-by-default AI chat panel for Calendar that connects to Anthropic, OpenAI, or Google models. End users give natural language instructions such as "move the team standup to 10 AM every day this week" without touching the interface directly.

Use Bryntum Calendar when export and undo/redo are requirements

Bryntum Calendar is the right call when resource scheduling, export, localization, or undo/redo are production requirements. The full AI tooling stack makes it a better fit for teams building complex scheduling interfaces or using AI coding agents.

Mobiscroll Event Calendar

Mobiscroll Event Calendar is a commercial JavaScript component for calendar and resource scheduling interfaces. It ships four configurable view types: calendar (month, week, quarter, and year), scheduler (time-grid day, week, and month), timeline (resource and rota), and agenda. Resources appear as rows in the timeline view and as color-coded lanes in the scheduler view.

Bryntum Calendar is better when export and undo/redo are requirements, while Mobiscroll is easier to justify when jQuery or Ionic support matters more than those workflow features.

The Event Calendar is not available on the public npm registry. It requires authentication via the Mobiscroll CLI, which configures access to the Mobiscroll private registry.

Installing Mobiscroll Event Calendar

Two commands set up Mobiscroll access: the global CLI install and a per-project config step.

npm install -g @mobiscroll/cli
mobiscroll config javascript

The mobiscroll config javascript command opens a browser to authenticate with Mobiscroll and configures npm to use the Mobiscroll private registry. Follow the CLI prompts to install the package. A trial account is sufficient for evaluation.

The following shows a team calendar in week scheduler view with 14 events spanning April 27 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 * as mobiscroll from '@mobiscroll/javascript';
import '@mobiscroll/javascript/dist/css/mobiscroll.min.css';

mobiscroll.setOptions({ theme: 'material', themeVariant: 'light' });

mobiscroll.eventcalendar('#calendar', {
  view : {
    scheduler : {
      type      : 'week',
      startTime : '08:00',
      endTime   : '20:00'
    }
  },
  selectedDate : new Date(2026, 3, 28).getTime(),
  dragToCreate : true,
  dragToMove   : true,
  dragToResize : true,
  data : [
    { id : '1',  title : 'Team Standup',       start : new Date(2026, 3, 27, 9, 0),   end : new Date(2026, 3, 27, 9, 30)  },
    { id : '2',  title : 'Sprint Planning',     start : new Date(2026, 3, 27, 10, 0),  end : new Date(2026, 3, 27, 12, 0)  },
    { id : '3',  title : 'Design Review',       start : new Date(2026, 3, 27, 14, 0),  end : new Date(2026, 3, 27, 15, 0)  },
    { id : '4',  title : 'Team Standup',        start : new Date(2026, 3, 28, 9, 0),   end : new Date(2026, 3, 28, 9, 30)  },
    { id : '5',  title : 'API Workshop',        start : new Date(2026, 3, 28, 11, 0),  end : new Date(2026, 3, 28, 13, 0)  },
    { id : '6',  title : 'Client Demo Prep',    start : new Date(2026, 3, 28, 15, 0),  end : new Date(2026, 3, 28, 17, 0)  },
    { id : '7',  title : 'Team Standup',        start : new Date(2026, 3, 29, 9, 0),   end : new Date(2026, 3, 29, 9, 30)  },
    { id : '8',  title : 'Regression Testing',  start : new Date(2026, 3, 29, 10, 0),  end : new Date(2026, 3, 29, 13, 0)  },
    { id : '9',  title : 'Product Review',      start : new Date(2026, 3, 29, 14, 0),  end : new Date(2026, 3, 29, 15, 30) },
    { id : '10', title : 'Team Standup',        start : new Date(2026, 3, 30, 9, 0),   end : new Date(2026, 3, 30, 9, 30)  },
    { id : '11', title : 'Release Planning',    start : new Date(2026, 3, 30, 14, 0),  end : new Date(2026, 3, 30, 16, 0)  },
    { id : '12', title : 'Team Standup',        start : new Date(2026, 4, 1, 9, 0),    end : new Date(2026, 4, 1, 9, 30)   },
    { id : '13', title : 'Retrospective',       start : new Date(2026, 4, 1, 10, 30),  end : new Date(2026, 4, 1, 12, 0)   },
    { id : '14', title : 'UX Research Session', start : new Date(2026, 4, 1, 14, 0),   end : new Date(2026, 4, 1, 17, 0)   }
  ]
});

Three setup details require attention:

• The examples use a timestamp for selectedDate; calling .getTime() avoids string parsing and timezone ambiguity.
• Events use the data property, not events.
• Calling mobiscroll.setOptions() before any component mounts applies the theme globally.

jQuery and Ionic support, Theme Builder, and four configurable views

All four view types ship in a single package with no additional license needed per view. Drag-and-drop for creating, moving, and resizing events is included. Framework wrappers cover React, Angular, Vue, jQuery, and Ionic.

The Theme Builder generates custom themes without manual CSS. The dark mode variant switches with a single setOptions call.

No undo/redo, no Excel or ICS export, and CLI-based private registry install

Event dependencies are not supported, and the library has no undo/redo stack or built-in export to Excel or ICS. Mobiscroll provides print-optimized styling and a print method through its print module, which is included in higher tiers and available as an add-on for the Scheduling & Calendaring license.

The install process requires CLI authentication and does not use the public npm registry. This adds friction to CI/CD pipelines and onboarding, since every developer and build environment must authenticate with Mobiscroll.

Mobiscroll pricing: $995 per project for internal apps

Mobiscroll uses a per-project perpetual licensing model for internal applications:

• Scheduling & Calendaring: $995 (includes Event Calendar, single internal project)
• Complete: $1,955 (includes source code and priority support)
• Complete Company: $8,955 (multiple internal projects within one organization)

SaaS and multi-customer product licensing uses a subscription model with custom pricing based on customer count. Mobiscroll offers a 90-day trial and a 30-day money-back guarantee on purchases.

TypeScript, event naming conventions, and framework wrappers

TypeScript type definitions ship with the package. Documentation at mobiscroll.com covers all four view types with live examples.

Events use the data property (not events), and each event's resource field is resource, not resourceId. These naming differences are easy to miss when migrating from another library. Theme switching uses mobiscroll.setOptions({ themeVariant: 'dark' }), which is simpler than managing CSS <link> tags.

Framework wrappers are available for React, Angular, Vue, jQuery, and Ionic. Each wrapper package maps the same configuration options to the corresponding framework's idioms.

No AI tooling: private registry install blocks standard agent npm workflows

Mobiscroll ships no MCP server, Claude Code skill, or structured documentation retrieval for AI agents.

The private registry install process is the main friction point for AI agents. An agent following the standard npm install pattern generates npm install @mobiscroll/javascript, which fails without authentication because the Event Calendar is not on the public registry. Without a skill encoding this constraint, agents repeat the mistake.

Use Mobiscroll when jQuery, Ionic, or per-project pricing matter

Mobiscroll Event Calendar covers calendar and resource scheduling views in a single package. The first question to answer is whether undo/redo, Excel export, or ICS export are requirements. If they are, those features need custom implementation. The CLI-based install process repeats for each new development environment and CI/CD pipeline, so plan for it early.

Which is better: Bryntum Calendar or Mobiscroll?

For most production calendar applications, Bryntum Calendar is the right choice. The following features are included by default:

• Resource scheduling
• Drag-and-drop editing
• Excel, ICS, and print export
• Localization
• Undo/redo

The perpetual license avoids recurring per-developer costs. The MCP server and Claude Code skill make it easier to support in teams using AI coding agents.

Bryntum Calendar is the cleaner default unless the application needs calendar and resource scheduling views across a broader set of frameworks, particularly jQuery or Ionic, while Mobiscroll's $995 per-project price point is competitive when undo/redo and Excel/ICS export are not requirements. The CLI authentication process repeats for each new development environment, so plan for it across the team.