Open-Source Calendar and Scheduler Tutorials

Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.

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.

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.

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.

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

Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.

How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.

Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.

How to customize the Vue Scheduler row header using Vue templates: add icons, badges, buttons and Vue components.

How to render custom React JSX components in the Scheduler time header and upper-left corner.

How to insert React components or direct JSX into Scheduler row headers.

How to configure the JavaScript Scheduler component to display global and resource-specific holidays and prevent user actions in holiday cells.

You can use the zoom feature in the Calendar to define custom magnification levels. Users can zoom using a slider or the [-] and [+] buttons.

How to render custom JSX components in events displayed by the React Calendar component.

Angular tutorial that shows how to implement undo/redo functionality for the DayPilot Lite Angular Scheduler UI component.

Client-side undo/redo implementation for the JavaScript Scheduler built with DayPilot Lite. Displays the full action history and the current position in the list.

How to create a visual, color-coded, and easily adjustable maintenance schedule in ASP.NET Core using DayPilot Lite, the open-source calendar/scheduling UI library.

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

Quick-start JavaScript Scheduler project using DayPilot Lite, a Vite frontend generated by the UI Builder, and a PHP 8 JSON API with SQLite by default and optional MySQL/PostgreSQL support.

How to switch the visible date range displayed by the Vue.js Scheduler using Previous and Next buttons.