Web Applications
![php shift planning tutorial javascript html5 mysql php shift planning tutorial javascript html5 mysql](https://javascript.daypilot.org/page/image/cvm3evibdjguha5prrebqezrfq/php-shift-planning-tutorial-javascript-html5-mysql.png)
- 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
![html5 doctor appointment scheduling javascript php mysql html5 doctor appointment scheduling javascript php mysql](https://javascript.daypilot.org/page/image/gafsdqlqtrcjnhkuu3sgspvb2i/html5-doctor-appointment-scheduling-javascript-php-mysql.png)
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)
![php machine production job scheduling mysql php machine production job scheduling mysql](https://javascript.daypilot.org/page/image/xmz76wv7snbbtdu2aycmwcbyaq/php-machine-production-job-scheduling-mysql.png)
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.
![php work order scheduler mysql javascript php work order scheduler mysql javascript](https://javascript.daypilot.org/page/image/f2fp3d2xtvgovn3ksu74hetvum/php-work-order-scheduler-mysql-javascript.png)
- 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 html5 hotel room booking javascript php](https://javascript.daypilot.org/page/image/snn4xtm66fhidkgzi4l5zjogr4/html5-hotel-room-booking-javascript-php.png)
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
![php restaurant table reservation system javascript html5 php restaurant table reservation system javascript html5](https://javascript.daypilot.org/page/image/dpoyqwrlcjdevjiwstmxmf6aji/php-restaurant-table-reservation-system-javascript-html5.png)
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.
![php tennis court reservation html5 javascript mysql php tennis court reservation html5 javascript mysql](https://javascript.daypilot.org/page/image/yo6kziv2xbfxhdm2hdwbcbt444/php-tennis-court-reservation-html5-javascript-mysql.png)
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
![javascript html5 timesheet php mysql javascript html5 timesheet php mysql](https://javascript.daypilot.org/page/image/msxsbjputrdzveqabp26ztjswi/javascript-html5-timesheet-php-mysql.png)
- 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 mysql php angular hotel room booking mysql php](https://javascript.daypilot.org/page/image/tmqf7tkaarfkhk7x2affzdn7wq/angular-hotel-room-booking-mysql-php.png)
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 tutorial html5 javascript mysql php annual leave scheduling tutorial html5 javascript mysql](https://javascript.daypilot.org/page/image/apwacy6pwncq5olxhd7324eyym/php-annual-leave-scheduling-tutorial-html5-javascript-mysql.png)
- 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
Next.js
Vue
Server-Side Platforms and Languages
ASP.NET Core
Spring Boot (Java)
PHP
Feature Showcase
JavaScript
Angular