Vue Calendar and Scheduler Tutorials

The following Vue tutorials show how to use Vue calendar and scheduler components from DayPilot Pro to create a single-page scheduling application.

Vue.js is an open-source JavaScript framework that lets you create single-page web applications.

One of the big advantages over Angular and React is that no compilation is required and you can use the framework in existing HTML pages easily. The main concept is similar to other JavaScript frameworks but Vue.js is very light-weight and uses plain JavaScript. Vue.js integrates with existing pages very well and doesn’t impose a specific application structure. Recently, a package-based mode was introduced where the application gets compiled just like in Angular and React.

All JavaScript UI components that are available in DayPilot Pro for JavaScript are available for Vue.js (Daily Calendar, Weekly Calendar, Monthly Calendar, Scheduler, Gantt Chart, Kanban).

If you are looking for an open-source Vue calendar component, you may want to check the Vue.js Weekly Calendar Tutorial (Open-Source) tutorial.

For a quick introduction to using the Vue Scheduler component (which displays a timeline for multiple resources), please see the Vue Scheduler: Build a Reservation Application in 5 Minutes tutorial.

If you want to start with a quick testing project, you can use UI Builder online application to configure the Vue.js components and generate a new project including all dependencies.

Also, you can explore our Composition API calendar/scheduling tutorials.

Vue Scheduler: Components in Events
Vue Scheduler: Components in Events
Learn how to enhance Vue Scheduler events with custom Vue components. Add dynamic content, interactive elements and apply custom styling.
Vue Timesheet
Vue Timesheet
Learn how to use the Vue Scheduler component to add a drag-and-drop timesheet UI to your Vue application, calculate daily totals and style the timesheet using CSS.
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Vue Monthly Calendar/Scheduler (Open-Source)
Vue Monthly Calendar/Scheduler (Open-Source)
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.
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
Vue Scheduler: Availability/Utilization Histogram
Vue Scheduler: Availability/Utilization Histogram
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
Vue.js Weekly Calendar Tutorial (Open-Source)
Vue.js Weekly Calendar Tutorial (Open-Source)
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.
Vue Scheduler: On-Demand Event Loading
Vue Scheduler: On-Demand Event Loading
How to enable on-demand event loading in the Vue Scheduler component. The Scheduler will load events for the current viewport. Additional data will be loaded during scrolling.
Vue Gantt Chart Tutorial
Vue Gantt Chart Tutorial
Vue application that shows how to integrate and configure a Gantt chart. The Gantt chart component displays a timeline for a hierarchy of tasks and milestones.
Vue Scheduler: How to Display Holidays
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
Vue Scheduler: Undo/Redo for Drag and Drop Actions
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.
Vue Scheduler: Queue of  Unscheduled Tasks
Vue Scheduler: Queue of Unscheduled Tasks
How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.
Vue.js Scheduler Quick Start Tutorial
Vue.js Scheduler Quick Start Tutorial
Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.
Vue.js Scheduler: Changing Visible Date
Vue.js Scheduler: Changing Visible Date
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
Articles 1-15 of 15