I'm currently working on an availability calendar where the users will be able to see the available slots of a tutor that he has previously set.

Users can book a lesson by clicking on an available slot. I have come up with a basic calendar structure for this. However, It already looks like a mess. Appreciate your ideas to re-arrange design of the slots.

enter image description here


instead of repeating the available times under the days. You can put the time to the left side of the calendar.

This way user also can see which days are not available.

I also recommend you to put at least two lines between each time if the user can book e.g. 30 minutes appointment. But if they can only book 1 hour appointment then no line is needed.

Calendar view Hover

  • Thanks for your reply. I reckon this is a good approach however It's also taking quite a lot of space comparing to the design I have done. Do you have any idea to reduce the space a bit more ? – Mark Sep 23 '19 at 9:08
  • Reduce the space between days, change day name from full to "M","T",etc., reduce horizontal padding. This is the approach to go with - it really reduces the clutter. If you can't fit this layout in your target screen, I'd suggest a different layout - maybe list the days as headings, then the different available slots as buttons under the headings. – Quasipickle Sep 23 '19 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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