React-dates: How can I change date's cell size

[erjantj]

Hello!
Love this plugin! One reason is that it is very customizable. But when I tried to change the date's cell size I found that it build with table element, and width and height of the cell are not set in css, but hardcoded in javascript. How can I change date's cell size?

[majapw]

Hi @erjantj, the DateRangePicker and SingleDatePicker component both take a daySize prop that you can set to a specific pixel value. The reason for this number to be in JS instead of CSS is due to how the animations are affected.

You can see how this is done in the storybook example in https://github.com/airbnb/react-dates/blob/master/stories/DateRangePicker_calendar.js#L57-L59

[NathanCH]

@majapw just a heads up daySize prop doesn't appear in documentation, but does appear in the storybooks. That's what brought me here.

[majapw]

Whoops! You're right.

[majapw]

Should be addressed here! - https://github.com/airbnb/react-dates/commit/c96a2371f82ee7ffee3af78a9f1f6c9c47397846

[pheu]

Changing daySize does not take any effect in my case, is there more legit way of changing a cell size?

[Zara603]

daySize set the width and height -1, is there a way to set width and height to different values?