Support calendars less than a year long

I’d like to show a range of dates, ex. 3 months, without showing the entire calendar year. I see that you can use the from and to to specify the year that you want, but I’d like to only show the dates starting and ending on the from and to dates.

Perhaps a prop to opt in / out of this behavior?

Happy to help with a PR if you agree. THANK YOU for all of your hard work, this is an amazing library!

Related: https://github.com/plouc/nivo/issues/203

[kristiehowboutdat]

Having granularity of months would be awesome and should solve most use cases smaller than a year that involve a calendar specifically.

Proposal: Use a prop granularity that is either "month" or "year" with a default of "year" for existing compatibility. This is slightly more flexible than a boolean prop showMonths or something because it allows for future iteration on the string values without changing the API. I would be happy to change the name of the prop, not feeling creative at the moment.

// Show the entire calendar year of 2018
// default granularity="year"
<Calendar from="01-01-2018" to="03-31-2018" ... />

// Show the entire calendar year of 2018
<Calendar from="01-01-2018" to="03-31-2018" granularity="year" ... />

// Show only the (entire) months of Jan, Feb, March
<Calendar from="01-01-2018" to="03-31-2018" granularity="month" />

// Show only the (entire) months of Jan, Feb, March, April
<Calendar from="01-01-2018" to="04-01-2018" granularity="month" />

Is that the correct understanding? Where in the last example we would show the entire month of April, not just the first week of April?

[diegosps]

Hi, guys. I finished implementing this on my fork.

The proposed solution by @kristiehowboutdat: <Calendar from="02-01-2018" to="05-01-2018" granularity="month" monthBorderColor="purple" monthBorderWidth={4} />

would give us this:

I went a step further and added the following:

granularity: PropTypes.oneOf(['year', 'month']).isRequired,
breakpoint: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
weekDirection: PropTypes.oneOf(['auto', 'horizontal', 'vertical']).isRequired,

This way we can achieve a n (n from 1 until breakpoint) months/years per direction and choose the week layout to render. For example: <Calendar from="01-01-2020" to="12-31-2020" direction="horizontal" granularity="month" weekDirection="horizontal" monthSpacing={20} yearSpacing={30} breakpoint={3} monthBorderWidth={0}/>

Produces:

As you can notice, this results in some year properties having a weird name because they now refer to blocks.

Also, I can’t submit a PR yet because the code base is the one from #1040.

So, feel free to revise both codes and do comments and changes to improve it (lacks website and api documentation, for example) Cya