DayPilot Code - Scheduling Tutorials and Source Code

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.

html5 javascript scheduler php hotel reservation mysql row-header-columns

Angular Scheduler: CSS Themes

How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.

angular angular21 scheduler css theme zoneless open-source

Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

angular angular21 scheduler performance lazy-loading code-splitting typescript 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.

vuejs navigator date-picker open-source javascript free-busy composition-api vue3

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 customization open-source

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.

javascript scheduler drag-drop open-source

Next.js Monthly Calendar (Open-Source)

Learn how to build a customized monthly calendar UI in Next.js 16 using the open-source DayPilot scheduling library.

next.js react typescript month open-source jsx nextjs16 react19

Angular Calendar: Date Switching

How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.

angular angular21 event-calendar navigator date-picker open-source typescript zoneless

React Scheduler: Rendering JSX in Events

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

react react19 scheduler javascript jsx open-source

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.

javascript date-picker reservation navigator open-source

Angular Date Picker with Drag & Drop Range Selection (Open-Source)

How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).

date-picker navigator open-source angular angular21 typescript zoneless

Spring Boot Resource-Scheduling Calendar (Open Source)

Vue Date Picker with Free/Busy Highlighting (Open-Source)

Angular Calendar: Date Switching

Products

Resources

Tools

About Us

DayPilot Pro