JavaScript Calendar and Scheduler Tutorials

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

Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.

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.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

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.

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

How to create a resource-scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.

How to link the JavaScript Scheduler component to a date picker that can change the visible date.

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

How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.

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.