Web applications for making reservations often do not make full use of the dynamic possibilities of current web browsers. It is not uncommon that you have to fill out the entire reservation before you find out that the desired time slots are not available. A friendlier approach is to show the available times dynamically, by disallowing a reservation to be made for unavailable times.
The app on the left-hand side is a basic calendar for browsing and canceling reservations. It would typically run on a tablet (use this link for a non-embedded version). The blue numbers in each day cell show the number of reservations, followed by the total number of people in parentheses. When a day is selected, the times in the bottom row (18h - 24h) can be selected to list the reservations for the corresponding hour. The maximum number of people for each half-hour time slot is 12.
On the right-hand side is the app for making reservations, which is designed to run on a mobile phone (use this link). If you select the number of people and a date, only the available times for that time are enabled.
The reservation system handles multiple simultaneous users and updates dynamically. Hence, newly made reservations will show up in the calendar, and will also grey out time selection buttons in the reservation app if the current reservation would exceed the maximum of 12 people. You can test this by setting up a reservation for 8 people and selecting a date and time, but not pressing Confirm. Then, open a separate reservation app and set up and confirm another 8-person reservation for that same date and time. After a couple of seconds, the chosen time button in the first reservation will be deselected and disabled. If the new reservation is deleted in the calendar, the time button becomes available again.