Open-Source Calendar and Scheduler Tutorials

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.

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.

How to select and highlight calendar columns on header click.

Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.