--- title: "JavaScript Timeline Library for Resource Scheduling | Mobiscroll" component: "Timeline" framework: "JavaScript" library_version: "6.2.0" url: "https://demo.mobiscroll.com/timeline" --- # JavaScript Resource Timeline Scheduler for Planning A horizontally scrollable JavaScript timeline with multi-resource rows, configurable day, week, and month views, drag-and-drop, and CRUD. Plain JavaScript API. Last update: Oct 30, 2026 Build horizontal scheduling and planning interfaces with time across the screen and resources in rows. Plan jobs, shifts, equipment and project work from hours to months or years with configurable views, drag and drop and your own application data. Add the Timeline to a plain JavaScript page or a bundled web application without adopting a frontend framework. ## Overview The Mobiscroll Timeline is the horizontal scheduling view of the Event Calendar component. Time runs from left to right, while resources such as people, teams, rooms or equipment appear as rows. Unlike the Scheduler's vertical time grid, the Timeline makes it natural to compare assignments across resources and follow work over days, weeks, months or longer periods. It is a configurable UI toolset for building planning experiences, not a predefined resource-management application. ## Timeline highlights ### Horizontal planning from hours to years Show a resource schedule across hours, days, weeks, months, quarters or years. Adjust the visible range and zoom level so users can switch between detailed work and a wider planning overview. ### Resource hierarchies and shared assignments Organize people, teams, sites or equipment into expandable resource groups. Show one event against multiple resources and adapt the resource rows to the structure of your application. ### Interactive schedules and task relationships Create, move and resize events on the timeline. Display progress and links between related tasks, with control over the editing interactions your users are allowed to perform. ### AI-ready developer tooling Use Mobiscroll's MCP server, coding-agent skills and AI-readable examples to give AI coding assistants version-specific Timeline APIs and framework-aware implementation context. ## Getting started Add Mobiscroll to your project and enable the `timeline` view of the Event Calendar component. The example below shows a week of work across two teams and a piece of equipment, including an assignment shared by more than one resource. Start with this example or open any Timeline demo below to inspect and reuse its source code. Install the Mobiscroll CLI once, then run the configuration command inside your JavaScript project. It configures access to Mobiscroll's private npm registry and installs the package. ```bash npm install -g @mobiscroll/cli mobiscroll config javascript ``` Add a `
` to your page. In an application using a bundler, import the Event Calendar initializer and its styles: ```javascript import { eventcalendar } from '@mobiscroll/javascript'; import '@mobiscroll/javascript/dist/css/mobiscroll.min.css'; const weekStart = new Date(); weekStart.setDate(weekStart.getDate() - ((weekStart.getDay() + 6) % 7)); weekStart.setHours(0, 0, 0, 0); const day = (n) => new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + n); const resources = [ { id: 1, name: 'Installation team' }, { id: 2, name: 'Inspection team' }, { id: 3, name: 'Equipment' } ]; const events = [ { id: 1, title: 'Site preparation', start: day(0), end: day(1), allDay: true, resource: 1 }, { id: 2, title: 'Equipment installation', start: day(1), end: day(3), allDay: true, resource: [1, 3] }, { id: 3, title: 'Quality inspection', start: day(3), end: day(4), allDay: true, resource: 2 } ]; eventcalendar('#timeline', { view: { timeline: { type: 'week', resolutionHorizontal: 'day' } }, selectedDate: weekStart, resources, data: events, dragToCreate: true, dragToMove: true, dragToResize: true }); ``` A plain HTML page does not need a bundler or CLI: include a downloaded Mobiscroll JavaScript and CSS package and initialize through `mobiscroll.eventcalendar()` instead. See the [JavaScript installation guide](https://mobiscroll.com/docs/javascript/getting-started/installation) and [Timeline documentation](https://mobiscroll.com/docs/javascript/eventcalendar/timeline). The code above is an introductory planning scenario. For a different layout or workflow, explore the full Timeline demo gallery below and start from the source of the closest working example. ## What you can build with the Timeline Build horizontal planning interfaces that make work and resource availability understandable at a glance. The Timeline is a set of configurable views and interactions: start with the work your users need to plan, then adapt the resources, time scale, event content and editing rules to your application. ### Project & timeline planning Build project timelines that show tasks, milestones and work spanning several days or months. Display links between related tasks, add progress indicators and let users zoom between detailed and high-level plans ([linked tasks](https://demo.mobiscroll.com/timeline/connecting-linking-events-arrows), [task progress](https://demo.mobiscroll.com/timeline/show-task-progress-on-event), [zoom levels](https://demo.mobiscroll.com/timeline/calendar-zoom)). Useful for project, construction and delivery-planning products that need a visual schedule without imposing a fixed project workflow. ### Resource & asset planning Build resource calendars for equipment, rooms, vehicles and teams with a horizontal time axis. Group resources by site or department, compare their bookings and show summary information alongside the plan ([resource hierarchy](https://demo.mobiscroll.com/timeline/resource-grouping-hierarchy), [compare resources](https://demo.mobiscroll.com/timeline/compare-resources-fixed-at-top), [resource group summaries](https://demo.mobiscroll.com/timeline/show-summaries-aggregates-for-resource-groups)). Useful for booking and allocation interfaces in B2B software. ### Operations & production planning Plan production runs, operational jobs or equipment usage across work periods. Show shifts or tasks under resource rows, indicate unavailable periods and display time buffers between assignments ([tasks within shifts](https://demo.mobiscroll.com/timeline/tasks-subtasks-under-shifts), [shift slots](https://demo.mobiscroll.com/timeline/shift-template), [time buffers](https://demo.mobiscroll.com/timeline/event-buffer)). Adapt the schedule to your application's production and operational rules. ### Workforce & shift planning Create workforce planning timelines with employees or teams in rows and shifts extending across days. Use scheduling interactions to reassign work, display recurring shifts and build specialized views for industries with changing staff coverage ([employee shifts](https://demo.mobiscroll.com/timeline/employee-shifts), [restaurant shifts](https://demo.mobiscroll.com/timeline/restaurant-shift-management), [recurring shifts](https://demo.mobiscroll.com/timeline/recurring-events)). ### Job scheduling & dispatch Build dispatch boards and work-order timelines for technicians, crews or vehicles. Place work from an unassigned pool onto resources, move jobs to another team and show the sequence of assignments across a wider period ([work-order scheduling](https://demo.mobiscroll.com/timeline/work-order-scheduling), [work-order assignment](https://demo.mobiscroll.com/timeline/assign-unassign-work-orders-fixed-top-row), [transport planning](https://demo.mobiscroll.com/timeline/truck-transport-planning-and-dispatch)). ## Timeline capabilities Mobiscroll Timeline combines the horizontal scheduling layout with controls for resources, event interactions and rendering. Use these building blocks together to create a resource scheduler, planning board or Gantt-style interface around your own data instead of adopting a predetermined process. ### Horizontal time scales and zoom Display time from left to right in day, week, month or year views, with time resolution ranging from hours to years. Configure the visible range and switch between zoom levels, such as daily planning and a multi-month overview ([Timeline views](https://demo.mobiscroll.com/timeline/daily-weekly-monthly-yearly-timeline), [time scales](https://demo.mobiscroll.com/timeline/multiple-days-weeks-months-quarters-years-variable-resolution), [zoom controls](https://demo.mobiscroll.com/timeline/calendar-zoom)). ### Resource rows and hierarchies Show people, teams or assets as rows, and nest them in multi-level hierarchies such as site, building and room. Allow users to expand groups, find resources and reorder the list where the workflow requires it ([resource groups](https://demo.mobiscroll.com/timeline/resource-grouping-hierarchy), [resource filtering](https://demo.mobiscroll.com/timeline/resource-filtering-search), [reordering resources](https://demo.mobiscroll.com/timeline/resource-drag-drop-reorder)). ### Assignments across multiple resources Display an event against one resource or several resources while retaining the shared event data. Build assignment flows that let users put work onto a team, remove an assignment or assign a person from an external list ([assign and unassign work](https://demo.mobiscroll.com/timeline/assign-unassign-work-orders-fixed-top-row), [assign people to events](https://demo.mobiscroll.com/timeline/drop-assignee-on-event-from-list), [resource data and assignments](https://mobiscroll.com/docs/javascript/eventcalendar/resources)). ### Gantt-style task links and progress Draw connections and directional arrows between events, display task progress and customize the information shown inside each task bar ([linked events](https://demo.mobiscroll.com/timeline/connecting-linking-events-arrows), [progress indicators](https://demo.mobiscroll.com/timeline/show-task-progress-on-event), [custom task rendering](https://demo.mobiscroll.com/timeline/timeline-custom-event-rendering)). These are visual building blocks for project timelines; automatic dependency rescheduling and critical-path calculations are application-side concerns. ### Drag and drop with interaction control Create events and drag them along the timeline, between resources or across different views. Resize durations and control which changes are permitted for a particular event or resource ([drag editing](https://demo.mobiscroll.com/timeline/move-resize-drag-drop-to-create-events), [interaction restrictions](https://demo.mobiscroll.com/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource), [external event lists](https://demo.mobiscroll.com/timeline/external-drag-drop-sortable-dragula)). ### Shift slots and scheduling restrictions Represent work shifts as slots and display tasks within longer-running assignments. Mark time off and unavailable intervals, show buffers before or after events and configure the restrictions that apply when users edit the schedule ([shift slots](https://demo.mobiscroll.com/timeline/shift-template), [resource availability](https://demo.mobiscroll.com/timeline/dynamically-color-and-invalidate), [overlap restrictions](https://demo.mobiscroll.com/timeline/prevent-double-booking-events), [buffer time](https://demo.mobiscroll.com/timeline/event-buffer)). ### Resource comparison and visual summaries Compare a selected resource with the rest of the plan, display aggregate summaries for resource groups and add custom details to resource rows and footers ([compare resources](https://demo.mobiscroll.com/timeline/compare-resources-fixed-at-top), [aggregated summaries](https://demo.mobiscroll.com/timeline/show-summaries-aggregates-for-resource-groups), [resource details](https://demo.mobiscroll.com/timeline/timeline-resource-details-side-panel-footer)). Use these views to explain allocation and workload; your application can supply the underlying capacity calculations. ### Custom event and cell rendering Adapt event bars, row heights, headers, footers and timeline cells to your own domain. Show progress, status, buffers or resource-specific information in the schedule instead of forcing every workflow into identical event labels ([event appearance](https://demo.mobiscroll.com/timeline/timeline-custom-event-rendering), [custom cells](https://demo.mobiscroll.com/timeline/dynamic-cell-content-template), [variable event heights](https://demo.mobiscroll.com/timeline/variable-event-height), [timeline headers and footers](https://demo.mobiscroll.com/timeline/hour-day-week-month-quarter-year-header-footer-template)). ### Recurring and multi-day work Show work that spans multiple days and events that repeat daily, weekly, monthly or yearly. Customize how overlapping events are displayed or switch to a daily event-listing layout when a summarized view is more useful ([recurring events](https://demo.mobiscroll.com/timeline/recurring-events), [overlapping-event display](https://demo.mobiscroll.com/timeline/control-number-of-concurrently-shown-events), [daily event listing](https://demo.mobiscroll.com/timeline/event-listing)). ### Connect your own data and scale the view Populate the Timeline from your API, request events as users navigate and load resources while scrolling. Virtualized rendering manages what is visible horizontally and vertically, supporting resource-heavy schedules and longer planning ranges ([remote event data](https://demo.mobiscroll.com/timeline/load-events-from-remote-api), [on-demand events](https://demo.mobiscroll.com/timeline/load-events-on-demand), [load resources on scroll](https://demo.mobiscroll.com/timeline/load-resources-on-scroll), [large data sets](https://demo.mobiscroll.com/timeline/loading-big-data-sets)). ### Time zones and localization Display dates and event times for international teams, including views that show working hours for people in different time zones. Localize labels and date formats, support right-to-left layouts and use the documented Gregorian, Jalali and Hijri calendar options ([time-zone meeting planner](https://demo.mobiscroll.com/timeline/timezone-meeting-planner), [localized timeline](https://demo.mobiscroll.com/timeline/localization), [calendar systems](https://demo.mobiscroll.com/timeline/gregorian-jalali-hijri)). ### Mobile use and accessibility Configure a more focused timeline on smaller screens and use the component's touch and keyboard interactions to support different devices. Mobiscroll provides keyboard and screen-reader support and documents its current WCAG 2.2 A and AA coverage; consult the [Event Calendar accessibility guide](https://mobiscroll.com/docs/javascript/eventcalendar/accessibility) and [accessibility support details](https://mobiscroll.com/docs/javascript/core-concepts/accessibility) for the applicable limitations. ### Themes and printing Choose an iOS, Material or Windows theme and adapt the Timeline with custom styling. Print the current view with the separately licensed print module when your license includes it ([print and PDF example](https://demo.mobiscroll.com/timeline/printing-the-view), [printing documentation](https://mobiscroll.com/docs/javascript/eventcalendar/print)). ## AI Tooling Mobiscroll provides AI Tooling for teams building scheduling and planning interfaces with coding assistants. Its hosted MCP server can supply API context for the Mobiscroll version in your project. Agent skills, framework-specific instructions and AI-readable documentation help assistants distinguish Timeline view configuration, event data, resource hierarchies and editing callbacks when adapting examples. For plain JavaScript, ask an assistant to configure `mobiscroll.eventcalendar()` or the JavaScript ESM initializer with `view.timeline`, your resource data and your event API. Example request: "Build a JavaScript horizontal resource scheduler with equipment in rows and jobs over a two-week period. Use Mobiscroll's current Timeline API, allow drag and drop, and show where my existing API connects." Claude Code and Codex can use Mobiscroll's plugin and UI skills with its MCP connection. Cursor and GitHub Copilot can use framework-specific instruction files and optionally connect to the MCP server. Follow the [AI Tooling setup guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) for the supported setup of each assistant. Mobiscroll documentation and demos are also available in AI-readable formats, including source code and implementation notes. An assistant can use these to find the correct patterns, but developers should still test the resulting planning and scheduling behavior against their application's rules. ## Timeline demos Explore working JavaScript Timeline examples for horizontal resource scheduling, project planning, shift management, resource hierarchies and drag-and-drop assignment. Each demo includes a working implementation and code you can inspect. Start with the example closest to your resource or planning problem, then adapt its data, interactions and rendering. The gallery below contains the Timeline examples available for this framework. ### Setting up the timeline - [Month View](https://demo.mobiscroll.com/timeline/calendar-timeline.md) - Show all resources in a monthly JavaScript timeline — resources as rows, days as columns, with adjustable daily resolution. - [Time Grid and Timeline Layout](https://demo.mobiscroll.com/timeline/timeline-time-grid.md) - Switch between a vertical time grid and a horizontal resource timeline in a JavaScript scheduler — set responsive to show each layout by screen size. - [Print and PDF Export](https://demo.mobiscroll.com/timeline/printing-the-view.md) - Use the JavaScript Timeline print add-on to print just the timeline view — apply print-optimized styles and export to PDF through the browser. ### Common use cases - [Employee Shift Scheduling](https://demo.mobiscroll.com/timeline/employee-shifts.md) - Plan employee shifts on a JavaScript Timeline — show workers as resource rows with morning and afternoon slots, and manage shifts with a custom add/edit dialog. - [Work Order Scheduling](https://demo.mobiscroll.com/timeline/work-order-scheduling.md) - Schedule work orders across grouped resources — drivers, trucks, and contractors — on a JavaScript timeline. - [Timezone Meeting Planner](https://demo.mobiscroll.com/timeline/timezone-meeting-planner.md) - Plan team meetings across multiple time zones using the JavaScript Timeline — show availability, time-off blocks, with events in local time. - [Restaurant Shift Scheduling](https://demo.mobiscroll.com/timeline/restaurant-shift-management.md) - Build a restaurant shift planning with JavaScript Timeline — organize staff by role, track occupancy per shift, and toggle shifts on or off. - [Meal Planner](https://demo.mobiscroll.com/timeline/meal-planner.md) - Build a weekly meal planner with the JavaScript Timeline — meal types as color-coded resource rows, custom add/edit popover for creating or updating meals. - [Dynamic Resource Availability](https://demo.mobiscroll.com/timeline/dynamically-color-and-invalidate.md) - Color-code resource rows and restrict drop zones by task type on a JavaScript Timeline — compatible resources turn green, incompatible ones gray during drag. - [Multi-Classroom Timetable](https://demo.mobiscroll.com/timeline/multi-classroom-timetable.md) - Build a weekly classroom timetable with the JavaScript Timeline — rooms and days listed vertically with hourly slots from 8 AM to 8 PM, Monday to Friday. - [Monthly Timetable View](https://demo.mobiscroll.com/timeline/monthly-timetable-vertical-days-horizontal-times.md) - Display a monthly timetable in the JavaScript Timeline — days listed vertically, hours across, with drag-to-create in a single-resource layout. - [Compare Resources Fixed at Top](https://demo.mobiscroll.com/timeline/compare-resources-fixed-at-top.md) - Use the JavaScript Timeline to pin up to 3 resources to a fixed comparison section at the top — compare schedules side by side while the rest scroll below. - [Work Order Assignment](https://demo.mobiscroll.com/timeline/assign-unassign-work-orders-fixed-top-row.md) - Assign work orders to employees on a JavaScript Timeline — keep unassigned orders in a fixed top row while scrolling, and drag to assign without changing time. - [Task Checklist in Events](https://demo.mobiscroll.com/timeline/check-list-tasks-within-events.md) - Render a task checklist inside each JavaScript Timeline event card — row heights expand as the list grows, and a popup let users add new subtasks. - [Dual Synchronized Flight Scheduling](https://demo.mobiscroll.com/timeline/flight-scheduling-two-synchronized-timelines.md) - Use synchronized JavaScript Timeline views to build a flight scheduling UI — drag flights to assign them to aircraft, with fixed event times and conflict detection. - [Task Progress Tracking](https://demo.mobiscroll.com/timeline/show-task-progress-on-event.md) - Show task completion progress on the JavaScript Timeline events with an inline hover slider for live updates and a progress field in the add/edit dialog. - [Shifts and Tasks](https://demo.mobiscroll.com/timeline/tasks-subtasks-under-shifts.md) - Display shifts and linked tasks on a JavaScript Timeline — group tasks under parent shifts and restrict movement to each shift's time range. - [Resource Search and Filtering](https://demo.mobiscroll.com/timeline/resource-filtering-search.md) - Add live search and filter to a JavaScript Timeline resource header — multi-select by status or group, with a custom empty state and reset. - [External Resource Drag & Drop](https://demo.mobiscroll.com/timeline/resource-management-with-dynamic-team-creation.md) - Drag external resources onto a JavaScript Timeline to add team members, or drag them off to remove them — build crew scheduling and team management. - [Event Grouping & Bulk Actions](https://demo.mobiscroll.com/timeline/event-grouping-bulk-action.md) - Group JavaScript Timeline events into collapsible client/quarter blocks and bulk-drag groups — switch between assignee and work-type, on a year view. - [36-Hour Rolling Window Schedule](https://demo.mobiscroll.com/timeline/36-hour-rolling-window-aircraft-view.md) - Build a fleet scheduling view on the JavaScript Timeline — a 36-hour rolling window that auto-advances from the current hour. - [Drag People onto Events](https://demo.mobiscroll.com/timeline/drop-assignee-on-event-from-list.md) - Build a team assignment interface on the JavaScript Timeline — drag people from an external list onto meetings with conflict validation. - [Truck Dispatch Planning](https://demo.mobiscroll.com/timeline/truck-transport-planning-and-dispatch.md) - Assign transports on the JavaScript timeline — hide trucks with capacity or time-window conflicts during drag and snap failed drops to the nearest valid slot. ### Configuring the view - [Day, Week, Month & Year Views](https://demo.mobiscroll.com/timeline/daily-weekly-monthly-yearly-timeline.md) - Switch between day, week, month, and year views on the JavaScript Timeline — configure visible weekdays, working hours, and time scale per view. - [Multiple Time Scales](https://demo.mobiscroll.com/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md) - Configure span and time scale on a JavaScript Timeline — switch day, week, month, quarter, or year views, set resolution, and show or hide empty rows. - [Calendar Zoom Levels](https://demo.mobiscroll.com/timeline/calendar-zoom.md) - Add zoom controls to a JavaScript resource timeline to switch from day/hour detail to monthly/yearly overviews— keeping events centered as the view changes. - [Limit Concurrent Events](https://demo.mobiscroll.com/timeline/control-number-of-concurrently-shown-events.md) - Set a maximum number of concurrent events on a JavaScript Timeline — cap overlapping events per row and show an overflow indicator for hidden events. - [Event Buffer Time](https://demo.mobiscroll.com/timeline/event-buffer.md) - Visualize buffer time on a JavaScript Timeline — show travel time, check-in/out, loading/unloading time, or preparation windows around scheduled events. - [Custom Range Picker View](https://demo.mobiscroll.com/timeline/custom-range-view.md) - Replace the JavaScript Timeline's default header navigation with a range picker — let users set any custom date range, synced two-way with the timeline. - [Custom Event Ordering](https://demo.mobiscroll.com/timeline/custom-event-sort.md) - Set event order in the JavaScript Timeline - using a per-event order value or a custom ordering function. - [Equal Row Heights](https://demo.mobiscroll.com/timeline/timeline-resource-height.md) - Keep all resources the same height on the JavaScript Timeline — overlapping events distribute evenly within each row - CSS override for minimum height. - [Variable Event Height](https://demo.mobiscroll.com/timeline/variable-event-height.md) - Show JavaScript Timeline events sized to content — resource rows grow to fit the tallest event, keeping text visible in room or resource schedules. - [Daily Event Listing](https://demo.mobiscroll.com/timeline/event-listing.md) - Display events as full-day labels across resources on the JavaScript Timeline — ideal for capacity checks and daily schedule overviews. - [Day/Week View Switcher](https://demo.mobiscroll.com/timeline/switching-day-week-work-week-timeline.md) - Build resource schedules with day, work-week, and full-week views on a JavaScript Timeline — switch views from the header to control time-grid detail. - [Data & Display Timezone](https://demo.mobiscroll.com/timeline/setting-the-timezone.md) - Set separate data and display timezones on a JavaScript Timeline — configure per-resource event timezone display using Luxon, Moment-timezone, or Day.js. - [Multiple Timezone Support](https://demo.mobiscroll.com/timeline/multiple-timezone-support.md) - Let users switch the display timezone on the fly via a custom dropdown in the JavaScript Timeline header — data and display timezones are set independently. - [Event Search Sidebar](https://demo.mobiscroll.com/timeline/searching-events-in-sidebar.md) - Search and filter JavaScript timeline events in real time — results appear in a sidebar agenda as you type, clicking the event navigates to date. - [External Date Navigation](https://demo.mobiscroll.com/timeline/navigate-view-from-external-calendar.md) - Use a two-panel JavaScript Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly. - [Role-Based Access](https://demo.mobiscroll.com/timeline/role-based-views-with-different-permission.md) - Implement role-based access in a JavaScript Timeline: managers edit all tasks, employees edit their own, and clients have read-only access. ### Templating - [Event Appearance & Time Buffers](https://demo.mobiscroll.com/timeline/timeline-custom-event-rendering.md) - Customize event layouts on a JavaScript Timeline with icons, labels, and colors — visualize before/after buffers for travel, prep, or inspection workflows. - [Custom Cell Content](https://demo.mobiscroll.com/timeline/dynamic-cell-content-template.md) - Add workload badges, status icons, and a hover quick-add button to each JavaScript Timeline cell — and cap events per cell. - [Header and Footer Template](https://demo.mobiscroll.com/timeline/hour-day-week-month-quarter-year-header-footer-template.md) - Customize time-scale headers and add occupancy footers to a JavaScript Timeline — format cells from hour to year and display per-slot utilization. - [Employee Shift Slots](https://demo.mobiscroll.com/timeline/shift-template.md) - Build a JavaScript Timeline with custom shift slot headers — replace hourly intervals with Morning and Afternoon, each with its own time range and color. - [Resource Header Customization](https://demo.mobiscroll.com/timeline/resource-header-template.md) - Add custom filters, labels, or contextual UI to JavaScript Timeline resource headers — useful for room booking and resource scheduling views. - [Custom Event Tooltip](https://demo.mobiscroll.com/timeline/custom-event-tooltip.md) - Show native, Mobiscroll popup, or third-party tooltips on the JavaScript timeline events — control hover behavior with event callbacks. - [Resource Row Height](https://demo.mobiscroll.com/timeline/setting-row-height.md) - Set fixed heights for resource rows, control parent row sizing, and remove bottom gutter spacing on a JavaScript Timeline using CSS overrides. ### Drag & drop - [Drag, Move & Resize Events](https://demo.mobiscroll.com/timeline/move-resize-drag-drop-to-create-events.md) - Drag to create, move, resize, and delete events on a JavaScript Timeline — toggle each action per event and set snap resolution for all drag operations. - [Drag & Drop Restrictions per Event & Resource](https://demo.mobiscroll.com/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, move, and resize on a JavaScript Timeline per event, resource, or globally — lock events in time, fix length, or prevent resource switches. - [Cross-Instance Drag and Drop](https://demo.mobiscroll.com/timeline/drag-drop-between-calendar-instances.md) - Drag and drop events between two JavaScript Timeline views to reassign resources or coordinate schedules — enable cross-timeline transfers. - [Prevent Event Overlap](https://demo.mobiscroll.com/timeline/prevent-double-booking-events.md) - Prevent double booking on the JavaScript Timeline — block overlaps per event, per resource, or globally, and show a toast on conflict. - [Schedule from External Lists](https://demo.mobiscroll.com/timeline/external-drag-drop-sortable-dragula.md) - Drag items from Mobiscroll, SortableJS or Dragula lists onto the JavaScript Timeline to schedule them — drag events back off to unschedule. ### Resources - [Resource Footers & Revenue Sidebar](https://demo.mobiscroll.com/timeline/timeline-resource-details-side-panel-footer.md) - Add custom resource column footers, a revenue sidebar, and per-day occupancy to a JavaScript resource timeline — all column headers are sortable. - [Resource Grouping & Hierarchy](https://demo.mobiscroll.com/timeline/resource-grouping-hierarchy.md) - Build a JavaScript resource timeline with collapsible nested groups, pinned resources, and per-group event creation controls. - [Resource Group Aggregate Summaries](https://demo.mobiscroll.com/timeline/show-summaries-aggregates-for-resource-groups.md) - Show aggregate totals in parent resource rows on a JavaScript Timeline — summary values recalculate as bookings are added, changed, or removed. - [Resource Drag & Drop Reorder](https://demo.mobiscroll.com/timeline/resource-drag-drop-reorder.md) - Reorder resources on the JavaScript Timeline by drag and drop — each row shows a drag handle, and an update callback runs on drop. - [Dynamic Resource Sort](https://demo.mobiscroll.com/timeline/dynamic-calculation-resource-sort.md) - Sort JavaScript Timeline resources by metrics — a header popup ranks trucks by standby, payload, or deadhead time, reordering on event changes. - [Resource Properties](https://demo.mobiscroll.com/timeline/resource-data-structure.md) - Define resource properties on the JavaScript Timeline — set up nested groups, fixed rows, and per-resource drag, resize, and overlap controls. - [Resource Hover Tooltip](https://demo.mobiscroll.com/timeline/display-resource-information-on-hover.md) - Hover over a resource row in the JavaScript Timeline to open a tooltip popup with scheduled hours — keeps the timeline view clean. ### Event data structure - [Event Data Structure](https://demo.mobiscroll.com/timeline/event-data-structure.md) - Define event properties for a JavaScript Timeline — titles, dates, colors, resource and slot assignments, recurrence, buffer times, and per-event drag/resize control. - [Linked Events & Dependencies](https://demo.mobiscroll.com/timeline/connecting-linking-events-arrows.md) - Link JavaScript Timeline events with arrows to visualize task dependencies — set finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections. - [Date Formats](https://demo.mobiscroll.com/timeline/date-object-ISO-8601-moment.md) - Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the JavaScript Timeline. - [Recurring Events](https://demo.mobiscroll.com/timeline/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events on the JavaScript Timeline — set recurrence rules, exclude dates with the interactive configurator. ### Loading events & data sources - [Load Inline Events](https://demo.mobiscroll.com/timeline/load-inline-data.md) - Add events to a JavaScript Timeline by passing an inline event array — see how the event object is structured. - [Events from Remote API](https://demo.mobiscroll.com/timeline/load-events-from-remote-api.md) - Populate the JavaScript Timeline with events fetched from a remote API — pass a data array and keep events in sync. - [Load Events on Demand](https://demo.mobiscroll.com/timeline/load-events-on-demand.md) - Load timeline events on demand — fetch only the visible time range from a remote or local source using the JavaScript Timeline. - [Virtual Scrolling](https://demo.mobiscroll.com/timeline/load-events-on-scroll.md) - Load events on scroll with a virtualized JavaScript Timeline — only the visible date range is fetched, keeping large resource timelines responsive. - [Load Resources on Demand](https://demo.mobiscroll.com/timeline/load-resources-on-demand.md) - Build hierarchical resource scheduling interfaces with on-demand data loading — the JavaScript Timeline fetches child resources. - [Load Resources on Scroll](https://demo.mobiscroll.com/timeline/load-resources-on-scroll.md) - Build responsive large-resource scheduling timelines with the JavaScript Timeline — use virtual scrolling to load only visible resource rows on demand. - [Large Dataset Performance](https://demo.mobiscroll.com/timeline/loading-big-data-sets.md) - Handle thousands of events and resources in a JavaScript Timeline — virtual scrolling keeps navigation smooth across long date ranges on mobile and desktop. ### Third party calendar integrations - [Google Calendar Sync](https://demo.mobiscroll.com/timeline/sync-events-google-calendar.md) - Load Google Calendar events onto the JavaScript Timeline — authenticate users, display calendars as resources, and sync changes back to Google Calendar. - [Outlook Calendar Sync](https://demo.mobiscroll.com/timeline/sync-events-outlook-calendar.md) - Display Outlook Calendar events on a JavaScript Timeline — each calendar as a separate resource row. - [Load Events from Google Calendar](https://demo.mobiscroll.com/timeline/load-events-from-google-calendar.md) - Load public Google Calendar events into a JavaScript Timeline — show holiday calendars as resource rows using a Calendar ID and API key. ### CRUD operations - [CRUD Events](https://demo.mobiscroll.com/timeline/create-read-update-delete-CRUD.md) - Add, edit, move, resize, and delete events on a JavaScript Timeline — drag or double-click to create; set color, dates and all-day options in a dialog. - [Block Past Event Creation](https://demo.mobiscroll.com/timeline/disallow-past-event-creation.md) - Keep past dates read-only on a JavaScript resource timeline — block creation, moving, and resizing, and show a toast for blocked actions. - [Multi-Select & Bulk Event Actions](https://demo.mobiscroll.com/timeline/event-bulk-actions-edit-delete-update.md) - Select multiple events on a JavaScript Timeline by keyboard shortcut or button, then apply bulk delete or update — a side panel tracks the selection. ### Customizing the look & feel - [Cell Hover Highlight](https://demo.mobiscroll.com/timeline/dynamic-resource-column-highlight-on-cell-hover.md) - Add row and column hover highlighting to the JavaScript resource timeline — highlight the active resource row and date column on cell hover. - [Custom Time Range Backgrounds](https://demo.mobiscroll.com/timeline/colors-invalids-css-class.md) - Style time range backgrounds and blocked periods on a JavaScript Timeline using CSS classes — mark recurring hours or special days. - [Theme Customization](https://demo.mobiscroll.com/timeline/themes-ios-material-windows.md) - Style the JavaScript Timeline with iOS, Material, or Windows themes — switch light/dark variants, use the theme builder for colors, or apply CSS overrides. - [Resource Row Styling](https://demo.mobiscroll.com/timeline/resource-background.md) - Highlight resource rows on a JavaScript Timeline using background colors or CSS classes — differentiate teams, show status, or style headers and grid sections. ### Localization & tapping into the lifecycle - [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/timeline/gregorian-jalali-hijri.md) - Use the JavaScript Timeline with Gregorian, Jalali, or Hijri calendar systems — switch by locale to build scheduling interfaces for Persian. - [Event Hooks](https://demo.mobiscroll.com/timeline/event-hooks.md) - Explore JavaScript Timeline lifecycle hooks — see hooks fire on event clicks, initialization, and date changes, tracked in a live event log. - [Multi-Language Support](https://demo.mobiscroll.com/timeline/localization.md) - Localize the JavaScript Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support. - [RTL Layout](https://demo.mobiscroll.com/timeline/rtl-right-to-left.md) - Build RTL scheduling interfaces with the JavaScript Timeline — set direction or inherit it from locale settings to support right-to-left language users. ## Your data and external calendars The Timeline renders the event and resource information supplied by your application. You can use your own data and services without connecting any external calendar account. **Need to bring in your users' calendars?** [Mobiscroll Connect](https://mobiscroll.com/connect) is the separate calendar connectivity layer for Google Calendar, Outlook, Apple Calendar and CalDAV. It provides account connection, authentication, normalized calendar data and synchronization. **Mobiscroll Connect is sold separately** and is not required to use the Timeline. ## Frequently asked questions ### What is a resource timeline scheduler? A resource timeline scheduler displays time horizontally and resources vertically, so users can see when people, teams, rooms or equipment are booked or assigned. Mobiscroll's Timeline is a configurable view of its Event Calendar component for building this kind of resource scheduling and planning interface. ### What is the difference between the Timeline and Scheduler views? The Timeline displays resources in horizontal rows with time running left to right, which is useful for resource allocation and work spanning many days or months. The Scheduler is a vertical time grid organized around hours and days, with resources shown as columns. Both belong to the Event Calendar component. Compare the layouts in the [Timeline and time-grid example](https://demo.mobiscroll.com/timeline/timeline-time-grid). ### Can I use Timeline as a horizontal scheduler or resource calendar? Yes. Use the Timeline view to create a horizontal schedule with resource rows, time columns, draggable events and configurable ranges. It is suitable for resource calendars, allocation boards and planning views, including schedules that extend across multiple weeks or months ([range configuration](https://demo.mobiscroll.com/timeline/daily-weekly-monthly-yearly-timeline)). ### Is Mobiscroll Timeline a Gantt chart? It can be used to build a Gantt-style project timeline: display task bars, progress indicators, grouped resources and links between events ([task connections](https://demo.mobiscroll.com/timeline/connecting-linking-events-arrows), [progress display](https://demo.mobiscroll.com/timeline/show-task-progress-on-event)). It is a UI component, not a complete project-management engine with automatic dependency rescheduling, critical-path analysis or resource-leveling algorithms. ### Can I group resources into teams or hierarchies? Yes. Resources can have nested child resources, allowing a hierarchy such as region, site, building and room. You can expand or collapse groups, customize resource rendering and reorder resources through the UI ([resource hierarchies](https://demo.mobiscroll.com/timeline/resource-grouping-hierarchy), [resource ordering](https://demo.mobiscroll.com/timeline/resource-drag-drop-reorder)). ### Can an event appear on more than one resource row? Yes. A single event can reference multiple resources and appear in their respective rows while remaining one event in your data. This helps when the same job requires people and equipment at once; see [resource assignments](https://mobiscroll.com/docs/javascript/eventcalendar/resources). ### Can I create and move events by dragging them? Yes. Configure event creation, moving and resizing through drag and drop, including moving events between resource rows and dragging work from outside the timeline ([drag editing](https://demo.mobiscroll.com/timeline/move-resize-drag-drop-to-create-events), [external drag and drop](https://demo.mobiscroll.com/timeline/external-drag-drop-sortable-dragula)). You can restrict interactions by event and resource. ### Does the Timeline calculate capacity or prevent double bookings automatically? The Timeline can visualize resource assignments, display aggregate summaries and apply UI restrictions for invalid time ranges or overlapping events ([resource summaries](https://demo.mobiscroll.com/timeline/show-summaries-aggregates-for-resource-groups), [overlap restrictions](https://demo.mobiscroll.com/timeline/prevent-double-booking-events)). Your application supplies its authoritative capacity rules and validates concurrent changes when saving; the Timeline is not an automatic optimization or booking backend. ### Can I connect my existing API and database? Yes. Pass your own events and resources to the component, load them from a remote API and request data as users navigate or scroll. Handle changes using event callbacks to connect the Timeline to your application's persistence logic ([remote API events](https://demo.mobiscroll.com/timeline/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/timeline/load-events-on-demand)). ### Can the Timeline handle hundreds of resources or large schedules? The Timeline uses virtualized horizontal and vertical rendering, and supports loading event or resource data as it becomes relevant. This is designed for resource-heavy schedules without rendering every row and date at once ([load resources on scroll](https://demo.mobiscroll.com/timeline/load-resources-on-scroll), [large data example](https://demo.mobiscroll.com/timeline/loading-big-data-sets)). Performance still depends on the application's data and custom rendering. ### Does the Timeline work on phones and tablets? Yes. The Timeline supports touch interaction and responsive configuration. You can show a shorter date range or a different layout on smaller screens while keeping more detailed resource planning on larger displays ([Timeline view configuration](https://mobiscroll.com/docs/javascript/eventcalendar/timeline)). ### Is the Timeline accessible? Mobiscroll provides keyboard and screen-reader support and documents its alignment with WCAG 2.2 A and AA criteria, but does not claim full AA compliance. For drag-and-drop workflows, provide an accessible alternative such as an edit dialog or assignment form. See [Event Calendar keyboard support](https://mobiscroll.com/docs/javascript/eventcalendar/accessibility) and [WCAG support and limitations](https://mobiscroll.com/docs/javascript/core-concepts/accessibility). ### Is Mobiscroll Timeline free or open source? No. The Timeline is part of commercially licensed Mobiscroll UI, with a free trial to evaluate it. Internal-project and multi-customer SaaS licensing are different; see [Mobiscroll pricing](https://mobiscroll.com/pricing). ### Can I install it from the public npm registry? No. Mobiscroll packages are distributed through Mobiscroll's private npm registry, configured through the Mobiscroll CLI. A downloaded package is also available for supported installation paths. Use the installation guide linked in Getting started for the chosen framework. ### Can AI coding assistants help build with Timeline? Yes. Mobiscroll provides an MCP server, agent skills and framework-specific guidance, along with AI-readable documentation and demo code. The [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) describes setup for Claude Code, Codex, Cursor and GitHub Copilot. Generated scheduling logic and UI behavior should be tested in your application. ### Do I need Mobiscroll Connect for Timeline? No. The Timeline uses your own event and resource data. Mobiscroll Connect is a separate product, sold separately, for connecting Google, Outlook, Apple Calendar and CalDAV accounts when external calendar connectivity is needed. ### Can I use Timeline in a SaaS product? Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers as well as licenses for internal projects. Compare the [Mobiscroll UI license options](https://mobiscroll.com/pricing). ### Can I migrate from FullCalendar, Bryntum or DHTMLX? Mobiscroll provides migration guides covering component configuration, event data and implementation patterns: [FullCalendar](https://mobiscroll.com/docs/javascript/guides/migrating-from-fullcalendar-to-mobiscroll), [Bryntum](https://mobiscroll.com/docs/javascript/guides/migrating-from-bryntum-to-mobiscroll) and [DHTMLX](https://mobiscroll.com/docs/javascript/guides/migrating-from-dhtmlx-to-mobiscroll). Check the relevant features rather than assuming every scheduling or project-management workflow maps one to one. ### Can I use Timeline without a framework or bundler? Yes. A plain HTML page can include a downloaded Mobiscroll JavaScript and CSS package, then initialize the Timeline with `mobiscroll.eventcalendar()`. No frontend framework, bundler or CLI is required for this path ([plain JavaScript installation](https://mobiscroll.com/docs/javascript/getting-started/installation)). ## Licensing The Timeline is a view of the Event Calendar component in Mobiscroll UI. Internal projects use the appropriate Scheduling & calendaring or broader UI license; software delivered to multiple customers can use Calendaring for SaaS. Licensing and optional features such as the print module vary by package. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing). ## Ready to build a resource planning timeline? Start with the working Timeline example above, explore the demos and use their source code as a starting point, or follow the [AI Tooling guide](https://mobiscroll.com/docs/javascript/guides/ai-integration) to work with a coding assistant. The [Timeline API and view documentation](https://mobiscroll.com/docs/javascript/eventcalendar/timeline) is available when you need to configure a specific layout or interaction. ## Built for JavaScript A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages. - **Installation:** CLI and npm for bundled applications, or a downloaded JavaScript and CSS package for plain HTML pages. - **ESM:** an ESM bundle is available for modern build tools ([ESM 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 Timeline](https://demo.mobiscroll.com/jquery/timeline.md) - Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection. - [Angular Timeline](https://demo.mobiscroll.com/angular/timeline.md) - Native Angular components, not wrappers, that use Angular's own rendering and change detection. - [React Timeline](https://demo.mobiscroll.com/react/timeline.md) - Native React components, not wrappers, built on React's virtual DOM and state management. - [Vue Timeline](https://demo.mobiscroll.com/vue/timeline.md) - Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.