React-dates: Ability to customize CalendarDay styles

Created on 5 Mar 2018 · 3Comments · Source: airbnb/react-dates

I have the requirement to conditionally render <CalendarDay /> styles (blacked out, highlighted range etc). These custom styles need to be applied differently to each day based on other factors.

I noticed for the storybook demo, you have actually had a <CustomizableCalendarDay /> component (however it's not exported and seems to be used only for storybook). https://github.com/airbnb/react-dates/blob/d9660019c8043349359f1fcf849f23cddbd083e3/stories/DateRangePicker_day.js#L135

I tried using this, however, this component does not pull styles from the theme provider and has a slightly different styling interface and thus would require recreating the entire theme just for this.

Is there any way in which I can customize the styles for individual days without having to duplicate the entire theme again?

Example:

<DayPickerRangeController
  ...
  renderCalendarDay={calandarDay}
/>

const calandarDay = (dayProps) =>{
  if(a) return <CalendarDay {...dayProps} />
  if(b) return <CalendarDay {...dayProps} /> // style this varient differently based on day value
}

Source