Calendar Tutorials and Examples

How to select and highlight calendar columns on header click.

Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.

How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.

How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.

Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.

How to use a popup date picker to select a date displayed by the React Calendar component.

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.

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.

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.

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.

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

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.

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.

Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.

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.

Learn how to enable drag and drop column reordering and resizing for the JavaScript resource calendar component.