Open-Source Calendar and Scheduler Tutorials

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.

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.

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

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

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.

Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).

Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.

Simple helper for replacing alert() with a more flexible HTML-based modal dialog with support for CSS styling.

Open-source JavaScript modal dialog with rich features. It can display custom HTML or a standalone page. Supports drag&drop moving and automatic height adjustment.

DayPilot Modal is now available as a NPM package (@daypilot/modal) and can be used in Angular applications as well.

This tutorial shows how to export calendar data in iCalendar format in an ASP.NET WebForms web application. Includes a sample Visual Studio 2017 project. Open-source.

ASP.NET WebForms application that shows how to use Microsoft Exchange server as an appointment storage for DayPilot Calendar. Loads existing appointments, creates new appointments and updates existing ones.

AngularJS web application that shows how to create a simple event calendar solution, displaying day and week view and date selector. Supports drag and drop event moving and resizing, event editing using a modal dialog. JSON-based PHP server-side backend.

How to display a Gantt chart with DayPilot Scheduler.

ASP.NET web application for creating fast project time to completion estimate. It displays a project overview using a Gantt chart. Resource schedule and availability is displayed in a Resources view.