React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
How to define custom time segments in the Scheduler time headers. In this example, we will display a special header that will highlight work weeks and weekends.
HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.
How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.
How to mark selected days as disabled and prevent adding, moving, and resizing events. You can use this technique to disable days in the past, weekends, holidays or other dates.
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.
When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).
This tutorial shows how to create a PHP application that will let users manage and schedule work orders using a visual interface implemented using JavaScript/HTML5.
How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.