Add support for custom days in the Calendar component

Requested Behavior

The developer would have the ability use their own component in each day block in the Calendar. The component should also have access to the current day it is rendering, the selected date(s) on the calendar, and if the Calendar is handling range selection.

Example

Implementation

The Select component solves similar problems, and it does so by providing a function as the child for the component. I believe this is a good solution for the Calendar also.

The Calendar would now have a children prop that accepts a function. The function is passed 3 arguments :

1. day - the current day being rendered (string in ISO8601 format)
2. selected - the day(s) that is selected (string in ISO8601 format or array of strings in ISO8601 format)
3. inRange - whether the calendar is using range selection (boolean)

The Calendar would now have a fill prop which is a boolean. This tells the calendar to fill the width and height of the container, and that the days should have a width of 14.3%.

[cliffpyles]

I’ve taken a shot at it in PR #4508 . Please let me know if I’ve missed anything, or if there are additional changes you want me to make.

I was drawing a blank on what the correct treatment should be when using the fill property with daysOfWeek. The spacing for the days of the week are a little off. You should be able to see what I mean by navigating to the “Fill” Calendar story, or you can checkout the screenshot in the PR. Please let me know if you have any ideas.

In the Calendar I noticed the box-sizing isn’t currently set to border-box. Is that on purpose? If not would it be an issue to set it to border-box. I would think it would help with the style of the custom borders. Currently borders get cut off if they are applied.

Would an isAlternate property be helpful also? This would allow the developer to do things like apply alternating backgrounds on the cells.

[cliffpyles]

@ShimiSun Thanks again for all of your help! It can be closed!