---
title: "JavaScript Scheduler Component for Resource & Shift Scheduling | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/scheduler"
---

# JavaScript Scheduler Component for Resource Planning

Build resource scheduling interfaces in plain JavaScript — time-grid views by day, week, and month with drag-and-drop. Last update: Oct 30, 2026

Build interactive scheduling interfaces for appointments, shifts, jobs and shared resources. Configure the time grid, resource columns and drag-and-drop behavior around your application's workflows and data.

Use it in plain JavaScript websites or bundled applications without adopting a frontend framework.

## Overview

The Mobiscroll Scheduler displays events against a vertical scale of hours, optionally grouped into resource columns. It is configured through the Mobiscroll `Eventcalendar` API and supports daily, weekly and monthly layouts. Use its UI building blocks to create the scheduling experience your application needs, rather than adopting a predefined scheduling workflow.

## Scheduler highlights

### Configurable scheduling views

Choose the days, hours and time intervals that make sense for your users. Combine a Scheduler with a month calendar or an agenda when the workflow needs another perspective.

### Multiple resources per event

Schedule people, rooms or equipment side by side. Assign one event to several resources and keep it connected to the same underlying event data.

### Control over interactions

Enable event creation, moving and resizing where they belong in your workflow. Set restrictions by event or resource and connect interactions to your application's rules.

### AI-ready developer tooling

Use the Mobiscroll MCP server, coding-agent skills and AI-readable documentation to give AI coding assistants accurate Scheduler API context for your framework.

## Getting started

Add Mobiscroll to your project, then configure the Scheduler view of Mobiscroll's `Eventcalendar` component. The example below shows a weekly schedule with resource columns and events. Copy the code into a project with Mobiscroll installed, or start from any working demo in the gallery below.

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="scheduler"></div>` to your page. In a bundled JavaScript application, import the Scheduler initializer and styles:

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

const today = new Date();
const at = (hour) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), hour);

eventcalendar('#scheduler', {
  view: { scheduler: { type: 'week', startTime: '08:00', endTime: '18:00' } },
  resources: [{ id: 1, name: 'Alex' }, { id: 2, name: 'Jordan' }],
  data: [
    { id: 1, title: 'Site visit', start: at(10), end: at(11), resource: 1 },
    { id: 2, title: 'Team meeting', start: at(13), end: at(14), resource: [1, 2] }
  ],
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true
});
```

