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.

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.
JavaScript Calendar: Drag All-Day Events to a Specific Time of Day
JavaScript Calendar: Drag All-Day Events to a Specific Time of Day
How to use the native HTML5 drag and drop API to extend the calendar functionality and allow dragging an all-day event to a selected calendar cell.
JavaScript Scheduler: Daily Task Queue
JavaScript Scheduler: Daily Task Queue
How to create a queue of tasks scheduled for a specific day. The exact time of day and resource can be assigned using drag and drop in the next step.
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.
JavaScript Calendar: Custom Drop Target for External Items
JavaScript Calendar: Custom Drop Target for External Items
How to drag items either to the JavaScript Calendar component or to a custom element.
JavaScript Scheduler NPM + WebPack Project
JavaScript Scheduler NPM + WebPack Project
How to use the JavaScript Scheduler component in a new NPM/WebPack project.
JavaScript Scheduler: How to Use the Keyboard API
JavaScript Scheduler: How to Use the Keyboard API
How to use the JavaScript Scheduler keyboard API to define custom hotkeys and override the default behavior.
JavaScript Scheduler: How to Show Summary Columns on the Right
JavaScript Scheduler: How to Show Summary Columns on the Right
How to display a special column with summary data on the right side of the JavaScript Scheduler grid.
Vue Gantt Chart Tutorial
Vue Gantt Chart Tutorial
Vue application that shows how to integrate and configure a Gantt chart. The Gantt chart component displays a timeline for a hierarchy of tasks and milestones.
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to display React JSX components in the Scheduler horizontal time header.
React Scheduler: Rendering JSX Component in Callout (Bubble)
React Scheduler: Rendering JSX Component in Callout (Bubble)
The React Scheduler allows defining the callout (bubble) content as a React JSX component. The component will be created automatically when the callout is activated and removed and unmounted when the callout is hidden.
DayPilot in a Mobile App (Cordova/PhoneGap)
DayPilot in a Mobile App (Cordova/PhoneGap)
Using DayPilot HTML5 event calendar in a mobile application (iOS, Android, Windows Phone) created using Cordova/PhoneGap.
JavaScript/HTML5 Scheduler PDF Export (Paged by Month)
JavaScript/HTML5 Scheduler PDF Export (Paged by Month)
Simple HTML web application that exports the Scheduler to PDF (client-side).
JavaScript Scheduler: How to Integrate a Date Picker
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
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.
React Scheduler Component Tutorial
React Scheduler Component Tutorial
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
JavaScript Calendar: Blocking Selected Dates
JavaScript Calendar: Blocking Selected Dates
Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP web application that allows to plan annual leave days using a visual HTML5 scheduler component.
Articles 1-20 of 126 Next