--- title: "Vue Timeline & Gantt Chart Component | Mobiscroll" component: "Timeline" framework: "Vue" library_version: "6.1.5" url: "https://demo.mobiscroll.com/vue/timeline" --- # Vue event calendar timeline for resource, asset and project management Horizontally scrollable Vue timeline for Gantt style scheduling — day, week, month, and year views, multi-resource support, drag & drop, and CRUD. For Vue and Nuxt. Last update: Oct 16, 2026 Use it in **responsive mobile & desktop web apps** and **Ionic Vue projects** ## Description The timeline features a **horizontally scrollable view with multiple resource support** for **day, week, work-week, month, quarter, year or any custom configuration** with built-in templating, drag & drop, virtualization and more. The **four views - scheduler, calendar, timeline, agenda -** can be combined to create the user experience you need on **mobile, desktop and everything in-between**. Capabilities like **recurring events, all-day and multi-day events, responsiveness and multiple timezones** are supported by all views. ## Setting up the timeline - [Month View](https://demo.mobiscroll.com/vue/timeline/calendar-timeline.md) - Show all resources in a monthly Vue timeline — resources as rows, days as columns, with adjustable daily resolution. - [Time Grid and Timeline Layout](https://demo.mobiscroll.com/vue/timeline/timeline-time-grid.md) - Switch between a vertical time grid and a horizontal resource timeline in a Vue scheduler — set responsive to show each layout by screen size. - [Print and PDF Export](https://demo.mobiscroll.com/vue/timeline/printing-the-view.md) - Use the Vue 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/vue/timeline/employee-shifts.md) - Plan employee shifts on a Vue 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/vue/timeline/work-order-scheduling.md) - Schedule work orders across grouped resources — drivers, trucks, and contractors — on a Vue timeline. - [Timezone Meeting Planner](https://demo.mobiscroll.com/vue/timeline/timezone-meeting-planner.md) - Plan team meetings across time zones with the Vue Timeline — show per-resource availability in working, flex, and time-off blocks, with local-time events. - [Restaurant Shift Scheduling](https://demo.mobiscroll.com/vue/timeline/restaurant-shift-management.md) - Build a restaurant shift planning with Vue Timeline — organize staff by role, track occupancy per shift, and toggle shifts on or off. - [Meal Planner](https://demo.mobiscroll.com/vue/timeline/meal-planner.md) - Build a weekly meal planner with the Vue Timeline — meal types as color-coded resource rows, custom add/edit popover for creating or updating meals. - [Dynamic Resource Availability](https://demo.mobiscroll.com/vue/timeline/dynamically-color-and-invalidate.md) - Color-code resource rows and restrict drop zones by task type on a Vue Timeline — compatible resources turn green, incompatible ones gray during drag. - [Multi-Classroom Timetable](https://demo.mobiscroll.com/vue/timeline/multi-classroom-timetable.md) - Build a weekly classroom timetable with the Vue 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/vue/timeline/monthly-timetable-vertical-days-horizontal-times.md) - Display a monthly timetable in the Vue Timeline — days listed vertically, hours across, with drag-to-create in a single-resource layout. - [Compare Resources Fixed at Top](https://demo.mobiscroll.com/vue/timeline/compare-resources-fixed-at-top.md) - Use the Vue 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/vue/timeline/assign-unassign-work-orders-fixed-top-row.md) - Assign work orders to employees on a Vue 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/vue/timeline/check-list-tasks-within-events.md) - Render a task checklist inside each Vue 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/vue/timeline/flight-scheduling-two-synchronized-timelines.md) - Use synchronized Vue 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/vue/timeline/show-task-progress-on-event.md) - Show task completion progress on the Vue 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/vue/timeline/tasks-subtasks-under-shifts.md) - Display shifts and linked tasks on a Vue Timeline — group tasks under parent shifts and restrict movement to each shift's time range. - [Resource Search and Filtering](https://demo.mobiscroll.com/vue/timeline/resource-filtering-search.md) - Add live search and filter to a Vue Timeline resource header — multi-select by status or group, with a custom empty state and reset. - [External Resource Drag & Drop](https://demo.mobiscroll.com/vue/timeline/resource-management-with-dynamic-team-creation.md) - Drag external resources onto a Vue 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/vue/timeline/event-grouping-bulk-action.md) - Group Vue Timeline events into collapsible client/quarter blocks and bulk-drag groups — switch between assignee and work-type views on a full-year layout. - [36-Hour Rolling Window Schedule](https://demo.mobiscroll.com/vue/timeline/36-hour-rolling-window-aircraft-view.md) - Build a fleet scheduling view on the Vue Timeline — a 36-hour rolling window that auto-advances from the current hour. - [Drag People onto Events](https://demo.mobiscroll.com/vue/timeline/drop-assignee-on-event-from-list.md) - Build a team assignment interface on a Vue Timeline — drag people from an external list onto booked meetings. - [Transport Management](https://demo.mobiscroll.com/vue/timeline/truck-transport-planning-and-dispatch.md) - Build Vue Schedule views with external drag & drop of planned/unscheduled jobs, filtering and real-time validation. ## Configuring the view - [Day, Week, Month & Year Views](https://demo.mobiscroll.com/vue/timeline/daily-weekly-monthly-yearly-timeline.md) - Switch between day, week, month, and year views on the Vue Timeline — configure visible weekdays, working hours, and time scale per view. - [Multiple Time Scales](https://demo.mobiscroll.com/vue/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md) - Configure span and time scale on a Vue Timeline — switch day, week, month, quarter, or year views, set resolution, and show or hide empty rows. - [Calendar Zoom Levels](https://demo.mobiscroll.com/vue/timeline/calendar-zoom.md) - Add zoom controls to a Vue 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/vue/timeline/control-number-of-concurrently-shown-events.md) - Set a maximum number of concurrent events on a Vue Timeline — cap overlapping events per row and show an overflow indicator for hidden events. - [Event Buffer Time](https://demo.mobiscroll.com/vue/timeline/event-buffer.md) - Visualize buffer time on a Vue Timeline — show travel time, check-in/out, loading/unloading time, or preparation windows around scheduled events. - [Custom Range Picker View](https://demo.mobiscroll.com/vue/timeline/custom-range-view.md) - Replace the Vue 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/vue/timeline/custom-event-sort.md) - Set event order in Vue Timeline rows via per-event order value or a custom ordering function — useful for priority-based and dense weekly schedules. - [Equal Row Heights](https://demo.mobiscroll.com/vue/timeline/timeline-resource-height.md) - Keep all resource rows the same height on Vue Timeline — overlapping events distribute evenly within uniform rows, with CSS override for min-height. - [Variable Event Height](https://demo.mobiscroll.com/vue/timeline/variable-event-height.md) - Show Vue 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/vue/timeline/event-listing.md) - Show events as full-day labels on a Vue Timeline — useful for spotting overloaded resources and managing schedules without an hourly time grid. - [Day/Week View Switcher](https://demo.mobiscroll.com/vue/timeline/switching-day-week-work-week-timeline.md) - Build resource schedules with day, work-week, and full-week views on a Vue Timeline — switch views from the header to control time-grid detail. - [Data & Display Timezone](https://demo.mobiscroll.com/vue/timeline/setting-the-timezone.md) - Set separate data and display timezones on a Vue Timeline — configure per-resource event timezone display using Luxon, Moment-timezone, or Day.js. - [Multiple Timezone Support](https://demo.mobiscroll.com/vue/timeline/multiple-timezone-support.md) - Add a timezone-switcher dropdown to Vue Timeline header — users change display timezone on the fly, with data timezones configured independently. - [Event Search Sidebar](https://demo.mobiscroll.com/vue/timeline/searching-events-in-sidebar.md) - Search and filter Vue 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/vue/timeline/navigate-view-from-external-calendar.md) - Use a two-panel Vue Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly. - [Role-Based Access](https://demo.mobiscroll.com/vue/timeline/role-based-views-with-different-permission.md) - Implement role-based access in a Vue Timeline: managers edit all tasks, employees edit their own, and clients have read-only access. ## Templating - [Event Appearance & Time Buffers](https://demo.mobiscroll.com/vue/timeline/timeline-custom-event-rendering.md) - Customize event layouts on a Vue Timeline with icons, labels, and colors — visualize before/after buffers for travel, prep, or inspection workflows. - [Custom Cell Content](https://demo.mobiscroll.com/vue/timeline/dynamic-cell-content-template.md) - Add workload badges, status icons, and a hover quick-add button to each Vue Timeline cell — and cap events per cell. - [Header and Footer Template](https://demo.mobiscroll.com/vue/timeline/hour-day-week-month-quarter-year-header-footer-template.md) - Customize time-scale headers and add occupancy footers to a Vue Timeline — format cells from hour to year and display per-slot utilization. - [Employee Shift Slots](https://demo.mobiscroll.com/vue/timeline/shift-template.md) - Build a Vue 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/vue/timeline/resource-header-template.md) - Add custom filters, labels, or contextual UI to Vue Timeline resource headers — useful for room booking and resource scheduling views. - [Custom Event Tooltip](https://demo.mobiscroll.com/vue/timeline/custom-event-tooltip.md) - Display native, custom Mobiscroll, or third-party tooltips on Vue Timeline events — control hover behavior with event hover callbacks. - [Resource Row Height](https://demo.mobiscroll.com/vue/timeline/setting-row-height.md) - Set fixed heights for resource rows, control parent row sizing, and remove bottom gutter spacing on a Vue Timeline using CSS overrides. ## Drag & drop - [Drag, Move & Resize Events](https://demo.mobiscroll.com/vue/timeline/move-resize-drag-drop-to-create-events.md) - Drag to create, move, resize, and delete events on a Vue Timeline — toggle each action per event and set snap resolution for all drag operations. - [Drag & Drop Restrictions per Event & Resource](https://demo.mobiscroll.com/vue/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, move, and resize on a Vue 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/vue/timeline/drag-drop-between-calendar-instances.md) - Drag and drop events between two Vue Timeline views to reassign resources or coordinate schedules — enable cross-timeline transfers. - [Prevent Event Overlap](https://demo.mobiscroll.com/vue/timeline/prevent-double-booking-events.md) - Prevent double booking on the Vue Timeline — block overlaps per event, per resource, or globally, and show a toast on conflict. - [Schedule & Unschedule from External Lists](https://demo.mobiscroll.com/vue/timeline/external-drag-drop-sortable-dragula.md) - Connect SortableJS or Dragula lists to the Vue Timeline — drag items onto the timeline to schedule them, drag them back off to unschedule. ## Resources - [Resource Footers & Revenue Sidebar](https://demo.mobiscroll.com/vue/timeline/timeline-resource-details-side-panel-footer.md) - Add custom resource column footers, a revenue sidebar, and per-day occupancy to a Vue resource timeline — all column headers are sortable. - [Resource Grouping & Hierarchy](https://demo.mobiscroll.com/vue/timeline/resource-grouping-hierarchy.md) - Build a Vue resource timeline with collapsible nested groups, pinned resources, and per-group event creation controls. - [Resource Group Aggregate Summaries](https://demo.mobiscroll.com/vue/timeline/show-summaries-aggregates-for-resource-groups.md) - Show aggregate totals in parent resource rows on a Vue Timeline — summary values recalculate as bookings are added, changed, or removed. - [Resource Drag & Drop Reorder](https://demo.mobiscroll.com/vue/timeline/resource-drag-drop-reorder.md) - Reorder resources on the Vue 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/vue/timeline/dynamic-calculation-resource-sort.md) - Sort Vue 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/vue/timeline/resource-data-structure.md) - Define resource properties on the Vue Timeline — set up nested groups, fixed rows, and per-resource drag, resize, and overlap controls. - [Resource Hover Tooltip](https://demo.mobiscroll.com/vue/timeline/display-resource-information-on-hover.md) - Hover over a resource row in the Vue Timeline to open a tooltip popup with scheduled hours — keeps the timeline view clean. ## Event data structure - [Event Data Structure](https://demo.mobiscroll.com/vue/timeline/event-data-structure.md) - Define event properties for a Vue Timeline — titles, dates, colors, resource and slot assignments, recurrence, buffer times, and per-event drag/resize control. - [Linked Events & Dependencies](https://demo.mobiscroll.com/vue/timeline/connecting-linking-events-arrows.md) - Link Vue Timeline events with arrows to visualize task dependencies — set finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections. - [Date Input Formats](https://demo.mobiscroll.com/vue/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 Vue Timeline. - [Recurring Events](https://demo.mobiscroll.com/vue/timeline/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events on the Vue Timeline — set recurrence rules, exclude dates with the interactive configurator. ## Loading events & data sources - [Load Inline Events](https://demo.mobiscroll.com/vue/timeline/load-inline-data.md) - Add events to a Vue Timeline by passing an inline event array — see how the event object is structured. - [Events from Remote API](https://demo.mobiscroll.com/vue/timeline/load-events-from-remote-api.md) - Populate a Vue Timeline with events fetched from a REST API or JSON endpoint — pass a data array to the timeline and keep events in sync. - [Load Events on Demand](https://demo.mobiscroll.com/vue/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 Vue Timeline. - [Virtual Scrolling](https://demo.mobiscroll.com/vue/timeline/load-events-on-scroll.md) - Load events on scroll with a virtualized Vue Timeline — only the visible date range is fetched, keeping large resource timelines responsive. - [Load Resources on Demand](https://demo.mobiscroll.com/vue/timeline/load-resources-on-demand.md) - Build hierarchical resource scheduling interfaces with on-demand data loading — the Vue Timeline fetches child resources. - [Load Resources on Scroll](https://demo.mobiscroll.com/vue/timeline/load-resources-on-scroll.md) - Build responsive large-resource scheduling timelines with the Vue Timeline — use virtual scrolling to load only visible resource rows on demand. - [Large Dataset Performance](https://demo.mobiscroll.com/vue/timeline/loading-big-data-sets.md) - Handle thousands of events and resources in a Vue 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/vue/timeline/sync-events-google-calendar.md) - Load Google Calendar events onto a Vue Timeline — authenticate users, display calendars as resource rows, and sync changes back to Google Calendar. - [Outlook Calendar Sync](https://demo.mobiscroll.com/vue/timeline/sync-events-outlook-calendar.md) - Display Outlook Calendar events on a Vue Timeline — each calendar as a separate resource row. - [Load Events from Google Calendar](https://demo.mobiscroll.com/vue/timeline/load-events-from-google-calendar.md) - Load public Google Calendar events into a Vue Timeline — show holiday calendars as resource rows using a Calendar ID and API key. ## CRUD operations - [CRUD Events](https://demo.mobiscroll.com/vue/timeline/create-read-update-delete-CRUD.md) - Add, edit, move, resize, and delete events on a Vue 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/vue/timeline/disallow-past-event-creation.md) - Keep past dates read-only on a Vue resource timeline — block creation, moving, and resizing, and show a toast for blocked actions. - [Multi-Select & Bulk Event Actions](https://demo.mobiscroll.com/vue/timeline/event-bulk-actions-edit-delete-update.md) - Select multiple events on a Vue 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/vue/timeline/dynamic-resource-column-highlight-on-cell-hover.md) - Add row and column hover highlighting to a Vue resource timeline — highlight the active resource row and date column on hover. - [Custom Time Range Backgrounds](https://demo.mobiscroll.com/vue/timeline/colors-invalids-css-class.md) - Style time range backgrounds and blocked periods on a Vue Timeline using CSS classes — mark recurring hours or special days. - [Theme Customization](https://demo.mobiscroll.com/vue/timeline/themes-ios-material-windows.md) - Style the Vue 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/vue/timeline/resource-background.md) - Highlight resource rows on a Vue 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/vue/timeline/gregorian-jalali-hijri.md) - Use the Vue Timeline with Gregorian, Jalali, or Hijri calendar systems — switch by locale to build scheduling interfaces for Persian. - [Event Hooks](https://demo.mobiscroll.com/vue/timeline/event-hooks.md) - Explore Vue 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/vue/timeline/localization.md) - Localize the Vue Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support. - [RTL Layout](https://demo.mobiscroll.com/vue/timeline/rtl-right-to-left.md) - Build RTL scheduling interfaces with the Vue Timeline — set direction or inherit it from locale settings to support right-to-left language users.