JavaScript Calendar and Scheduler Tutorials

Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.

Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.

How to customize the Vue Scheduler row header using Vue templates: add icons, badges, buttons and Vue components.

How to render custom React JSX components in the Scheduler time header and upper-left corner.

How to insert React components or direct JSX into Scheduler row headers.

How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.

How to configure the JavaScript Scheduler component to display global and resource-specific holidays and prevent user actions in holiday cells.

A tutorial that shows how to create a PHP shift planning system - a web application that lets you manage shifts for multiple locations using a visual JavaScript scheduler component.

You can use the zoom feature in the Calendar to define custom magnification levels. Users can zoom using a slider or the [-] and [+] buttons.

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

Tutorial with source code - a web application for scheduling dependent machine/production jobs, implemented in Spring Boot (Java).

The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.

Copy multiple Scheduler events using copy & paste or using drag and drop.

Learn how to use the Vue Scheduler component to add a drag-and-drop timesheet UI to your Vue application, calculate daily totals and style the timesheet using CSS.

Simple React application that displays a project schedule using a Gantt Chart component.

How to limit drag and drop time range selection to the specified number of cells.

How to select Scheduler rows using checkboxes displayed in the row header.

How to configure DayPilot JavaScript Calendar to create a custom view that displays a yearly calendar where each column represents one month, and each cell represents one day.

How to implement a field service scheduling application in ASP.NET Core, with visual representation of travel time, route planning, and real-time constraint enforcement.

How to implement custom snap-to-grid rules in the JavaScript Scheduler component.