JavaScript Calendar and Scheduler Tutorials

React: Activity Planning System (Node, Express, PostgreSQL)
React: Activity Planning System (Node, Express, PostgreSQL)
Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
Simple web application that displays tennis court availability and lets the users create a reservation using drag and drop. Includes a PHP project with sample MySQL/SQLite database.
ASP.NET Core Shift Planning (Entity Framework, .NET 10)
ASP.NET Core Shift Planning (Entity Framework, .NET 10)
This tutorial explains how to create a visual ASP.NET Core application for scheduling shifts (multiple locations and employees). It uses a modern UI that lets you manage shifts using drag and drop.
JavaScript Calendar for Touch Devices (iPad, iPhone, Android)
JavaScript Calendar for Touch Devices (iPad, iPhone, Android)
Adding touch-friendly controls to the JavaScript event calendar using active areas - move handle, resize handle, delete button, and context menu with SVG icons.
JavaScript Calendar: Selecting and Highlighting Columns
JavaScript Calendar: Selecting and Highlighting Columns
How to select and highlight calendar columns on header click.
React Yearly Scheduling Calendar
React Yearly Scheduling Calendar
Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.
ASP.NET Core Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 10)
ASP.NET Core Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 10)
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.
Tutorial: ASP.NET Core Hotel Room Booking App
Tutorial: ASP.NET Core Hotel Room Booking App
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 Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP application that lets you record restaurant table reservations and find a free table using a visual user interface. With MySQL database storage.
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 10)
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 10)
ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).
JavaScript Scheduler: Switching Day/Week/Month Views
JavaScript Scheduler: Switching Day/Week/Month Views
How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
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.
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Vue Date Picker with Free/Busy Highlighting (Open-Source)
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.
JavaScript Scheduler: Event Types
JavaScript Scheduler: Event Types
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.
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.
React Scheduler: Rendering JSX in Events
React Scheduler: Rendering JSX in Events
How to render custom JSX in events displayed by the React Scheduler component.
JavaScript Date Picker: Using Diagonal Cell Split to Show Partial Free/Busy State
JavaScript Date Picker: Using Diagonal Cell Split to Show Partial Free/Busy State
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.
React Resource Calendar with Editable Columns (Open-Source)
React Resource Calendar with Editable Columns (Open-Source)
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.
Vue Monthly Calendar/Scheduler (Open-Source)
Vue Monthly Calendar/Scheduler (Open-Source)
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 Calendar with Date Picker (Open-Source)
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
Previous Articles 41-60 of 190 Next