I need to create a scheduling selector, but the user can't select ALL available times, but only the ones provided by the system's algorithm.

Something like when you call your dentist and the attendee says: "We have 05/08 @ 10:00 and 06/08 @ 11:30 available".

I thought in somethink like this:

[8:00 - 8:30] [10:00 - 10:30] [4:30pm - 5:00pm]

[9:00 - 9:30] [11:30 - 12:00] [3:30pm - 4:00pm]

It works, but it's not easy for the user to visualize the best available time.

Anyone has solved a problem like this?

  • Why do you say it's not easy for users to visualize the best available time? The approach you describe is commonly used for reservation systems.
    – tohster
    May 8, 2015 at 17:36
  • 1
    The horizontal visualization and the fact that you have 8:00 aligned with 9:00… I used the Calendar approach: cl.ly/aumg May 8, 2015 at 19:35

1 Answer 1


I would use a calendar-style layout for this sort of thing and only display the available time slots to the person (explicitly displaying the unavailable times might just confuse the person).

Here's an example, created with Google Calendar:

enter image description here


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.