DayPilot
Products
Support
DayPilot for JavaScript
Features
Tutorials
Open Source
Buy
Try
What's New

Tutorials

Web Applications

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

php shift planning tutorial javascript html5 mysql

  • The shift planning application displays an interactive shift plan, implemented using the JavaScript Scheduler component
  • You can plan shifts for multiple locations/positions
  • Each day is split into three 8-hour shifts
  • See all assignments for a selected location
  • Use drag and drop to move assignments between shifts and employees
  • PHP and MySQL used for the backend REST API
  • The shift scheduling tutorial is also available for React

Doctor Appointment Scheduling Application (JavaScript/PHP/MySQL)

html5 doctor appointment scheduling javascript php mysql

This doctor appointment scheduling web application includes public interface for patients, and private interface for doctors/managers.

  • Create pre-defined availability time slots for each doctor (1 hour by default).
  • Manage available slots (delete, add, create multiple slots at once using drag and drop).
  • Doctors can confirm appointment requests created by patients.
  • See slots of all doctors at once in a managers' view.
  • The application uses a REST backend created in PHP/MySQL.
  • This tutorial is also available for ASP.NET Core (.NET 6, C#, Entity Framework)

Machine/Production Job Scheduling Tutorial (PHP/MySQL)

php machine production job scheduling mysql

The production job scheduling application uses the JavaScript Scheduler component to highlighting job dependencies:

  • Machines are displayed on the Y axis, grouped by type.
  • The timeline only displays defined business hours (nights and weekends are hidden).
  • Jobs can be assigned to a machine at a specific time.
  • The job dependencies are displayed using links.
  • Lightweight PHP backend that exposes JSON API, MySQL database.
  • This machine/job production tutorial is also available for Java/Spring Boot.

Work Order Scheduler (PHP/MySQL)

php work order scheduler mysql javascript

  • Queue of unscheduled tasks (you can specify the estimated duration).
  • Schedule a task using drag and drop (assign a person and time).
  • Drag tasks from the queue to the scheduler and back.
  • Reorder tasks in the queue.
  • Context menu for additional work order actions (edit, delete, unschedule).
  • REST/JSON backend written in PHP.
  • There is also an Angular version of the work order tutorial based on the Angular Scheduler component.

HTML5 Hotel Room Booking (JavaScript/PHP/MySQL)

html5 hotel room booking javascript php

The hotel room booking web application uses JavaScript Scheduler to implement the reservation user interface.

  • configurable view (month/week)
  • room status (ready/dirty/cleanup in progress)
  • room filtering (by size)
  • drag and drop reservation creating and moving
  • reservation status with color highlighting
  • reservation editing modal dialog (guest name, paid amount)
  • check-in/check-out time at noon
  • REST API implemented in PHP/MySQL
  • simple MySQL database schema

Restaurant Table Reservation Application (JavaScript/HTML5 Frontend, PHP/MySQL Backend)

php restaurant table reservation system javascript html5

The table reservation application uses the JavaScript Scheduler component to manage restaurant reservations.

  • Frontend written in vanilla JavaScript.
  • Restaurant tables displayed in a tree hierarchy (grouped by location).
  • Users can filter tables by number of seats.
  • Users can filer tables by availability at a specified time.
  • The application uses a REST API backend, implemented using PHP/MySQL.
  • This tutorial is also available in Angular version that uses the Angular Scheduler component. 

HTML5 Tennis Court Reservation (PHP, JavaScript)

php tennis court reservation html5 javascript mysql

Web application for managing tennis court reservations.

  • see available time slots
  • create a new reservation using drag and drop
  • different prices for different times of day
  • uses a REST backend implemented in PHP

HTML5 Timesheet (JavaScript, PHP)

javascript html5 timesheet php mysql

  • HTML5 monthly timesheet, one day per row
  • Supports multiple users, switching using a <select> control
  • Displays day summary (total time) in day headers
  • Highlights business hours
  • Sample PHP backend with MySQL database
  • Drag and drop record creating, moving and resizing

Angular Hotel Room Booking (PHP/MySQL)

angular hotel room booking mysql php

The Angular hotel room booking and management application uses the Angular Scheduler component to visualize hotel room reservations.

  • Angular single page application for managing hotel reservations
  • Full-screen page layout to use all available space
  • Changing the visible month using date navigator
  • Custom check-in/check-out time (noon)
  • Basic room management (creating, updating, deleting)
  • Room status (ready, cleanup, dirty)
  • Reservation management (creating, moving, updating, deleting)
  • Reservation status (new, confirmed, arrived, checked-out)
  • Simple token-based authentication integrated
  • Includes a PHP/MySQL backend (with JSON-based endpoints)

PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)

php annual leave scheduling tutorial html5 javascript mysql

  • PHP annual leave scheduling and tracking system
  • Allows to schedule annual leave for each employee in half-day units
  • Displays total annual leave days for every person
  • Drag and drop support
  • MySQL database storage

Basic Tutorials

JavaScript

Angular

React

Vue

Server-Side Platforms and Languages

ASP.NET Core

Spring Boot (Java)

PHP

Feature Showcase

JavaScript

Angular

DayPilot Pro for JavaScript

Components

DayPilot Lite for JavaScript

Products

Tools

Resources

About Us

DayPilot

Event calendar/scheduling web components. Available for JavaScript, Angular, React, Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, shift scheduling, time tracking applications, personal and shared event calendars.