I currently have a side project going where I am learning AngularJS, the side project I am working on is a web based room bookings application.
So imagine you are an employee of a company, and you want to book an hour at one of the many meeting rooms available at the company building.
When it comes to the UI of room booking systems, I have seen some shocking stuff, stuff that will make the people on Dribbble pull their hair out, but no matter how bad the styling, I've always seen two approaches taken.
Approach 1:
Room Schedule view as a Calendar where the user can see what meetings are booked on what days by looking at the calendar, he/she can then add a meeting by clicking on the calendar itself in the spot he/she wants the meeting and book a meeting there and then. Similar to this (only decent one I can find)
Approach 2:
To book a room you basically have a form with input fields specifying the date, time and location that you would like to book the meeting room.
Which approach do you think is best? more intuitive and user friendly? Do you have better examples?
My Vision:
When I was thinking about this, I was asking myself, "wouldn't it be nice to have a CAD drawing of the building, where users can click the actual room, see a schedule and then make a booking?" .. but I'm not sure than can be achieved in HTML5/CSS3/JavaScript. I do not want to use Flash (I know it can be done in that).
Any feedback and help would be greatly appreciated.
Thank You.