Main Calendar: Design Ideas

[Restuta]

Gather and post UI/UX-related ideas here.

InVision

Good ideas has to be extracted to corresponding issues and crossed out. This is an on-going issue that is not supposed to be "done".

Umbrella #22

[Restuta]

Done!

Idea 1 – Short month names at the beginning of the month

When it's an end and beginning of the month it's easy to get lost what are you looking at. Trello solves this by assigning short month names to dates at edges:

Apple Calendar app on El Capitan does similar thing, omitting prev month name:

Fantastical does this also

[Restuta]

(PLANNED) Idea 2 – sunrise/sunset in calendar

See #24

[Restuta]

Idea 3 – Minimap of the year

Sometimes I feel lost when I scroll calendar, I think it would be nice to show minimap of the entire year on the side, like sublime does for documents:

Can be done as vertical version of the famous Github's contributions calendar(or can be even kept horizontal):

Idea 3.1 - Minimap for filtering and search

Same or similar minimap can be used to show real-time version of calendar when search or filtering is used. This would get better idea of how many events got filtered or left in a calendar.

Idea 3.2—Minimap for "Browse Calendars Page" that immediately gives a context of how many events are there in calendars, layout can look like below, but with style from Github

[Restuta]

Idea 4 – Year view of events

Like this (Fantastical):

[Restuta]

Idea 5 – Days from now

It might be useful to show a tooltip (or some other way) when a user hovers a day in the calendar that says "8 days from today". This gives more context and better feel on how far is something is future or how far back in was in the past.

[Me4ta]

Idea 4 – Year view of events I think in our calendar we can show the number of events for each day in the year view. I mean don't use color for it, but numbers (if this different colors mean some intensity or load)

[Restuta]

@Me4ta yes colors mean intensity. We may use a different representation of amount of events, but I think it will be hard if it's going to be another number, since we already have "a number" in every cell, it's that day's calendar number. So fitting two numbers in a cell is hard.

But, apart from color (heat-map) we can take an approach Fantastical takes:

or white

Those dot's represent events and color represent a particular calendar that even belong to. For us color would represent type of the event. What do you think?

[Me4ta]

Oh, I really like this idea with dots. It's amazing, simple, clear and useful.

[Restuta]

Idea 6 – Weather and Rain Notifications

It's useful to know the weather for upcoming events and get notifications if there is high chance of rain or strong wind. For some people rain is a "no" factor and therefore it's important to get notified about somewhat extreme weather conditions.

E.g. her here is how Outlook for Web shows weather:

related #80

[Restuta]

Idea 7 — (small) UI element to show duration

We can use it to show duration between events or between different fields for the same event or for anything really that requires duration

[Restuta]

Idea 8 — Living guide that follows scrolling

We can use similar idea for navigation, maybe vertical one. This theoretically might allow for better "where I am now " solution

http://rosemarybutcher.com/

alternative approach would be to use time-line-like progress bar at the bottom like here

or like on https://www.discourse.org

or another vertical version:

from https://httpster.net/2016/jul/

[Restuta]

Idea 9 — Use different colors for different months and seasons

This would allow people to visually distinguish between month while scrolling. Take a look at how Basecamp 3 approaches this:

[Restuta]

Idea — 10 Year Scroll Progress indicator

Similar to Reading Indicator here https://codyhouse.co/demo/reading-progress-indicator/index.html

[Restuta]

Idea - 11 Quick filtering of Events with Hanging Filters

Allow quick filtering while scrolling calendar with hanging buttons like here:

It gives minimal distractions and can provide access to frequently used filtering like "crits or TT's or non-competitive events"

See it live at http://dataparis.io/#

[Restuta]

Idea 11 — Show on top of a calendar next upcoming race, e.g. here is now meetup.com does it:

[Restuta]

Idea 12 – Horizontal view for days for mobile

Inspired by week view in Calendars App

[Restuta]

Idea 13 - Show two events in one row for wide screens to use space more efficiently.

On L and XL screens we don't use space that great, but we can if we would show two events in a row in wide columns for calendars that have majority of events on Sat-Sun:

This way we use 50-70% of screen space, compare this to normal layout:

[Restuta]

Idea 14 — Make our main page to have scrolling inline

(more like training peaks calendar and Trello, so we don't have to rely on sticky headers).

This would require some absolute positioning and important features are:

• [ ] have a frozen top navbar and header
• [ ] have scrolling outside of container and taking full screen space
• [ ] make the entire area scroll, so there is no chance to miss scroll target

This would require:

• [ ] setting overflow:hidden on body
• [ ] absolutely positioning calendar
• [ ] optionally custom scrollbar (https://css-tricks.com/custom-scrollbars-in-webkit/)
• [ ] url should change while we scroll (like Trello does: calendar/2016/04)

[Restuta]

Idea 15 — Compact view

Give an option to view calendar in "Compact mode" when every Cars has fixed height of 4 (two lines of text):

TBD what clicking on a card should do? Expand a card or show Event Details? I think it should be consistent and show Event Details but each card can have an icon to expand

[Restuta]

Idea 16 — Calendar page layout inspired by google

see it live https://trends.google.com/trends/

--

Could present a calendar in a more modern way and give space for controls and UI elements