JavaScript Calendar and Scheduler Tutorials

This page lists tutorials that show how to create a scheduling web application for various fields, such as internal company use (timesheetproductionshared resource reservation), services (doctor appointment schedulinghotel room reservation), and project management.

Beginners can start with basic tutorials that explain the basic concepts like installation and initial configuration of the the components (e.g. HTML5 Scheduler). Experienced users can continue with more advanced projects that show how to use the Scheduler in a real-world scenario. There are also tutorials that demonstrate specific features of the scheduler and calendar components (dynamic loadingPDF exportinfinite scrolling). If you are looking for a specific use case which is missing, you can drop us a note in the forum.

All calendar and scheduler tutorials include a downloadable project with source code. You can use the project source code to start your own implementation and save some time with the initial setup and configuration. The tutorial text explains the key areas of the code and shows different views and options using screenshots.

The projects use HTML5 and plain JavaScript interface for the frontend (UI). Most of the tutorial use PHP as the server-side technology for the backend (REST API), but there are also tutorials for other server-side technologies (ASP.NET CoreSpring Boot).

There is also an online configurator tool available that lets you customize selected properties of the components. It shows the changes immediately using a live preview. You can use it to create a quick proof-of-concept project - the configurator will generate a downloadable project that includes the dependencies and the selected component configuration.

In addition to vanilla JavaScript, DayPilot also supports popular JavaScript client-side frameworks, including AngularJSAngularReact, and Vue.js.

JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
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.
JavaScript Monthly Calendar: How to Disable Selected Days
JavaScript Monthly Calendar: How to Disable Selected Days
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.
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: How to Unschedule Events
JavaScript Scheduler: How to Unschedule Events
When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).
ASP.NET Core Timesheet
ASP.NET Core Timesheet
How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 6) with SQL Server and Entity Framework.
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
How to Add Custom Progress Bar to React Scheduler Events
How to Add Custom Progress Bar to React Scheduler Events
The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.
React: Milestone Scheduler
React: Milestone Scheduler
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
HTML5/JavaScript Event Calendar (Open-Source)
HTML5/JavaScript Event Calendar (Open-Source)
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.
JavaScript Scheduler: Zoom
JavaScript Scheduler: Zoom
How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.
PHP Work Order Scheduler (JavaScript/HTML5 and MySQL)
PHP Work Order Scheduler (JavaScript/HTML5 and MySQL)
This tutorial shows how to create a PHP application that will let users manage and schedule work orders using a visual interface implemented using JavaScript/HTML5.
Vue Scheduler: Availability/Utilization Histogram
Vue Scheduler: Availability/Utilization Histogram
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
Vue.js Weekly Calendar Tutorial (Open-Source)
Vue.js Weekly Calendar Tutorial (Open-Source)
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 Weekly Calendar Tutorial (Open-Source)
React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
ASP.NET Core Monthly Calendar (.NET 5, JavaScript/HTML5)
ASP.NET Core Monthly Calendar (.NET 5, JavaScript/HTML5)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio 2019 project for download.
React Scheduler: Large Datasets and Performance
React Scheduler: Large Datasets and Performance
What things to look at when you are not happy with the React Scheduler component performance.
React Calendar: Rendering JSX in Events
React Calendar: Rendering JSX in Events
How to render custom JSX components in events displayed by the React Calendar component.
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 6)
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 6)
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 slot) and doctor (manage existing appointments).
React Scheduler: How to Search Events
React Scheduler: How to Search Events
Learn how to search React Scheduler events, highlight the search text and jump between results using Next and Previous buttons.
JavaScript Monthly Calendar: Max Events + Expand Button
JavaScript Monthly Calendar: Max Events + Expand Button
How to limit the number of concurrent events displayed by the monthly calendar and add an "expand" button to access the events.
Articles 1-20 of 147 Next