Previous versions of the tutorial for Angular 4 and Angular 5 also available for download

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Scheduler UI Builder

This project was generated using Scheduler UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable Angular 6 project.

By default, the PHP backend projects uses SQLite database (it automatically creates and initializes a new db file on startup, just make sure the process has write permissions for the web app directory).

You can switch to MySQL by updating the _db.php to include _db_mysql.php instead of _db_sqlite.php. Don't forget to edit MySQL connection parameters at the top of the _db_mysql.php ($server, $port, $username, and $password variables).

Note that PHP 7 is required (backend_login.php script uses random_bytes() function which is only available in PHP 7).

2. Runing the Angular project

First, it's necessary to download the NPM dependencies:

npm install

You can run the Angular project using npm:

npm run start

The Angular project uses a proxy to redirect relative "/api/*" URLs to the PHP web server running on port 8090.

proxy.conf.json

{
"/api": {
"target": "http://localhost:8090",
"secure": false
}
}

Full Screen Scheduler Layout with Integrated Sidebar

This project integrates the Scheduler in a page with full-screen layout. This is explained in more details in the following tutorial:

Changing the Reservation Month

This project uses the Navigator component in a collapsible sidebar on the left side of the page to change the date currently visible in the Scheduler. For more details on using the Navigator please see the following tutorial:

Loading Room Reservations

Reservations are loaded using viewChange() event handler. This event is fired whenever the Scheduler is updated because of a configuration change ("config" attribute). The event handler calls DataService.getReservations() and limits the events to the date range that is currently visible in the Scheduler (visibleStart()/visibleEnd() methods).

ASP.NET MVC 5 application for hotel room booking. It keeps track of the rooms and reservations, showing the available slots, reservation and payment status. Drag and drop reservation scheduling is supported.

Simple appointment scheduling application built using Angular 6. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.