Calendar Tutorials and Examples

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 create an integrated day, week, and month calendar view with a shared data source in Next.js.

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.

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.

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

How to detect mobile device rotation and switch the Angular Calendar view accordingly.

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.

How to mark selected days as disabled and prevent adding, moving, and resizing events. You can use this technique to disable days in the past, weekends, holidays or other dates.

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.

Web application with Angular calendar component configured to display a custom set of days as columns.