1

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

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
2
  • 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
    Commented Sep 23, 2019 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
    Commented Sep 23, 2019 at 22:52

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.