Monthly Calendar Tutorials

How to create a visual, color-coded, and easily adjustable maintenance schedule in ASP.NET Core using DayPilot Lite, the open-source calendar/scheduling UI library.

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

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.

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 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.

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

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 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.

How to limit the number of concurrent events displayed by the monthly calendar and add an "expand" button to access the events.

Drag and drop monthly event calendar for JavaScript/HTML5. Full calendar CSS styling support. Includes a sample PHP backend with SQL database.

How to export the monthly calendar to a PDF document using the built-in image export feature. Adds custom text to the exported PDF file.

A quick start Angular 5 project that displays appointments and events using a monthly calendar UI component.

This tutorial shows how to display full day/week/month event calendar with a toolbar for switching the view. Includes C# and VB.NET source code and a sample SQL Server database.

A quick start project that shows how to use DayPilot Monthly Calendar in an Angular 4 project (built using Angular CLI 1.0).

How to create an AJAX monthly event calendar using DayPilot Lite for ASP.NET MVC (open-source).