---
title: "JavaScript Event Calendar with Scheduling & Multiple Views | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/eventcalendar"
---

# JavaScript Event Calendar Component with Week and Month Views

Add week, month & year views, drag & drop, recurring events, and CRUD to any JavaScript app — an event calendar for responsive mobile and desktop. Plain JavaScript API. Last update: Oct 30, 2026

Build an interactive event calendar for appointments, classes, reservations and schedules. Display events as labels in a calendar grid, handle recurring and multi-day events, and configure drag-and-drop editing around your application's data.

Add the Event Calendar to a plain JavaScript web page or a bundled application without a frontend framework.

## Overview

Mobiscroll Event Calendar displays scheduled events inside a calendar grid, including week, month and year layouts. The Calendar view is one of four views of the Event Calendar component: Calendar, Scheduler, Timeline and Agenda. Each shows the same kinds of event data in a different way. Use the Calendar view when people need a date-based overview; add a Scheduler, horizontal Timeline or Agenda list when the workflow needs a different perspective.

## Event calendar highlights

### Flexible calendar grids for events

Show weeks, months, quarters or years, choose how events appear on each date and adapt the calendar between desktop and mobile layouts.

### Event labels, popovers and custom content

Display scheduled items directly in calendar cells, open a list when a day contains more events than fit, and customize event labels, headers and details.

### Drag-and-drop event editing

Enable creation, moving and resizing where the workflow needs it. Connect event interactions and restrictions to your application's rules and data.

### AI-ready developer tooling

Give coding assistants current, framework-specific Event Calendar API context through Mobiscroll's MCP server, agent skills and AI-readable examples.

## Getting started

Install Mobiscroll and configure the `calendar` view of the Event Calendar component. This starter example displays a month with event labels from your own data. Use it as your first starting point, or open any Event Calendar demo below to inspect and reuse its source code.

Install the Mobiscroll CLI once, then configure the JavaScript package in your project. The CLI sets up access to Mobiscroll's private npm registry and installs the package.

```bash
npm install -g @mobiscroll/cli
mobiscroll config javascript
```

Add a `<div id="calendar"></div>` to the page. In a bundled JavaScript application, import the initializer and stylesheet:

```javascript
import { eventcalendar } from '@mobiscroll/javascript';
import '@mobiscroll/javascript/dist/css/mobiscroll.min.css';

const today = new Date();
const onDay = (day, hour = 9) => new Date(
  today.getFullYear(), today.getMonth(), day, hour
);

const events = [
  { id: 1, title: 'Team planning', start: onDay(5), end: onDay(5, 10) },
  { id: 2, title: 'Customer appointment', start: onDay(12), end: onDay(12, 11) },
  { id: 3, title: 'Training session', start: onDay(19), end: onDay(19, 12) }
];

eventcalendar('#calendar', {
  view: { calendar: { type: 'month', labels: true } },
  selectedDate: today,
  data: events,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true
});
```

