Skip to content
DayPilot

All Tutorials

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.
How to Add Interactive Elements to Vue Scheduler Events Using Templates

How to Add Interactive Elements to Vue Scheduler Events Using Templates

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.
Vue Scheduler: Using Cell Templates to Show Slot Prices

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.
Angular Scheduler: How to Disable Time Slots

Angular Scheduler: How to Disable Time Slots

How to disable selected time slots of the Angular Scheduler using drag and drop.
Next.js Scheduler with Horizontal Timeline (Open-Source)

Next.js Scheduler with Horizontal Timeline (Open-Source)

Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.
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.
Angular Gantt Chart: Full Screen Layout

Angular Gantt Chart: Full Screen Layout

How to integrate the Angular Gantt chart component into a page with a full-screen layout. Get rid of duplicate vertical scrollbars and fix the time header.
Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions

Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions

How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.
Angular Calendar: Full Screen Layout

Angular Calendar: Full Screen Layout

How to configure the Angular calendar component to use 100% height and fill the available space.
React Scheduler: PDF Export/Printing

React Scheduler: PDF Export/Printing

How to export the current React Scheduler view to a multi-page PDF document with a specified number of rows per page.