Open-Source Calendar and Scheduler Tutorials

This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.

React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

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.

This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.

This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.

React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

How to create a resource-scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.

How to link the JavaScript Scheduler component to a date picker that can change the visible date.

HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.

How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.