JavaScript Calendar and Scheduler Tutorials

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

ASP.NET Core application with drag and drop UI that lets you assign and schedule work orders. Includes a queue of unscheduled tasks, graphical team availability/utilization, context menu with additional actions, dialog for editing work order details.

Learn how to build an ASP.NET Core-based hotel room booking management application featuring a drag-and-drop interface, filter functionality, integration with SQL Server and Entity Framework, all visualized using a JavaScript Scheduler component.

PHP application that lets you record restaurant table reservations and find a free table using a visual user interface. With MySQL database storage.

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

A tutorial that shows how to create a PHP reservation system for hotel rooms with JavaScript/HTML5 frontend. The user interface includes a visual scheduling calendar with drag and drop support. MySQL and SQLite databases.

Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.

How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.

How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.

How to render custom JSX in events displayed by the React Scheduler component.

How to use diagonal cell overlays in a JavaScript date picker to highlight full and partial day occupancy, common in hospitality reservation and availability views.

How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.

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.

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.

Use the Vue calendar component to display an interactive schedule for multiple resources.

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.