Calendar & scheduling components

DayPilot for Vue

DayPilot Lite

Open Source Version

Apache License 2.0

Free for personal and commercial use

Demo Download

DayPilot Pro

Commercial Version

Includes advanced features.

From $649 · Pricing

Demo Try

Components

Calendar and scheduling views

Calendars, timelines and project planning. Expand a view for features, demos and tutorials.

Scheduler A horizontal timeline that shows resources as rows, with support for large data sets. LITE PRO

Docs

Lite version includes:

Drag-and-drop
CSS themes
Progressive rendering
Custom timescale
Snap to grid
Event icons
Custom event drag handles
Touch devices
Localization
Vue templates for events
Vue templates for cells
Undo/redo
XSS protection

Live demo · Tutorial

Pro version includes:

All Lite features
Non-continuous timeline
Frozen rows
PDF export
Image export
Excel export
Hierarchy of resources
Dynamic event loading during scrolling
Dependency links
Milestones
Mass drag-and-drop operations
Row header columns
Dragging events from and to an external source
Bubble popover
Zoom
Split resources
Disabled cells
Holidays
Skipping non-business hours
Hiding non-business hours
Row header width auto-fit
Keyboard navigation
Drag-and-drop row moving
Inline editing
Concurrent event groups
Row sorting
Row filtering
Vue templates for row headers
Vue templates for time headers
Overlap prevention
Infinite scrolling
Event versions
Event phases
Joint events are always moved and resized together
Resource utilization summary
Crosshair

Live demo · Tutorial

Resource Calendar A vertical timeline that shows resources as columns. LITE PRO

Docs

Lite version includes:

Drag-and-drop
CSS themes
Snap to grid
Event icons
Custom event content and styling
Undo/redo
Localization

Live demo · Tutorial

Pro version includes:

All Lite features
Drag-and-drop column moving and resizing
Column hierarchy
Column filtering
Column header height auto-fit
Custom timescale
Progressive rendering
PDF export
Image export
Bubble popover
Zoom
Disabled cells
Holidays
Touch devices

Live demo

Daily / Weekly Calendar An interactive day & week view with drag-and-drop and customizable cell duration. LITE PRO

Docs

Lite version includes:

Customizable cell duration
Drag-and-drop
Snap to grid
Customizable event, cell, and header content
Event icons
Custom event drag handles
Localization
RTL support
Configurable number of days
Context menu
Business hours
Holidays
Undo/redo
CSS themes
TypeScript

Live demo · Tutorial

Pro version includes:

All Lite features
Progressive rendering
High number columns with fixed width
All-day events
Touch devices
Bubble popover
Zoom
Disabled cells
Column header height auto-fit
Inline editing
Vue templates for events, cells and headers
Image export
PDF export
AutoScroll
Crosshair

Live demo

Monthly Calendar A month grid that displays days as cells. LITE PRO

Docs

Lite version includes:

Events spanning multiple days
Drag-and-drop event moving and resizing
Snap to grid
Event icons
Adjustable event height
Customizable event content and CSS
Built-in or custom delete icons
Localization
Context menu
Event tooltip
Business days
Holidays
CSS themes
TypeScript

Live demo · Tutorial

Pro version includes:

All Lite features
Touch devices
Bubble popover
Undo/redo
Disabled cells
Inline editing
Vue templates for events and cells
Image export
PDF export
RTL support
AutoScroll
Custom event drag handles
Full month or specified number of weeks
Maximum number of events per cell
Cell stacking mode

Live demo

Yearly Calendar A yearly calendar that shows months as rows. PRO

Pro version includes:

Drag-and-drop
Event spanning multiple days or months
CSS themes
Snap to grid
Event icons
Custom event drag handles
Touch devices
Localization
Progressive rendering
Fixed or automatic column width
PDF export
Image export
Bubble popover
Zoom
Undo/redo
Disabled cells
Holidays

Docs

Timesheet A timesheet view with one day per row and up to 24 hours on the horizonal axis. PRO

Horizontal timeline tailored for employee hours, project billing and utilization tracking.

Docs

Pro version includes:

Drag-and-drop
CSS themes
Snap to grid
Event icons
Custom event drag handles
Touch devices
Localization
Progressive rendering
PDF export
Image export
Excel export
Bubble popover
Zoom
Undo/redo
Disabled cells
Holidays
Hiding non-business hours
Row header width auto-fit
Keyboard navigation
Inline editing
Vue templates for events, cells and headers
Crosshair
Row header columns
TypeScript

Live demo · Tutorial

Gantt Chart A project timeline with tasks, links, and milestones. PRO

Project timeline with tasks, links, milestones, and drag-and-drop support.

Docs

Pro version includes:

Drag-and-drop
CSS themes
Snap to grid
Task icons
Milestones
Task groups
Touch devices
Localization
Progressive rendering
PDF export
Image export
Excel export
Bubble popover
Disabled cells
Drag and drop between two Gantt charts
Zoom
Undo/redo
Holidays
Hiding non-business hours
Row header width auto-fit
Inline editing
Vue templates for tasks, cells and headers
Crosshair
Task header columns
Task dependency highlighting using links (Start-to-Start, Start-to-Finish, Finish-to-Start, Finish-to-Finish)
Task progress bar
Large data sets
Non-linear timeline
Context menu
Custom time scale (minutes, hours, days, weeks, months, years)
Customizable task content (HTML, active areas)
TypeScript

Live demo · Tutorial

Kanban Board A column-based task board with optional horizontal swim-lanes. PRO

Docs

Pro version includes:

Drag-and-drop
CSS themes
Snap to grid
Card icons
Touch devices
Localization
Progressive rendering
Row header columns
Large number of columns with fixed width
Bubble popover
Row header width auto-fit
Keyboard navigation
Inline editing
Vue templates for cards, cells and headers
Crosshair
Card swim-lanes
Card customization (HTML, icons, active areas)
Context menu
Bubble popover
Card color-coding
TypeScript
External drag and drop
Drag and drop swimlane moving

Live demo

Trusted By

We helped thousands of customers create modern, beautiful scheduling applications that are used by millions of users.

Build & customize

Configure your next view

Generate a starting point and make it your own.

UI Builder

Build a custom component configuration.

Generate a Vue project.

Open UI Builder

Theme Designer

Create a CSS theme with a live preview.

Open Theme Designer

Start with source code

Selected open-source tutorials

Working examples with source code for Vue.

Calendar with Day, Week, and Month Views

Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.

Read Tutorial

Scheduler with Horizontal Timeline

Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.

Read Tutorial

Weekly Calendar

How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.

Read Tutorial

Monthly Calendar

How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.

Read Tutorial

Resource Calendar

Use the Vue calendar component to display an interactive schedule for multiple resources.

Read Tutorial

Vue Scheduler: Undo/Redo for Drag and Drop Actions

How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.

Read Tutorial

Vue Scheduler: Using Cell Templates to Show Slot Prices

How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.

Read Tutorial

Go further