Business requirements:

Our company provides services. A service has a start time and a duration. Customers can book a service only when one of our employees is available, thus our employees must have a way to set their availability during the day.

I am creating a (web) mobile app for our employees and I am wondering what the best way is to implement such a feature.

Currently our solution is not user-friendly. The user picks a date (from a calendar) and fills two inputs: start hour and end hour. The problem is that the user doesn't have a clear view (visually) how his day looks like and because of this they add multiple overlapping availabilities, they are confused sometimes, because they didn't notice they are available at some point in time etc.

I came up with two ideas:
The first one is based on multiselect with hourly ranges:

The second one is more custom:

Do you have any other ideas? The primary goal is that it must be easily accessible on mobile devices; forget about the desktop.


1 Answer 1


I would suggest using a calendar day view, like in the Apple and Google Calendar apps - no need to reinvent the wheel.

With different colored blocks, you could even show which slots have been scheduled by a client.

mock day view

quick aside, I am pretty sure Google Apps offers this kind of thing as a feature, any particular reason you are building it yourself?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.