Images on grid

Am Trying to achieve a room booking feature. So when the user selects the start datetime and end datetime and checks availability I need to populate the data as shown in the grid. The circle with whites are available and the blacks indicates its non available. I have different approaches in mind but just wanted to check what would be the best approach to achieve the same.
Requirement in short - The user enters start n end datetime, query the booking table get the date and time booking history for the user selected date, then i have to display it hourly for the day in the grid as shown.

Thanks in Advance... !!!

OriginalPostID-256205