Open-Source Calendar and Scheduler Tutorials

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.

How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

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.

How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.

How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.