JavaScript Scheduler
Updated on 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.
Loading the live demo...
Use it in plain JavaScript websites or bundled applications without adopting a frontend framework.
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.
Available for
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.
Schedule people, rooms or equipment side by side. Assign one event to several resources and keep it connected to the same underlying event data.
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.
Use the Mobiscroll MCP server, coding-agent skills and AI-readable documentation to give AI coding assistants accurate Scheduler API context for your framework.
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.
npm install -g @mobiscroll/cli
mobiscroll config javascriptAdd a <div id="scheduler"></div> to your page. In a bundled JavaScript application, import the Scheduler initializer and styles:
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 and Scheduler documentation.
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.
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.
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.
Display a daily, weekly or monthly time grid, or show a custom span of days or weeks (multiple days and weeks, custom date range). Configure working days, visible hours, time intervals and labels to fit a shift planner, appointment calendar or dispatch board (visible days and hours, workweek hours).
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, navigation from another calendar). Switch among calendar, scheduler and agenda layouts or add an event-search sidebar (switching views, searching events).
Display people, rooms and equipment as resource columns, grouped by resource or by date (resource scheduling, grouping options). 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, dynamic resource filtering).
Create events from the time grid, move them to another time or resource, and resize their duration by dragging (create and edit 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, external drag and drop).
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, prevent overlapping events, past-event restrictions, buffers). Your application can also use event callbacks to apply its own validation when changes are saved.
Show events that repeat daily, weekly, monthly or yearly, including moved or removed occurrences (recurring events). Build recurrence editing into your event forms when users need to change a whole series or an individual occurrence (recurrence editing).
Use templates to show the details your users need inside events and resource headers, such as names, statuses or additional metadata (custom event content, resource header templates). This lets you adapt the schedule to your application's domain without replacing the underlying time-grid interactions.
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, remote API data, on-demand loading, loading during scroll). Virtualized rendering supports schedules with large data sets and many resources (large scheduling data sets).
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, multiple displayed time zones). Configure localized date formats and labels, right-to-left layouts, and Gregorian, Jalali or Hijri calendars (localization, calendar systems).
Adapt the view to available space, for example by showing a day schedule on a phone and a week schedule on desktop (responsive scheduler, mobile day view, desktop week view). The Scheduler supports touch interactions as well as desktop mouse interaction.
Keyboard users can navigate to events and controls, while WAI-ARIA roles and labels provide information to assistive technology (Scheduler keyboard accessibility). Mobiscroll documents its level of support for WCAG 2.2 A and AA criteria; see the accessibility documentation for qualifications and application-level considerations.
Choose iOS, Material or Windows styling with light and dark themes (built-in themes). Print the current scheduling view using the print module, available according to your license (printing the schedule).
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 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.
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.
Mobile Day View 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 Build a daily scheduler with the JavaScript Scheduler - all-day events pinned above a scrollable hourly time grid. 
Week View on Mobile Show a full week on mobile with the JavaScript Scheduler - fixed header, scrollable time grid, all-day and timed events. 
Week View 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 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 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 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. 
Work Week Configure the JavaScript Scheduler with a Monday-Friday work-week layout, set business-hours, hide off-hours, and block lunch breaks. 
Appointment Scheduling Build a JavaScript appointment scheduler - assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking. 
Doctors Availability Show per-doctor availability in the JavaScript Scheduler - color-coded tracks mark open appointment slots, with each doctor's working hours. 
Rota Planning 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 Drag team members from an external list onto existing meetings in the JavaScript Scheduler - with drop feedback and conflict validation. 
Custom Range View 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 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 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 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 Color JavaScript Scheduler cell backgrounds for time ranges - mark lunch breaks, maintenance windows, or recurring schedules. 
Dynamic View Switching Switch between year, month, week, day, and agenda views in the JavaScript event calendar - via header control or programmatically. 
Visible hours and days Keep your calendar focused. 
Multi-Timezone Configuration Set separate data and display timezones in the JavaScript Scheduler - let users switch visible timezones without changing event data. 
Event Buffer 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 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 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 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 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 Use a two-pane layout to sync a date picker and JavaScript Scheduler - selecting a date navigates the scheduler automatically. 
Custom Event Tooltip Show native, custom, or third-party tooltips on JavaScript Scheduler event hover - with appointment details and inline actions. 
Event Rendering Render custom event cards in the JavaScript Scheduler - add color stripes, labels, avatars, action buttons, and travel-time buffers. 
Custom Date Header Customize the date headers of the JavaScript Scheduler - add custom layouts, labels, and milestone badges to day columns. 
Resource Headers 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 Add custom content to JavaScript Scheduler cells - show icons, badges, colored backgrounds, or status markers based on date, resource, and event data. 
Custom Header Arrange navigation controls and add a scheduler/calendar view-switcher in a custom JavaScript Scheduler header. 
Drag, Resize and Create Events 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 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 Drag and drop events between two JavaScript Scheduler instances - reassign appointments, tasks, or shifts across separate weekly views. 
Blocked Time Ranges Block weekends, holidays, and lunch breaks in the JavaScript Scheduler using recurring unavailable ranges - choose strict or start-end validation. 
Prevent Double Booking 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 Schedule events by dragging from Mobiscroll, SortableJS or Dragula lists onto the JavaScript Scheduler, and unschedule them by dragging out. 
External Task Presets Drag task templates from an external list onto the JavaScript Scheduler - schedule, assign a technician in a popup, and block drops on restricted slots. 
Multi-Resource View Show multiple resources - people, rooms, or equipment - side by side in a JavaScript Scheduler weekly view. 
Group by Resource or Date 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 Schedule event across multiple resources in the JavaScript Scheduler - for shared work calendars, mixed resource types like instructor and aircraft. 
Dynamic Resource Filtering 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 Control individual resource column widths in the JavaScript Scheduler by assigning CSS classes based on each column's header content. 
Multi-Resource Configuration 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 Show only available staff in a JavaScript Scheduler - hide resource columns for days when staff are off, with support for recurring. 
Event Data Structure Define event data in the JavaScript Scheduler - set base fields, recurring rules, resource links, drag/resize controls, and buffer times. 
Date Formats Pass JS date objects, ISO strings, or Moment.js objects into the JavaScript Scheduler for events, marked dates, colors, and labels. 
Recurring Events Add recurring events to the JavaScript Scheduler - configure daily, weekly, monthly, or yearly rules with RRULE string support. 
Inline Data 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 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 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 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 See how the JavaScript Scheduler handles large data sets- virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop. 
Google Calendar Integration 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 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 Load public Google Calendar events into the JavaScript Scheduler - connect with your Calendar ID and API key via the integration plugin. 
Create, Edit and Delete Events 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 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 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 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. 
CSS Classes for Cell Colors and Blocked Times 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 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 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 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 Hover over any cell in the JavaScript Scheduler to open a tooltip showing event count, invalid slots, and color ranges for that cell. 
Gregorian, Jalali & Hijri Configure the JavaScript Scheduler to display Gregorian, Jalali, or Hijri dates - each calendar system loads its locale and language pack automatically. 
Event Hooks Explore JavaScript Scheduler lifecycle hooks - see which callbacks fire on event click, init, or date change in the live event log. 
Localization Add multi-language support to the JavaScript Scheduler - 37 locales, RTL layout, and localized date/time formats, with all settings overridable. 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 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.
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.
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.
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, on-demand event loading).
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).
You can configure blocked or invalid times and interaction rules to restrict overlapping events in the UI (prevent overlapping events). If your application accepts bookings from several users or systems, it should also validate availability when saving.
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, external calendar navigation).
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). It supports touch interaction and major mobile and desktop browsers.
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 describes supported criteria and current limitations.
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.
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.
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. Generated code should still be tested against the application's requirements.
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.
Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers, distinct from internal-project licensing. See pricing and license options.
Step-by-step migration guides cover how to map event data, component options and integrations to Mobiscroll: FullCalendar migration, Bryntum migration and DHTMLX migration.
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).
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.
Start with a working Scheduler example, try Mobiscroll in your application, or use the AI Tooling guide to help your coding assistant adapt an example. You can also explore more demos and the Scheduler documentation whenever you need a specific API detail.
Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.
Native Angular components, not wrappers, that use Angular's own rendering and change detection.
Native React components, not wrappers, built on React's virtual DOM and state management.
Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.
You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.
We noticed you are logged in on a different machine and have closed your old session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.