The calendar is the most important and primary page of the frontend.

It shows all squares, its opening hours and its (anonymous) bookings per day. The single cells can be clicked for easy interaction. Cells of the past cannot be clicked anymore and are marked as over.



The left col displays the time blocks. The start and end time is determined by the earliest and latest opening hours of all squares. The time interval is determined by the smallest time block of all squares.

If one square is opened earlier that others, those other squares will be marked as closed in that time and cannot be clicked and booked until they open as well.

If the time blocks are choosen to be very long (e.g. half a day), the layout automatically switches to an alternative version where the time col is exchanged with the square row.


The currently displayed date can be changed via the buttons and inputs on the left top side of the calendar.

The arrows will jump one day backward or forward respectively. Alternatively, the desired date can be manually typed into the input field and submitted by pressing enter. When the input field is focused, an additional date picker will show up.

The calendar remembers the currently displayed date and will restore it on return - however, it will remember it only until the web browser is closed.

Mobile appearance

The calendar is responsive, that means it will adjust itself to the given screen size (on modern web browsers). Thus the smaller the screen size becomes, the less days will be displayed at once. Finally, on very small screens (like those of mobile devices) only one day will be visible.


Print friendliness

The calendar is also optimized for print, that means (again on modern web browsers) it can be printed efficiently without waste of space and ink. Or it can be exported to PDF this way.

It is recommended to choose the landscape format for this.


If you are logged in as an administration or assistant account (with proper privileges), the calendar will display bookings with the respective names of the users. Of course, bookings of the past will also be displayed then.

Does a square allow multiple bookings at once, the cell will be marked as free rather than booked, but either shows the name of the booking user (if one) or simply that it is already (partially) occupied (if many).

If two or more bookings overlap or exceed the maximum capacity of a square, the cell will be (visually) marked as conflict. The conflict can then be resolved by clicking the cell.

Created by: Tobias Krebs
Updated: June 2014