DayPilot Code - Scheduling Tutorials and Source Code

Angular Calendar: Day/Week/Month Views (Open-Source)

Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.

Vue Scheduler: Row Header Templates

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

vuejs scheduler template javascript vue3 open-source

React Scheduler: Rendering JSX in Time Header and Upper-Left Corner

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

react react19 scheduler javascript jsx open-source

React Scheduler: Rendering JSX Components in Row Headers

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

react scheduler component jsx javascript react19 open-source

Vue Scheduler: Availability/Utilization Histogram

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

vuejs scheduler utilization availability javascript composition-api vue3

Angular 22 Scheduler Quick Start Project

A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 22 calendar/scheduler application.

angular scheduler typescript quick-start angular22 zoneless

Angular Scheduler: Row Filtering

Angular application with real-time filtering of Scheduler component rows (by name, by number of events).

angular angular21 scheduler typescript filtering

React Scheduler: External Drag and Drop

How to activate external items so they can be dragged to the React Scheduler component.

react react19 scheduler jsx drag-drop javascript

JavaScript Scheduler: Displaying Holidays

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

javascript scheduler holidays disable open-source

PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)

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.

php scheduler shift mysql html5 javascript row-header-columns