Event Calendar Tutorials

Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.

Adding touch-friendly controls to the JavaScript event calendar using active areas - move handle, resize handle, delete button, and context menu with SVG icons.

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

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.

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.

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.

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.

Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.

ASP.NET WebForms web application that links the ASP.NET event calendar control with a Navigator (date picker) control.