For a plain HTML page, include the JavaScript and CSS from a downloaded Mobiscroll package and call `mobiscroll.eventcalendar()` instead. No frontend framework or bundler is required. See the [JavaScript installation guide](https://mobiscroll.com/docs/javascript/getting-started/installation) and [Calendar view documentation](https://mobiscroll.com/docs/javascript/eventcalendar/calendar).

The starter example displays a month with event labels that you can create, move and resize by dragging. For responsive calendar-and-agenda combinations or custom event design, explore a demo below and reuse its tested implementation.

## What you can build with the Event calendar

An event calendar is useful when users need to understand scheduled activities in the context of dates: which days are busy, what events are coming up and where they can act. Build the experience around your data and workflows rather than treating the calendar as a standalone business application.

### Appointment booking & availability

Build appointment and reservation calendars that show bookings on their dates, open a day's details and use visual restrictions for unavailable dates. Combine the calendar with your own availability logic and booking actions ([property reservations](https://demo.mobiscroll.com/eventcalendar/property-booking-calendar), [blocked dates](https://demo.mobiscroll.com/eventcalendar/blocked-days-ranges)).

### Class, lesson & event scheduling

Display lessons, training sessions, community events or venue programs in an easy-to-scan month or week grid. Use event labels, recurring sessions and custom event detail views to help users find the right date ([event labels](https://demo.mobiscroll.com/eventcalendar/event-labels), [recurring events](https://demo.mobiscroll.com/eventcalendar/recurring-events), [event popovers](https://demo.mobiscroll.com/eventcalendar/event-popover)).

### Workforce & shift planning

Provide staff or managers with a calendar of shifts, time off and planned activities. Show a high-level date overview in the Calendar view, then offer a Scheduler time grid or Timeline when they need to compare assignments by resource and time ([week and month views](https://demo.mobiscroll.com/eventcalendar/month-week-view), [switching views](https://demo.mobiscroll.com/eventcalendar/switching-day-week-month-view)).

### Resource & asset planning

Build a date-based overview of room, equipment or other resource bookings. Filter events for a selected resource and open the relevant booking details; switch to a resource-oriented view when users need to compare assets side by side ([resource filtering](https://demo.mobiscroll.com/eventcalendar/resource-filtering-in-header), [daily summaries](https://demo.mobiscroll.com/eventcalendar/day-cell-aggregate-information)).

### Operations & production planning

Show deadlines, maintenance windows, inspections and planned work on the days they occur. Customize event colors and day-cell summaries to distinguish different types of activities; use an application-specific editor for work orders and business rules ([colored calendar cells](https://demo.mobiscroll.com/eventcalendar/colored-cell-background), [custom event labels](https://demo.mobiscroll.com/eventcalendar/customize-label-look-and-feel)).

## Event calendar capabilities

The Calendar view brings together date navigation, event display and editing in a configurable grid. Start with a month or week calendar, then add the event rendering, filters, controls and data connections that fit your application. Scheduler, Timeline and Agenda remain available as other views of the same Event Calendar component.

### Week, month, quarter and year views

Display a compact week, a full month or broader multi-month and annual overviews. Configure the number of visible weeks or months and provide navigation between ranges ([week and month calendar](https://demo.mobiscroll.com/eventcalendar/month-week-view), [quarter and year layouts](https://demo.mobiscroll.com/eventcalendar/quarter-year-view)).

### Event labels and day popovers

Display event labels inside day cells, limit the labels to available space or show all labels with expanding rows. When a day has more events than fit, offer a popover that lists the remaining items ([calendar event labels](https://demo.mobiscroll.com/eventcalendar/event-labels), [label limits and more](https://demo.mobiscroll.com/eventcalendar/show-more-all-labels), [event popovers](https://demo.mobiscroll.com/eventcalendar/event-popover)).

### Recurring, all-day and multi-day events

Represent events with recurrence rules, all-day activities and schedules spanning multiple dates. Add an event editor for recurring series and individual occurrences if your workflow needs it ([event recurrence](https://demo.mobiscroll.com/eventcalendar/recurring-events), [recurring event editor](https://demo.mobiscroll.com/eventcalendar/recurring-event-add-edit-dialog)).

### Drag and drop and event editing

Enable creating, moving, resizing and deleting events where appropriate, and connect those actions to application data. Use a custom edit form for details that the calendar grid alone cannot capture ([drag and drop](https://demo.mobiscroll.com/eventcalendar/move-resize-drag-drop-to-create-events), [add, edit and delete](https://demo.mobiscroll.com/eventcalendar/create-read-update-delete-CRUD)).

### Interaction permissions and blocked dates

Restrict changes for particular events, users or date ranges. Mark unavailable days and apply UI checks for overlaps or past dates, while leaving authoritative validation and concurrent-booking checks to your application ([editing permissions](https://demo.mobiscroll.com/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource), [blocked dates](https://demo.mobiscroll.com/eventcalendar/blocked-days-ranges), [past-date restrictions](https://demo.mobiscroll.com/eventcalendar/disallow-past-event-creation)).

### Custom event labels, cells and headers

Customize the visual content of event labels, day cells, header controls and detail popovers. Highlight dates with colors or show day-level summaries to make the calendar meaningful in your domain ([custom labels](https://demo.mobiscroll.com/eventcalendar/customize-label-look-and-feel), [colored dates](https://demo.mobiscroll.com/eventcalendar/colored-cell-background), [day summaries](https://demo.mobiscroll.com/eventcalendar/day-cell-aggregate-information)).

### Combine calendar, agenda, scheduler and timeline views

Use the Calendar view on its own, place an Agenda beneath it for an event list, or switch to the time-grid Scheduler or resource Timeline for detailed planning. The view configuration lets you reuse the Event Calendar component across different screens ([combining Event Calendar views](https://mobiscroll.com/docs/javascript/eventcalendar/calendar), [switching calendar views](https://demo.mobiscroll.com/eventcalendar/switching-day-week-month-view)).

### Date navigation, search and resource filtering

Navigate between calendar ranges, connect an external date-selection control, add an event-search interface and filter the displayed events by resource. These patterns help users reach a specific event without scrolling through unrelated dates ([date navigation](https://demo.mobiscroll.com/eventcalendar/navigate-from-external-date-picker), [event search](https://demo.mobiscroll.com/eventcalendar/searching-events-in-sidebar), [resource filter](https://demo.mobiscroll.com/eventcalendar/resource-filtering-in-header)).

### Event data from your own APIs

Pass events directly from your application, load them from a remote API or request additional records as the displayed date range changes. Respond to lifecycle callbacks to keep the UI aligned with your data ([inline data](https://demo.mobiscroll.com/eventcalendar/load-inline-data), [remote API](https://demo.mobiscroll.com/eventcalendar/load-events-from-remote-api), [load on demand](https://demo.mobiscroll.com/eventcalendar/load-events-on-demand)).

### Time zones and localization

Display event dates and times in your selected time zone, support localization and use the documented Gregorian, Jalali and Hijri calendar systems where needed ([time-zone configuration](https://demo.mobiscroll.com/eventcalendar/setting-the-timezone), [localized calendar](https://demo.mobiscroll.com/eventcalendar/localization), [calendar systems](https://demo.mobiscroll.com/eventcalendar/gregorian-jalali-hijri)).

### Responsive calendar layouts and touch input

Change the calendar presentation between smaller and larger screens. Use a compact calendar with an event list on mobile and a label-rich month grid on desktop, while keeping touch interaction available ([mobile month view](https://demo.mobiscroll.com/eventcalendar/mobile-month-view), [desktop month view](https://demo.mobiscroll.com/eventcalendar/desktop-month-view), [responsive calendar](https://demo.mobiscroll.com/eventcalendar/responsive-month-view)).

### Accessibility and keyboard support

Mobiscroll provides keyboard navigation, WAI-ARIA labels and screen-reader support and is largely aligned with WCAG 2.2 A and AA. Full AA compliance is not claimed. Provide an accessible alternative to drag-and-drop actions when they are essential, and consult the [Event Calendar accessibility documentation](https://mobiscroll.com/docs/javascript/eventcalendar/accessibility) and [WCAG support details](https://mobiscroll.com/docs/javascript/core-concepts/accessibility).

### Themes, printing and PDF export

Choose an iOS, Material or Windows theme and adapt visual styles to your application. Printing the calendar or exporting a printable document uses the print module where it is included in the applicable license ([printing example](https://demo.mobiscroll.com/eventcalendar/printing-the-view), [printing documentation](https://mobiscroll.com/docs/javascript/eventcalendar/print)).

## AI Tooling

Mobiscroll provides AI Tooling for teams creating event calendars with coding assistants. The hosted MCP server supplies version-aware API information, while agent skills and AI-readable documentation help assistants choose the right Event Calendar views, event data structure and interaction callbacks. The goal is to make implementation more accurate while leaving your application in control of its requirements.

For JavaScript, ask for `view.calendar`, event labels and the correct initializer for a bundled application or a plain HTML page. Example request: "Create a JavaScript event calendar with month labels, recurring classes and a day-details popover. Use the current Mobiscroll JavaScript API and show how to load events from my backend."

See the [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) for MCP server and coding-agent setup. Give the assistant the [Calendar view documentation](https://mobiscroll.com/docs/javascript/eventcalendar/calendar) and an existing demo as implementation context, then test the generated behavior.

## Event calendar demos

Browse working JavaScript Event Calendar examples for month and week views, event labels, drag and drop, recurrence and API loading. Open any demo and use its source as a starting point in a plain JavaScript or bundled application.

For a quick start, see [desktop calendar labels](https://demo.mobiscroll.com/eventcalendar/desktop-month-view), [drag-and-drop editing](https://demo.mobiscroll.com/eventcalendar/move-resize-drag-drop-to-create-events) or [event CRUD](https://demo.mobiscroll.com/eventcalendar/create-read-update-delete-CRUD).

### Setting up the calendar

- [Mobile Month View](https://demo.mobiscroll.com/eventcalendar/mobile-month-view.md) - JavaScript event calendar month view paired with a synchronized agenda — sticky day headers, tap-to-navigate, and mobile-first layout.
- [Desktop Month View](https://demo.mobiscroll.com/eventcalendar/desktop-month-view.md) - Show a full-month JavaScript event calendar for desktop — display event labels, show hidden events in an overflow popover, and expand the grid to fill the container.
- [Responsive Behaviour](https://demo.mobiscroll.com/eventcalendar/responsive-month-view.md) - Build a responsive JavaScript event calendar — switch from week + agenda on mobile to a full month view on desktop using configurable breakpoints.
- [Printing & PDF Export](https://demo.mobiscroll.com/eventcalendar/printing-the-view.md) - Print only the calendar view — not the full page — or export it to PDF with the JavaScript event calendar print add-on.

### Common use cases

- [Property Reservations](https://demo.mobiscroll.com/eventcalendar/property-booking-calendar.md) - Show property reservations in a monthly JavaScript booking calendar — exact check-in/check-out time labels, color-coded by platform.
- [Day Cell Summary View](https://demo.mobiscroll.com/eventcalendar/day-cell-aggregate-information.md) - Show color-coded daily event summaries in the JavaScript event calendar — each cell displays meeting counts and workload density.

### Displaying events

- [Event Labels](https://demo.mobiscroll.com/eventcalendar/event-labels.md) - Show colour-coded event labels inside each day cell of a JavaScript month view event calendar — events that don't fit open in a popover.
- [Event Popover](https://demo.mobiscroll.com/eventcalendar/event-popover.md) - Keep the month grid clean in a JavaScript event calendar — day cells show a dot or event count, and clicking opens a popover listing that day's events.
- [Custom Event Sort Order](https://demo.mobiscroll.com/eventcalendar/custom-event-sort.md) - Control event display order in a JavaScript event calendar — assign per-event priority values or supply a custom function to override the default ordering.
- [Timezone Configuration](https://demo.mobiscroll.com/eventcalendar/setting-the-timezone.md) - Set independent data and display timezones in the JavaScript event calendar — configure event storage format.
- [Multiple Timezones](https://demo.mobiscroll.com/eventcalendar/multiple-timezone-support.md) - Show the same events in multiple timezones in a JavaScript event calendar — add a header dropdown so users can switch their display timezone on the fly.
- [Event Search Popup](https://demo.mobiscroll.com/eventcalendar/searching-events-in-popup.md) - Search events in real time from the JavaScript event calendar header — results appear in an agenda-style popup as you type, grouped by date.
- [Search Events in Sidebar](https://demo.mobiscroll.com/eventcalendar/searching-events-in-sidebar.md) - Add real-time event search to a JavaScript event calendar — display filtered results in a sidebar panel, grouped by date, with click-to-navigate.

### Configuring the view

- [Week and Month View](https://demo.mobiscroll.com/eventcalendar/month-week-view.md) - Display events in a JavaScript calendar with switchable week and month views — choose 1, 2, or 3 weeks and set a locale-aware or fixed week start day.
- [Quarter and Year View](https://demo.mobiscroll.com/eventcalendar/quarter-year-view.md) - Show three months or a full year in the JavaScript event calendar — switch between quarter and year views to give users a planning-scale event overview.
- [Show All or Limit Event Labels](https://demo.mobiscroll.com/eventcalendar/show-more-all-labels.md) - Show all event labels with dynamic row heights or limit labels per day in a JavaScript month-view calendar — hidden events appear in a "show more" popover.
- [Colored Cell Backgrounds](https://demo.mobiscroll.com/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a JavaScript event calendar — mark exact or recurring dates or date ranges as visual highlights for holidays and special days.
- [Switch Day, Week and Month Views](https://demo.mobiscroll.com/eventcalendar/switching-day-week-month-view.md) - Switch a JavaScript event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list.
- [External Date Picker Navigation](https://demo.mobiscroll.com/eventcalendar/navigate-from-external-date-picker.md) - Use a JavaScript event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.

### Templating

- [Custom Label Styling](https://demo.mobiscroll.com/eventcalendar/customize-label-look-and-feel.md) - Fully customize event labels in the JavaScript event calendar — set colors, show timed-event dots, and include custom fields beyond the event title.
- [Custom Event Popover](https://demo.mobiscroll.com/eventcalendar/customize-event-popover.md) - Customize how events appear in the day popover of a JavaScript event calendar — use full custom layouts or add fields like assignee, location, and participants.
- [Custom Header](https://demo.mobiscroll.com/eventcalendar/customizing-header.md) - Customize the JavaScript event calendar header — rearrange navigation controls, toggle calendar/scheduler views or add any custom action.
- [Custom Event Tooltip](https://demo.mobiscroll.com/eventcalendar/custom-event-tooltip.md) - Add custom hover tooltips to a JavaScript event calendar — show appointment details, status, location, and confirm or delete actions to each event.
- [Add Event on Hover](https://demo.mobiscroll.com/eventcalendar/cell-template-on-hover.md) - Show an "Add event" button on day cell hover in a JavaScript event calendar — reveal event creation without cluttering the calendar interface.

### Drag & drop

- [Drag, Move & Resize](https://demo.mobiscroll.com/eventcalendar/move-resize-drag-drop-to-create-events.md) - Enable or disable move, resize, drag-to-create, and click-to-create independently per event or globally in the JavaScript event calendar.
- [Drag and Drop Permissions](https://demo.mobiscroll.com/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Set move and resize permissions per event or globally in the JavaScript event calendar — lock events in time, prevent resizing, or mix rules.
- [Drag and Drop Between Calendars](https://demo.mobiscroll.com/eventcalendar/drag-drop-between-calendar-instances.md) - Drag and drop events between two side-by-side JavaScript event calendar in month view — move events across separate calendars with cross-calendar drag and drop.
- [Blocked Days and Date Ranges](https://demo.mobiscroll.com/eventcalendar/blocked-days-ranges.md) - Disable weekends and date ranges in a JavaScript event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes.
- [Double Booking Prevention](https://demo.mobiscroll.com/eventcalendar/prevent-double-booking-events.md) - Prevent overlapping events in a JavaScript event calendar — block double bookings per event or across all events with in-calendar conflict alerts.
- [Drag-and-Drop Task Presets](https://demo.mobiscroll.com/eventcalendar/external-event-presets.md) - Drag preset task templates from an external list onto a JavaScript event calendar — a popup form captures task details and technician at drop time.
- [Drag and Drop from External Lists](https://demo.mobiscroll.com/eventcalendar/external-drag-drop-sortable-dragula.md) - Drag items from external SortableJS or Dragula lists onto a JavaScript event calendar to schedule events — or drag them out to unschedule.

### Resources

- [Resource Filter in Header](https://demo.mobiscroll.com/eventcalendar/resource-filtering-in-header.md) - Filter events by resource in the JavaScript event calendar using a segmented control in the header — switch people or resources without a filter panel.

### Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/eventcalendar/event-data-structure.md) - Define event objects in a JavaScript event calendar — set title, start, end, color, recurring rules, per-event drag and resize, and custom fields.
- [Date Format Inputs](https://demo.mobiscroll.com/eventcalendar/date-object-ISO-8601-moment.md) - Pass JavaScript Date objects, ISO strings, or Moment.js dates to a JavaScript event calendar — see all three supported input formats for event data.
- [Recurring Events](https://demo.mobiscroll.com/eventcalendar/recurring-events.md) - Set up daily, weekly, monthly, and yearly recurring events in a JavaScript event calendar — configure repeat patterns, stop conditions, and date exclusions.

### Loading events & data sources

- [Inline Events](https://demo.mobiscroll.com/eventcalendar/load-inline-data.md) - Populate a JavaScript event calendar with events using an inline data array — month view with event labels and overflow popover.
- [Load Events from API](https://demo.mobiscroll.com/eventcalendar/load-events-from-remote-api.md) - Load events into a JavaScript event calendar from a remote API — pass event data in the correct format to populate the calendar view.
- [Load Events on Demand](https://demo.mobiscroll.com/eventcalendar/load-events-on-demand.md) - Fetch JavaScript event calendar events in real time as users navigate — load only the data needed for the visible range for better performance.

### Third party calendar integrations

- [Google Calendar Sync](https://demo.mobiscroll.com/eventcalendar/sync-events-google-calendar.md) - Connect Google Calendar to a JavaScript event calendar — authenticate users, load events, and sync create, edit, and delete actions to Google Calendar.
- [Outlook Integration](https://demo.mobiscroll.com/eventcalendar/sync-events-outlook-calendar.md) - Connect the JavaScript event calendar to Outlook via plugin — sign in users, load calendars, and add, edit, or delete events with optional write-back.
- [Public Google Calendar Integration](https://demo.mobiscroll.com/eventcalendar/load-events-from-google-calendar.md) - Load events from a public Google Calendar into a JavaScript event calendar using the integration plugin — provide your Calendar ID and API key.

### CRUD operations

- [Add, Edit and Delete Events](https://demo.mobiscroll.com/eventcalendar/create-read-update-delete-CRUD.md) - Add full event management to a JavaScript event calendar — create events by drag or click, edit them in a custom dialog, and delete with undo.
- [Recurring Events Editor](https://demo.mobiscroll.com/eventcalendar/recurring-event-add-edit-dialog.md) - Add recurring event management to a JavaScript event calendar — use preset daily, weekly, monthly, and yearly rules or a custom recurrence editor.
- [Block Past Event Creation](https://demo.mobiscroll.com/eventcalendar/disallow-past-event-creation.md) - Keep past dates read-only in a JavaScript event calendar — block creation and editing on past days and show toast feedback on failed attempts.
- [Bulk Actions](https://demo.mobiscroll.com/eventcalendar/event-bulk-actions-edit-delete-update.md) - Multi-select events by keyboard in a JavaScript calendar - bulk delete, update, or run custom actions via action panel or right-click context menu.
- [Cut, Copy, Paste Events](https://demo.mobiscroll.com/eventcalendar/cut-copy-paste-events-between-calendars.md) - Transfer events between two JavaScript event calendars with cut, copy, paste, and undo — using keyboard shortcuts or a right-click menu.

### Customizing the look & feel

- [Themes and Dark Mode](https://demo.mobiscroll.com/eventcalendar/themes-ios-material-windows.md) - Apply iOS, Material, or Windows themes to a JavaScript event calendar — toggle light/dark mode or build a custom brand theme with the theme builder.

### Localization & tapping into the lifecycle

- [Localization](https://demo.mobiscroll.com/eventcalendar/localization.md) - Localize a JavaScript event calendar — switch locales to update date and time formats, button labels, and RTL layout. All settings overridable.
- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/eventcalendar/gregorian-jalali-hijri.md) - Show events in Gregorian, Jalali, or Hijri with the JavaScript event calendar — switch calendar systems to support Persian, Farsi and Arabic.
- [Event Hooks](https://demo.mobiscroll.com/eventcalendar/event-hooks.md) - See which lifecycle hooks the JavaScript event calendar fires on create, drag, hover, and click — interactions are tracked in a live event log.

## Your data and external calendars

The Event Calendar works with event records supplied by your own application, whether they come from inline data or a backend API. You can use every calendar view without connecting external calendars.

**Need to connect your users' calendars?** [Mobiscroll Connect](https://mobiscroll.com/connect) is a separate calendar connectivity product for Google Calendar, Outlook, Apple Calendar and CalDAV, with account connection, normalized data and synchronization. **Mobiscroll Connect is sold separately** and is not required for Event Calendar.

## Frequently asked questions

### What is an event calendar component?

An event calendar displays scheduled items on dates in a calendar grid, typically in week or month layouts. Mobiscroll's Calendar view supports event labels, day popovers, recurrence, custom rendering and event editing inside an application.

### Is Event Calendar the same thing as Scheduler, Timeline and Agenda?

They are views of the same Mobiscroll Event Calendar component, but they present information differently. Calendar is the date grid; Scheduler is a vertical time grid; Timeline is a horizontal time axis with resources as rows; Agenda is a chronological event list. Choose the view that fits the task, or combine them ([Event Calendar overview](https://mobiscroll.com/docs/javascript/eventcalendar/overview)).

### How is an event calendar different from a date-selection input?

An event calendar displays and manages scheduled events, while a date-selection input lets people choose dates or times in a form. Mobiscroll provides both types of component for different application tasks.

### Can I build a month calendar with event labels?

Yes. Configure `view.calendar` with `type: 'month'` and `labels: true` to display events directly in day cells. Overflowing labels can open a day popover ([labels example](https://demo.mobiscroll.com/eventcalendar/event-labels), [more-label behavior](https://demo.mobiscroll.com/eventcalendar/show-more-all-labels)).

### Can users create and edit events by dragging them?

Yes. Enable drag creation, moving and resizing as appropriate and handle edits using your application's data and validation ([drag and drop example](https://demo.mobiscroll.com/eventcalendar/move-resize-drag-drop-to-create-events)).

### Does it support recurring and multi-day events?

Yes. Event Calendar supports recurring events, all-day events and events spanning dates, with patterns for editing series and occurrences ([recurring events example](https://demo.mobiscroll.com/eventcalendar/recurring-events)).

### Can I show an agenda beneath a month or week calendar?

Yes. Calendar and Agenda are views of the same Event Calendar component and can be combined so date selection controls the event list ([combined views](https://mobiscroll.com/docs/javascript/eventcalendar/calendar)).

### Can I use my existing event API and database?

Yes. Supply data from your API to the component, load events as the displayed range changes and use callbacks to send edits back to your application ([on-demand event loading](https://demo.mobiscroll.com/eventcalendar/load-events-on-demand)).

### Does it include a booking backend or prevent double bookings across all users?

No. Event Calendar supplies configurable event views and UI restrictions. Your application is responsible for data storage, permissions and authoritative rules for concurrent bookings.

### Is Event Calendar accessible?

Mobiscroll supports keyboard navigation and screen readers and is largely aligned with WCAG 2.2 A and AA, but not yet fully AA compliant. Your application must also provide accessible alternatives for essential drag-and-drop actions; see [accessibility support details](https://mobiscroll.com/docs/javascript/core-concepts/accessibility).

### Is Mobiscroll Event Calendar free or open source?

No. It is commercially licensed, with a free trial for evaluation. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing).

### Can I install it from the public npm registry?

No. Mobiscroll's framework packages are distributed through a private registry. The public CLI configures the registry and installs the package; see the Getting started instructions above.

### Can AI coding assistants generate Event Calendar code?

Yes. The [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) describes Mobiscroll's version-aware MCP server, agent skills and AI-readable references. Always validate generated implementations against the app's requirements.

### Do I need Mobiscroll Connect to use Event Calendar?

No. Mobiscroll Connect is separately sold and optional for integrating users' external calendar accounts; Event Calendar can work entirely with your own event data.

### Can Event Calendar be licensed for a SaaS product?

Yes. Calendaring for SaaS is offered for software delivered to multiple customers, separately from licenses for internal projects (see [pricing](https://mobiscroll.com/pricing)).

### Can I use it without a frontend framework or bundler?

Yes. Include a downloaded Mobiscroll JavaScript and CSS package on an HTML page and initialize the Calendar view with `mobiscroll.eventcalendar()` ([JavaScript installation guide](https://mobiscroll.com/docs/javascript/getting-started/installation)).

## Licensing

Event Calendar is part of Mobiscroll UI. Choose an internal-project license for applications used within your organization or Calendaring for SaaS for software delivered to multiple customers. Optional modules, including printing, depend on the license. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing).

## Ready to build your event calendar?

Start with a working calendar example, install Mobiscroll for your framework and customize the views, event labels and interactions for your application's users. Explore the demo gallery or use the [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) to help an AI coding assistant adapt a verified example.

## Built for JavaScript

A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.

- **Installation:** CLI and npm for bundled apps, or a downloaded JavaScript/CSS package on a plain HTML page.
- **ESM support:** a module bundle is available ([ESM bundle guide](https://mobiscroll.com/docs/javascript/core-concepts/esm-bundle)).
- **TypeScript:** type definitions ship with the package ([TypeScript guide](https://mobiscroll.com/docs/javascript/guides/typescript)).

## Using a framework?

- [jQuery Event calendar](https://demo.mobiscroll.com/jquery/eventcalendar.md) - Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.
- [Angular Event calendar](https://demo.mobiscroll.com/angular/eventcalendar.md) - Native Angular components, not wrappers, that use Angular's own rendering and change detection.
- [React Event calendar](https://demo.mobiscroll.com/react/eventcalendar.md) - Native React components, not wrappers, built on React's virtual DOM and state management.
- [Vue Event calendar](https://demo.mobiscroll.com/vue/eventcalendar.md) - Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.