Calendar appointment scheduler in angular 19 with laravel 11 rest api

I'm trying to make a appointment scheduler app with a laravel 11 rest-api as backend and angular 19 as frontend, the idea is for a client to see a calendar with only the weekdays with hours that haven't been booked available. For example, the week of 2 - 8 of June has only the days 2,3,4,5 and 6 from 8AM to 3PM available.

Each service has a time it takes to complete and I want it to take the available time it takes to complete and make it unavailable, for example a haircut that takes 30 min to complete from 10:00 to 10:30 on Monday 2 and now that hour range has become unavailable.

For the backend I have just a table with each service and its duration alongside the appointments table with a start date and an end date.

What I need is some guidance on how to take that to frontend, I need a calendar where I can disable dates and times depending on the appointments already done, bonus if I also can disable holidays.

Any help or recommendations are welcomed.

Continue reading...