Use Vue templates to add custom content to calendar cells: text, icons, or even Vue components. Use v-if to display content only in the cells you choose.
Jan 3, 2025
The following tutorials leverage Vue 3 and the composition API to build advanced calendar and scheduling applications with JavaScript/HTML5.
The basic tutorials demonstrate the initial setup of the Vue Scheduler component and explain how to manage and display data within the Vue framework. These include fundamental examples like displaying global and row-specific holidays and creating a drag-and-drop timesheet UI.
More complex tutorials, such as Vue Scheduler: Build a Reservation Application in 5 Minutes, illustrate how to utilize the Scheduler component in real-world applications. Whether you need to calculate resource utilization, integrate a queue of unscheduled tasks, or enhance events with custom Vue components, these tutorials provide comprehensive, practical guidance.
Each tutorial is designed to help you make the most of the Vue Scheduler component, offering downloadable source code and detailed explanations to support your development process. These resources will equip you with the tools to create robust, interactive scheduling applications.
There are also tutorials that use the Vue package of the open-source version of the DayPilot scheduling library.
How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.
Nov 29, 2024
How to customize row headers of the Vue Scheduler component using Vue templates - add icons, buttons, or Vue components.
Nov 19, 2024
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.
Nov 10, 2024
Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
Nov 5, 2024
Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.
Nov 1, 2024
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
Oct 1, 2024
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
Jul 15, 2024
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
Jul 12, 2024
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
Jun 25, 2024
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.
Jun 22, 2024
How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.
Jun 14, 2024
Learn how to enhance Vue Scheduler events with custom Vue components. Add dynamic content, interactive elements and apply custom styling.
Jan 2, 2024
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.
Dec 14, 2023
Use the Vue calendar component to display an interactive schedule for multiple resources.
Aug 7, 2023
Articles 1-15 of 15