I'm making an MVC app and it's a calendar (kinda like Outlook's or Google's calendar).

It doesn't look right to me and I'm here for ideas from people who are good with UI/UX to help me improve the look of it. Particularly the Wednesday 7th item. Thanks!

Screenshot of the example calendar

  • 1
    The square with the pen in it, in each day, I assume that's to add an event to that day, what's the circle next to it? What platform and what devices do you intend to support? Commented Dec 30, 2016 at 11:12
  • This is just a personal mvc web app im making for myself. The pen icon is to add a new 'note' which is just opens a modal and has a few fields for title and comments. The clock is a similar add feature but it's a reminder. When the reminder hits the specified datetime, the user (me :D) will be able to choose whether to email or text the reminder to my cell.
    – tshoemake
    Commented Dec 30, 2016 at 11:18
  • OK, I think your question is too broad, if the calendar is for you, what doesn't "look right to me?" Commented Jan 3, 2017 at 9:06
  • You tell me. Jasmin did a great job of it. The question was just that, what can I do to make it look better.
    – tshoemake
    Commented Jan 3, 2017 at 9:19
  • No, you tell me, you're the end user, you are your own "user survey." Commented Jan 3, 2017 at 9:27

2 Answers 2


Here I gave solution with and image shown below. In this on 7 I gave example that how it will look when there is reminder or doc scheduled. And gave example on date 8 to schedule new reminder or to write new note. When user clicks on PLUS icon it will give two icons that is for Reminder and Note.

Hope this will help you. enter image description here

  • i like the idea of grouping the respective reminders and notes and adding a counter. I'm probably going to do that. Do you think it would look too cluttered if you click the plus on, say, Day 7 and have 4 icons?
    – tshoemake
    Commented Dec 30, 2016 at 11:14
  • Yes it would look cluttered if we keep 4 icons in 1 box that is why I combine two icons in one as plus. So if user wants to add new reminder or note then definitely they will understand that by clicking on plus they can add. So once user would click on plus, we'll give options to add as per choice. And one more reason to keep Plus is if we keep clock and note icon as it is(i.e. 4 icons in one box) as u kept earlier then user gets confused they would first click on the icon with number instead of only icon which shows to add new Reminder or Note. Commented Dec 30, 2016 at 11:26
  • So when I click the plus and the two icons show on a day that has both notes and reminders, it will have 4 icons. I think thats what i was trying to describe. Do you think in this scenario it'd look cluttered?
    – tshoemake
    Commented Dec 31, 2016 at 0:05
  • I am trying to visualization you the scenario that we show in Android floating button like we have in Xander. Commented Dec 31, 2016 at 7:15

There's several things I'd suggest, feel free to pick and choose.

  1. Users are used to calendars with fixed cell sizes, I'd advise against having them scale randomly based on what content is inside
  2. Contrast. Since everything content wise is the same color it all blends together. I'd keep the days soft, make content high contrast, and consider adding color to the icons to help distinguish them
  3. Consider adjusting the background color of the weekend cells, this helps users anchor themselves to quickly visually grok where a week starts/stops
  4. If stat holidays are tracked, display them with a special background color too so that users don't accidentally book events on invalid days
  5. Color "today" a special background color so that users can again find where they are in a given month
  6. Consider fading out (just a little) days shown in the previous / next month (if shown)
  7. Consider changing the styling of the "day name" headers to be different than the day cells (a reversed background/foreground would work well)... again this helps users locate things... eg user scans for Thursday first then vertically from there to find a "free" one
  8. IMHO, the day names (Sunday, Monday,...) should be center aligned vs left)
  9. It isn't clear to me what Month this calendar is for? Hierarchy wise it should be labeled at the top of the calendar

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.