Open-Source Calendar and Scheduler Tutorials

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

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.

How to render custom React JSX component in the Scheduler grid cells.

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.

Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.

Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.

How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.

Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.

ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.

Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.

Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.

Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.

A Spring Boot application that uses a visual resource-scheduling calendar to display plans for multiple resources side by side.

The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.

Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.

How to implement a toggle that switches between the read-only and edit modes of the JavaScript Calendar. Read-only events are marked with a padlock icon in the upper-right corner.

Weekly HTML5/JavaScript event calendar with CSS themes, drag and drop support, date navigator. Sample PHP and ASP.NET Core projects with REST backend implementation.