Display non-consecutive months in a calendar

Question

I'm working on a mobile-first interface where users will be able to choose a range of dates. Most users will want to use date ranges occurring in the near future. However, there are users who will want to see dates in the distant past and future.

Because of these different use cases, I want to allow users to type in the dates they want in the text fields AND choose dates from a calendar view.

In my wireframe below, the calendar widget has dropdowns for the month & year so users can easily navigate longer time ranges. So, the starting date month and ending date month may have many months in between.

How do I indicate that these are not consecutive months and that the user is selecting all dates in between?

Answer 1

You already do with the top line, showing when the start and end dates are, but yes it is potentially confusing when looking just at the visuals. On the last calendar app I worked on a few years back, this problem was worse because the standard phone screen size was 4" (aka iPhone 5); now, assuming you aren't too worried about that viewport (though plenty own an iPhone SE), there's enough real estate to display more.

There are a few easy ways to solve the problem:

1. Display text/image that indicates continuation - Don't have the calendars connect directly. Instead, have a break between them and show either via text, an image, or an emoji (since that's all the rage now) that it is a continuation, not two sets of ranges.
2. Do not display selectable calendar months - This is a more intrusive approach, where instead of showing two months that users can select through, you only allow for users to enter the range, and on doing so they may receive a month view dropdown/selector. This remedies any chance for confusion because the user will have to manually move the end date month to their desired month.

There's also a solution between these two which I think could work better: use a calendar selector that displays the full year by month, instead of full months with selectable dates. Something like Windows does natively:

That way users, when selecting a start and end date, choose the month (or have the option to go from the existing month with that month's own view) and have the option to view the entire year to select that the full range. Following this method also allows you the opportunity to include additional ranges, because that's no longer a limitation of the UI (aka more available room), though frankly this isn't easy tech to build. Then again, it's been a few years since I've worked on mobile calendars...there's probably something open source that's available.

Answer 2

I much prefer a visual indicator of the months in between the starting and ending dates so users don't have to click too many times to make their selection. I've been exploring other sites to see how they display non-consecutive dates. I couldn't find a travel site which showed anything except consecutive dates. Then I remembered seeing something similar in Doodle polls where the times in between look folded up. Does this option seem clear? Or do you think users will think they can click the folded portion to view additional options?

Answer 3

Overlay your calendars (or move the THRU down to the second calendar), and to show continuity, change "start" and "end" to "from" and "thru", continue your grey overlay, and lay in the dates from the succeeding/preceding months (I didn't spend a lot of time on the sketch, but I hope it's illustrative anyway)