For a plain HTML page, no CLI or bundler is required: include the downloaded JavaScript and CSS files, then call `mobiscroll.eventcalendar()` from a script instead of importing `eventcalendar`. See the [JavaScript installation guide](https://mobiscroll.com/docs/javascript/getting-started/installation) and [Scheduler documentation](https://mobiscroll.com/docs/javascript/eventcalendar/scheduler).

If you want a different starting point, explore the Scheduler demos below. Open any example to inspect its implementation and use it as the basis for your own project.

## What you can build with the Scheduler

The Scheduler is a UI toolset for building appointment booking, workforce scheduling, dispatch and resource planning experiences. Start with the interactions your users need, then combine resource views, event editing, constraints and custom content to match your application's workflow.

### Appointment booking & availability

Build appointment schedulers with providers, services or rooms as resources. Show available and blocked times, place appointments on the time grid and configure rules that prevent overlapping bookings in the interface ([appointment scheduling](https://demo.mobiscroll.com/scheduler/doctors-appointment), [provider availability](https://demo.mobiscroll.com/scheduler/doctors-availability-calendar-planner), [overlap restrictions](https://demo.mobiscroll.com/scheduler/prevent-double-booking-events)). Useful for healthcare, care services and other booking products.

### Workforce & shift planning

Build shift planners and staff rosters with employees or teams as resources. Display overnight shifts, time off and breaks, and let planners adjust assignments directly on the schedule ([24-hour shift planning](https://demo.mobiscroll.com/scheduler/24-hour-manufacturing-shift-rota-planning), [blocked time and breaks](https://demo.mobiscroll.com/scheduler/time-off-blocked-ranges)). Useful for workforce platforms and operational planning applications.

### Job scheduling & dispatch

Build a dispatch board for jobs, work orders, technicians or equipment. Drag unscheduled work into the time grid, assign resources to existing events and show travel or preparation buffers ([unscheduled tasks](https://demo.mobiscroll.com/scheduler/external-event-presets), [resource assignments](https://demo.mobiscroll.com/scheduler/drop-assignee-on-event-from-list), [event buffers](https://demo.mobiscroll.com/scheduler/event-buffer)). Useful for field service, maintenance and inspection software.

### Resource & asset planning

Build reservation and allocation views for meeting rooms, equipment, facilities or other shared assets. Display resources side by side, group by date or resource, and let users filter which resources are visible ([resource columns](https://demo.mobiscroll.com/scheduler/resource-view), [resource grouping](https://demo.mobiscroll.com/scheduler/group-by-resource-by-day), [resource filtering](https://demo.mobiscroll.com/scheduler/dynamic-add-remove-resources-filter)). Useful for resource booking and facilities applications.

### Class, lesson & event scheduling

Build schedules for classes, training sessions or other recurring activities. Assign the same event to multiple resources, such as an instructor and an aircraft, and manage recurring sessions ([shared resource events](https://demo.mobiscroll.com/scheduler/shared-events-across-resources), [recurring sessions](https://demo.mobiscroll.com/scheduler/recurring-events)). Useful for education, training and recreation products.

## Scheduler capabilities

Configure what the schedule shows, how users interact with events and resources, and how the component connects to your data. The Scheduler provides reusable interface capabilities while leaving room for the application-specific workflows and rules that make your product distinct.

### Day, week and month scheduling views

Display a daily, weekly or monthly time grid, or show a custom span of days or weeks ([multiple days and weeks](https://demo.mobiscroll.com/scheduler/display-multiple-days-weeks), [custom date range](https://demo.mobiscroll.com/scheduler/custom-range-view)). Configure working days, visible hours, time intervals and labels to fit a shift planner, appointment calendar or dispatch board ([visible days and hours](https://demo.mobiscroll.com/scheduler/show-hide-hours-days), [workweek hours](https://demo.mobiscroll.com/scheduler/work-week-hours)).

### Calendar combinations and navigation

Combine the Scheduler with a month calendar in the same `Eventcalendar` instance, or use an adjacent calendar to navigate the schedule ([combined calendar and Scheduler views](https://mobiscroll.com/docs/javascript/eventcalendar/scheduler#view-combination), [navigation from another calendar](https://demo.mobiscroll.com/scheduler/navigate-view-from-external-calendar)). Switch among calendar, scheduler and agenda layouts or add an event-search sidebar ([switching views](https://demo.mobiscroll.com/scheduler/switching-calendar-scheduler-agenda), [searching events](https://demo.mobiscroll.com/scheduler/searching-events-in-sidebar)).

### Resources and shared events

Display people, rooms and equipment as resource columns, grouped by resource or by date ([resource scheduling](https://demo.mobiscroll.com/scheduler/resource-view), [grouping options](https://demo.mobiscroll.com/scheduler/group-by-resource-by-day)). A single event can appear under several assigned resources while still representing one event in your data. Resources can also be added, removed and filtered as the application runs ([events shared across resources](https://demo.mobiscroll.com/scheduler/shared-events-across-resources), [dynamic resource filtering](https://demo.mobiscroll.com/scheduler/dynamic-add-remove-resources-filter)).

### Drag and drop and event editing

Create events from the time grid, move them to another time or resource, and resize their duration by dragging ([create and edit events](https://demo.mobiscroll.com/scheduler/move-resize-drag-drop-to-create-events)). Control whether moving or resizing is allowed for an event or resource, and bring work into the schedule from a list outside it ([conditional interaction rules](https://demo.mobiscroll.com/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource), [external drag and drop](https://demo.mobiscroll.com/scheduler/external-event-presets)).

### Blocked times and scheduling restrictions

Mark weekends, unavailable hours, breaks and other blocked ranges. Configure restrictions for overlapping events or scheduling in the past, and show time buffers before or after a booking ([blocked times](https://demo.mobiscroll.com/scheduler/time-off-blocked-ranges), [prevent overlapping events](https://demo.mobiscroll.com/scheduler/prevent-double-booking-events), [past-event restrictions](https://demo.mobiscroll.com/scheduler/disallow-past-event-creation), [buffers](https://demo.mobiscroll.com/scheduler/event-buffer)). Your application can also use event callbacks to apply its own validation when changes are saved.

### Recurring events and exceptions

Show events that repeat daily, weekly, monthly or yearly, including moved or removed occurrences ([recurring events](https://demo.mobiscroll.com/scheduler/recurring-events)). Build recurrence editing into your event forms when users need to change a whole series or an individual occurrence ([recurrence editing](https://demo.mobiscroll.com/scheduler/recurring-event-add-edit-dialog)).

### Custom event and resource rendering

Use templates to show the details your users need inside events and resource headers, such as names, statuses or additional metadata ([custom event content](https://demo.mobiscroll.com/scheduler/customizing-events), [resource header templates](https://demo.mobiscroll.com/scheduler/custom-resource-header-template)). This lets you adapt the schedule to your application's domain without replacing the underlying time-grid interactions.

### Load events from your own APIs

Pass event data directly, load it from a remote API, or fetch the visible range on demand as users navigate and scroll ([inline event data](https://demo.mobiscroll.com/scheduler/load-inline-data), [remote API data](https://demo.mobiscroll.com/scheduler/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/scheduler/load-events-on-demand), [loading during scroll](https://demo.mobiscroll.com/scheduler/load-events-on-scroll)). Virtualized rendering supports schedules with large data sets and many resources ([large scheduling data sets](https://demo.mobiscroll.com/scheduler/loading-big-data-sets)).

### Time zones and localization

Display events in a selected time zone or show several time zones beside the time grid using the supported time zone plugins ([time zone configuration](https://demo.mobiscroll.com/scheduler/setting-the-timezone), [multiple displayed time zones](https://demo.mobiscroll.com/scheduler/show-multiple-timezones)). Configure localized date formats and labels, right-to-left layouts, and Gregorian, Jalali or Hijri calendars ([localization](https://demo.mobiscroll.com/scheduler/localization), [calendar systems](https://demo.mobiscroll.com/scheduler/gregorian-jalali-hijri)).

### Responsive layout and touch interaction

Adapt the view to available space, for example by showing a day schedule on a phone and a week schedule on desktop ([responsive scheduler](https://demo.mobiscroll.com/scheduler/responsive-day-week-schedule), [mobile day view](https://demo.mobiscroll.com/scheduler/mobile-day-view), [desktop week view](https://demo.mobiscroll.com/scheduler/desktop-week-view)). The Scheduler supports touch interactions as well as desktop mouse interaction.

### Accessibility and keyboard support

Keyboard users can navigate to events and controls, while WAI-ARIA roles and labels provide information to assistive technology ([Scheduler keyboard accessibility](https://mobiscroll.com/docs/javascript/eventcalendar/accessibility)). Mobiscroll documents its level of support for WCAG 2.2 A and AA criteria; see the [accessibility documentation](https://mobiscroll.com/docs/javascript/core-concepts/accessibility) for qualifications and application-level considerations.

### Themes and printing

Choose iOS, Material or Windows styling with light and dark themes ([built-in themes](https://demo.mobiscroll.com/scheduler/themes-ios-material-windows)). Print the current scheduling view using the print module, available according to your license ([printing the schedule](https://demo.mobiscroll.com/scheduler/printing-the-view)).

## AI Tooling

Mobiscroll provides AI Tooling for developers who use coding assistants to build scheduling interfaces. It includes a hosted MCP server with version-specific API information, framework-aware coding guidance, and machine-readable documentation and examples. This gives an assistant a reliable place to check Scheduler options and event APIs as you adapt a working example to your application.

In plain JavaScript projects, use the JavaScript-specific AI guidance to generate `mobiscroll.eventcalendar()` initialization, resource data, callbacks and Scheduler view configuration without introducing a frontend framework. A useful starting request is: "Build a JavaScript Scheduler with technicians as resources and jobs that can move between them. Use Mobiscroll's current API and show where my data API connects."

Claude Code and Codex can use the Mobiscroll plugin with its UI skills and bundled MCP connection. Cursor and GitHub Copilot use framework-specific instruction files and can optionally connect to the same MCP server for live API lookups. The [AI Tooling setup guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) explains the supported setup for each assistant.

Mobiscroll also publishes AI-readable documentation and Markdown versions of Scheduler demos with their code and implementation details. They give developers and AI tools source material for understanding and adapting examples; they do not replace testing your application's behavior.

## Scheduler demos

Explore working JavaScript Scheduler demos covering resource planning, drag and drop, recurring events, time-grid layouts, custom rendering and data integration.

Each example shows a specific implementation pattern and includes source code you can inspect. Start with the demo closest to your use case, then adapt its resources, events and interaction settings. The gallery below contains the complete set of Scheduler examples for this framework.

### Setting up the scheduler

- [Mobile Day View](https://demo.mobiscroll.com/scheduler/mobile-day-view.md) - View daily schedules in a mobile layout using the JavaScript Scheduler — fixed week strip, all-day event row, and a scrollable hourly time grid.
- [Daily View](https://demo.mobiscroll.com/scheduler/desktop-day-view.md) - Build a daily scheduler with the JavaScript Scheduler — all-day events pinned above a scrollable hourly time grid.
- [Week View on Mobile](https://demo.mobiscroll.com/scheduler/mobile-week-view.md) - Show a full week on mobile with the JavaScript Scheduler — fixed header, scrollable time grid, all-day and timed events.
- [Week View](https://demo.mobiscroll.com/scheduler/desktop-week-view.md) - Show a full week in the JavaScript Scheduler with a fixed header, scrollable time grid, current-time indicator, and draggable, resizable events.
- [Responsive Screen Adaptation](https://demo.mobiscroll.com/scheduler/responsive-day-week-schedule.md) - Configure the JavaScript Scheduler to adapt any screen size — daily view on small screens, weekly on large — with predefined and custom breakpoints.
- [Custom Column Widths](https://demo.mobiscroll.com/scheduler/customize-scheduler-column-width.md) - Control column widths in a JavaScript Scheduler — set fixed or dynamic widths for resource columns or day columns to fit your layout.
- [Print and PDF Export](https://demo.mobiscroll.com/scheduler/printing-the-view.md) - Add print support to the JavaScript Scheduler — use the print add-on to print the scheduler view or export to PDF via the browser print dialog.

### Common use cases

- [Work Week](https://demo.mobiscroll.com/scheduler/work-week-hours.md) - Configure the JavaScript Scheduler with a Monday–Friday work-week layout, set business-hours, hide off-hours, and block lunch breaks.
- [Appointment Scheduling](https://demo.mobiscroll.com/scheduler/doctors-appointment.md) - Build a JavaScript appointment scheduler — assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking.
- [Doctors Availability](https://demo.mobiscroll.com/scheduler/doctors-availability-calendar-planner.md) - Show per-doctor availability in the JavaScript Scheduler — color-coded tracks mark open appointment slots, with each doctor's working hours.
- [Rota Planning](https://demo.mobiscroll.com/scheduler/24-hour-manufacturing-shift-rota-planning.md) - Build a 24-hour rotating crew rota with the JavaScript Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.
- [Drop Assignee on Event](https://demo.mobiscroll.com/scheduler/drop-assignee-on-event-from-list.md) - Drag team members from an external list onto existing meetings in the JavaScript Scheduler — with drop feedback and conflict validation.

### Configuring the view

- [Custom Range View](https://demo.mobiscroll.com/scheduler/custom-range-view.md) - Configure the JavaScript Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day.
- [Limit Overlapping Events](https://demo.mobiscroll.com/scheduler/control-number-of-concurrently-shown-events.md) - Set a max count or auto-fit overlapping events to available space in the JavaScript Scheduler — useful for appointment-heavy views.
- [Custom Date Range View](https://demo.mobiscroll.com/scheduler/display-multiple-days-weeks.md) - Configure the JavaScript Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging.
- [Hide All-Day Section](https://demo.mobiscroll.com/scheduler/disable-all-day-events.md) - Hide the all-day row in the JavaScript Scheduler to show only timed events — ideal for appointment booking, service scheduling, or shift-based views.
- [Color-Coded Time Blocks](https://demo.mobiscroll.com/scheduler/colored-cell-background.md) - Color JavaScript Scheduler cell backgrounds for time ranges — mark lunch breaks, maintenance windows, or recurring schedules.
- [Dynamic View Switching](https://demo.mobiscroll.com/scheduler/switching-calendar-scheduler-agenda.md) - Switch between year, month, week, day, and agenda views in the JavaScript event calendar — via header control or programmatically.
- [Visible hours and days](https://demo.mobiscroll.com/scheduler/show-hide-hours-days.md) - Keep your calendar focused. Trim your view. In JavaScript, you can show only weekdays and business hours, making schedules cleaner and faster.
- [Multi-Timezone Configuration](https://demo.mobiscroll.com/scheduler/setting-the-timezone.md) - Set separate data and display timezones in the JavaScript Scheduler — let users switch visible timezones without changing event data.
- [Event Buffer](https://demo.mobiscroll.com/scheduler/event-buffer.md) - Add buffer time before or after events in the JavaScript Scheduler to visualize travel time, check-in/check-out, loading, or cleanup in the schedule grid.
- [Multiple Timezone Support](https://demo.mobiscroll.com/scheduler/multiple-timezone-support.md) - Show the same events in different timezones in the JavaScript Scheduler — add a header dropdown to let users switch the display timezone at runtime.
- [Custom Event Order](https://demo.mobiscroll.com/scheduler/custom-event-sort.md) - Control the event display order in a JavaScript Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.
- [Multi-Timezone](https://demo.mobiscroll.com/scheduler/show-multiple-timezones.md) - Show multiple timezone panels side by side in the JavaScript Scheduler — set custom labels per track and compare event times across regions.
- [Event Search Sidebar](https://demo.mobiscroll.com/scheduler/searching-events-in-sidebar.md) - Add a real-time event search sidebar to the JavaScript Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.
- [External Navigation](https://demo.mobiscroll.com/scheduler/navigate-view-from-external-calendar.md) - Use a two-pane layout to sync a date picker and JavaScript Scheduler — selecting a date navigates the scheduler automatically.

### Templating

- [Custom Event Tooltip](https://demo.mobiscroll.com/scheduler/custom-event-tooltip.md) - Show native, custom, or third-party tooltips on JavaScript Scheduler event hover — with appointment details and inline actions.
- [Event Rendering](https://demo.mobiscroll.com/scheduler/customizing-events.md) - Render custom event cards in the JavaScript Scheduler — add color stripes, labels, avatars, action buttons, and travel-time buffers.
- [Custom Date Header](https://demo.mobiscroll.com/scheduler/date-header-template.md) - Customize the date headers of the JavaScript Scheduler — add custom layouts, labels, and milestone badges to day columns.
- [Resource Headers](https://demo.mobiscroll.com/scheduler/custom-resource-header-template.md) - Build a JavaScript resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance.
- [Cell Content Template](https://demo.mobiscroll.com/scheduler/cell-content-template.md) - Add custom content to JavaScript Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data.
- [Custom Header](https://demo.mobiscroll.com/scheduler/customizing-header.md) - Arrange navigation controls and add a scheduler/calendar view-switcher in a custom JavaScript Scheduler header.

### Drag & drop

- [Drag, Resize and Create Events](https://demo.mobiscroll.com/scheduler/move-resize-drag-drop-to-create-events.md) - Control drag-to-create, move, resize, and delete independently in the JavaScript Scheduler — set snap interval and mark events as read-only.
- [Drag, Resize & Move Restrictions](https://demo.mobiscroll.com/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, resize, and moves per event, per resource, or globally in the JavaScript Scheduler — fix event length, lock time, or block cross-resource moves.
- [Instance Event Transfer](https://demo.mobiscroll.com/scheduler/drag-drop-between-calendar-instances.md) - Drag and drop events between two JavaScript Scheduler instances — reassign appointments, tasks, or shifts across separate weekly views.
- [Blocked Time Ranges](https://demo.mobiscroll.com/scheduler/time-off-blocked-ranges.md) - Block weekends, holidays, and lunch breaks in the JavaScript Scheduler using recurring unavailable ranges — choose strict or start-end validation.
- [Prevent Double Booking](https://demo.mobiscroll.com/scheduler/prevent-double-booking-events.md) - Use the JavaScript Scheduler to block event overlaps per event, per resource, or globally — with toast notifications when a conflict is blocked.
- [External Drag and Drop](https://demo.mobiscroll.com/scheduler/external-drag-drop-sortable-dragula.md) - Schedule events by dragging from Mobiscroll, SortableJS or Dragula lists onto the JavaScript Scheduler, and unschedule them by dragging out.
- [External Task Presets](https://demo.mobiscroll.com/scheduler/external-event-presets.md) - Drag task templates from an external list onto the JavaScript Scheduler — schedule, assign a technician in a popup, and block drops on restricted slots.

### Resources

- [Multi-Resource View](https://demo.mobiscroll.com/scheduler/resource-view.md) - Show multiple resources — people, rooms, or equipment — side by side in a JavaScript Scheduler weekly view.
- [Group by Resource or Date](https://demo.mobiscroll.com/scheduler/group-by-resource-by-day.md) - Group resources or days as the primary view in the JavaScript Scheduler and toggle between layouts using the built-in segmented control.
- [Multi-Resource Shared Events](https://demo.mobiscroll.com/scheduler/shared-events-across-resources.md) - Schedule event across multiple resources in the JavaScript Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.
- [Dynamic Resource Filtering](https://demo.mobiscroll.com/scheduler/dynamic-add-remove-resources-filter.md) - Show or hide resources in a JavaScript Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data.
- [Dynamic Resource Widths](https://demo.mobiscroll.com/scheduler/dynamic-content-based-resource-width.md) - Control individual resource column widths in the JavaScript Scheduler by assigning CSS classes based on each column's header content.
- [Multi-Resource Configuration](https://demo.mobiscroll.com/scheduler/resource-data-structure.md) - Configure multiple resources in a JavaScript Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.
- [Hide Resources](https://demo.mobiscroll.com/scheduler/hide-non-working-resources.md) - Show only available staff in a JavaScript Scheduler — hide resource columns for days when staff are off, with support for recurring.

### Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/scheduler/event-data-structure.md) - Define event data in the JavaScript Scheduler — set base fields, recurring rules, resource links, drag/resize controls, and buffer times.
- [Date Formats](https://demo.mobiscroll.com/scheduler/date-object-ISO-8601-moment.md) - Pass JS date objects, ISO strings, or Moment.js objects into the JavaScript Scheduler for events, marked dates, colors, and labels.
- [Recurring Events](https://demo.mobiscroll.com/scheduler/recurring-events.md) - Add recurring events to the JavaScript Scheduler — configure daily, weekly, monthly, or yearly rules with RRULE string support.

### Loading events & data sources

- [Inline Data](https://demo.mobiscroll.com/scheduler/load-inline-data.md) - Pass a static event array to the JavaScript Scheduler to see how event data is structured — before connecting a live or on-demand data source.
- [Load Events from Remote API](https://demo.mobiscroll.com/scheduler/load-events-from-remote-api.md) - Populate a JavaScript Scheduler from a remote API — fetch from your backend or third-party source and pass data in the format the scheduler expects.
- [Load Events on Demand](https://demo.mobiscroll.com/scheduler/load-events-on-demand.md) - Load JavaScript scheduler events on demand — fetch events for the viewed date range from a remote or local source via a lifecycle callback.
- [Load Events on Scroll](https://demo.mobiscroll.com/scheduler/load-events-on-scroll.md) - Load JavaScript scheduler events on demand as users scroll — fetch only events for visible date range for fast performance with large event counts.
- [Large Dataset Performance](https://demo.mobiscroll.com/scheduler/loading-big-data-sets.md) - See how the JavaScript Scheduler handles large data sets— virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop.

### Third party calendar integrations

- [Google Calendar Integration](https://demo.mobiscroll.com/scheduler/sync-events-google-calendar.md) - Connect the JavaScript Scheduler to Google Calendar — authenticate users, load their calendars, and sync create, edit, or delete events in real time.
- [Outlook Calendar Integration](https://demo.mobiscroll.com/scheduler/sync-events-outlook-calendar.md) - Connect Outlook Calendar to a JavaScript Scheduler — authenticate with Microsoft sign-in, load Outlook events, and sync add, edit, and delete actions.
- [Public Google Calendar Integration](https://demo.mobiscroll.com/scheduler/load-events-from-google-calendar.md) - Load public Google Calendar events into the JavaScript Scheduler — connect with your Calendar ID and API key via the integration plugin.

### CRUD operations

- [Create, Edit and Delete Events](https://demo.mobiscroll.com/scheduler/create-read-update-delete-CRUD.md) - Implement full event CRUD in a JavaScript Scheduler — drag or click to create events, confirm via a custom dialog, then drag to move, resize, or delete.
- [Bulk Event Actions](https://demo.mobiscroll.com/scheduler/event-bulk-actions-edit-delete-update.md) - Add bulk actions to the JavaScript Scheduler - select multiple events, then update or delete them in one step, and right-click for single-event actions.
- [Recurring Event Add & Edit](https://demo.mobiscroll.com/scheduler/recurring-event-add-edit-dialog.md) - Add a recurrence editor to the JavaScript Scheduler event dialog — with daily, weekly, monthly, and custom presets plus an RRULE builder.
- [Prevent Past Event Creation](https://demo.mobiscroll.com/scheduler/disallow-past-event-creation.md) - Block event creation and editing on past dates in the JavaScript Scheduler — past dates are blocked, past events are locked, and failed attempts show a toast.

### Customizing the look & feel

- [CSS Classes for Cell Colors and Blocked Times](https://demo.mobiscroll.com/scheduler/colors-invalids-css-class.md) - Apply custom CSS classes to color-code JavaScript Scheduler cells and style blocked times - add patterns or backgrounds for days or periods.
- [Resource Filtering in Header](https://demo.mobiscroll.com/scheduler/resource-filtering-in-header.md) - Add a segmented resource filter to the JavaScript Scheduler header — place it between navigation buttons to let users switch resources inline.
- [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the JavaScript Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.
- [Resource Background Styling](https://demo.mobiscroll.com/scheduler/resource-background.md) - Color-code resources in a JavaScript Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource.
- [Cell Hover Summary](https://demo.mobiscroll.com/scheduler/show-cell-summary-on-hover.md) - Hover over any cell in the JavaScript Scheduler to open a tooltip showing event count, invalid slots, and color ranges for that cell.

### Localization & tapping into the lifecycle

- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/scheduler/gregorian-jalali-hijri.md) - Configure the JavaScript Scheduler to display Gregorian, Jalali, or Hijri dates — each calendar system loads its locale and language pack automatically.
- [Event Hooks](https://demo.mobiscroll.com/scheduler/event-hooks.md) - Explore JavaScript Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.
- [Localization](https://demo.mobiscroll.com/scheduler/localization.md) - Add multi-language support to the JavaScript Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings overridable.

## Your data and external calendars

The Scheduler is an interface component: you provide the events and resources from your application's data. It works independently of any external calendar service.

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

## Frequently asked questions

### What is the Mobiscroll Scheduler?

The Mobiscroll Scheduler displays events across a vertical time scale, optionally grouped by people, rooms, equipment or other resources. It is configured through the Mobiscroll `Eventcalendar` API. Developers can configure the views, event interactions and rendering to build a scheduling interface inside their own applications.

### Does Mobiscroll Scheduler include a scheduling backend?

No. Mobiscroll provides the scheduling interface, event and resource views, drag-and-drop interactions and UI configuration. Your application remains in control of data storage, permissions, business rules and any server-side scheduling logic.

### Can I use my own API and database?

Yes. You can pass events and resources from your existing data sources, load events from a remote API and respond to changes through event callbacks ([remote API example](https://demo.mobiscroll.com/scheduler/load-events-from-remote-api), [on-demand event loading](https://demo.mobiscroll.com/scheduler/load-events-on-demand)).

### Can one event be assigned to more than one resource?

Yes. An event can reference several resources and appear in each of their Scheduler columns. The event remains one item in your event data ([shared events example](https://demo.mobiscroll.com/scheduler/shared-events-across-resources)).

### Can the Scheduler prevent overlapping events?

You can configure blocked or invalid times and interaction rules to restrict overlapping events in the UI ([prevent overlapping events](https://demo.mobiscroll.com/scheduler/prevent-double-booking-events)). If your application accepts bookings from several users or systems, it should also validate availability when saving.

### Can I combine the Scheduler with a calendar?

Yes. The Scheduler is a layout of the `Eventcalendar` component, so a single instance can combine a Scheduler with a calendar, or a separate calendar can control the Scheduler's selected date ([combining views](https://mobiscroll.com/docs/javascript/eventcalendar/scheduler#view-combination), [external calendar navigation](https://demo.mobiscroll.com/scheduler/navigate-view-from-external-calendar)).

### Does the Scheduler work on mobile?

Yes. You can configure responsive views for phones, tablets and desktops, such as a day view on smaller screens and a week view on larger screens ([responsive Scheduler example](https://demo.mobiscroll.com/scheduler/responsive-day-week-schedule)). It supports touch interaction and major mobile and desktop browsers.

### Is the Scheduler accessible?

Mobiscroll supports keyboard navigation, WAI-ARIA labels and screen readers, and its components are largely aligned with WCAG 2.2 A and AA. Full AA compliance is not claimed. Drag-and-drop actions need an accessible alternative supplied by the application, such as an add or edit dialog; the [accessibility and WCAG documentation](https://mobiscroll.com/docs/javascript/core-concepts/accessibility) describes supported criteria and current limitations.

### Is the Mobiscroll Scheduler free or open source?

No. The Scheduler is commercially licensed, with a free trial for evaluation. Internal-project licenses and licenses for software delivered to multiple customers have different terms; see [Mobiscroll pricing](https://mobiscroll.com/pricing).

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

No. Mobiscroll packages are distributed through Mobiscroll's private npm registry. The Mobiscroll CLI configures access and installs the framework package; see the framework-specific installation guide in Getting started above.

### Can AI coding assistants build with the Scheduler?

Yes. Mobiscroll provides a version-aware MCP server, framework-specific agent guidance and AI-readable documentation. Claude Code, Codex, Cursor and GitHub Copilot have supported setup paths in the [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration). Generated code should still be tested against the application's requirements.

### Do I need Mobiscroll Connect to use the Scheduler?

No. The Scheduler works with your own event and resource data. Mobiscroll Connect is a separate product, sold separately, for applications that need to connect users' Google, Outlook, Apple Calendar or CalDAV accounts.

### Can I use the Scheduler in a SaaS product?

Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers, distinct from internal-project licensing. See [pricing and license options](https://mobiscroll.com/pricing).

### Can I migrate from FullCalendar, Bryntum or DHTMLX?

Step-by-step migration guides cover how to map event data, component options and integrations to Mobiscroll: [FullCalendar migration](https://mobiscroll.com/docs/javascript/guides/migrating-from-fullcalendar-to-mobiscroll), [Bryntum migration](https://mobiscroll.com/docs/javascript/guides/migrating-from-bryntum-to-mobiscroll) and [DHTMLX migration](https://mobiscroll.com/docs/javascript/guides/migrating-from-dhtmlx-to-mobiscroll).

### Can I use the Scheduler without a framework or build tool?

Yes. Download the JavaScript package and include its CSS and JavaScript files on a plain HTML page, then initialize `mobiscroll.eventcalendar()`. A build tool and CLI are not required for that path ([plain JavaScript installation](https://mobiscroll.com/docs/javascript/getting-started/installation)).

## Licensing

The Scheduler is part of Mobiscroll UI. For an application used within your organization, choose an internal-project license; for software supplied to multiple customers, explore Calendaring for SaaS. Features and add-ons vary by license, including the print module. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing).

## Ready to build your scheduling interface?

Start with a working Scheduler example, try Mobiscroll in your application, or use the [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) to help your coding assistant adapt an example. You can also explore more demos and the [Scheduler documentation](https://mobiscroll.com/docs/javascript/eventcalendar/scheduler) whenever you need a specific API detail.

## Built for JavaScript

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

- **Installation:** use the CLI and npm in a bundled application, or include a downloaded package on a plain web page.
- **ESM support:** an ESM bundle is available for bundlers; see the [ESM bundle guide](https://mobiscroll.com/docs/javascript/core-concepts/esm-bundle).
- **TypeScript:** definitions ship with the package ([TypeScript guide](https://mobiscroll.com/docs/javascript/guides/typescript)).

## Using a framework?

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