1

I've been struggling with this for a while now and I think it was supposed to be pretty straightforward actually.

When using the DayPickerInput the calendar is just too small and I couldn't find a way to resize it.

Any ideas?

pflevy
  • 731
  • 7
  • 8

3 Answers3

4

I figured out a way of doing so by editing the css file https://github.com/gpbl/react-day-picker/blob/master/src/style.css

Just edit the font-size and it will resize the calendar.

 .DayPicker {
  display: inline-block;
  font-size: 2rem;
}
pflevy
  • 731
  • 7
  • 8
0

After reading this documentation https://react-day-picker.js.org/basics/styling , I succeeded in changing calendar width, by modyfing head_cell, table and day classes. ( you can check the full StyledElement list in this link : https://react-day-picker.js.org/api/types/StyledElement ).

<DayPicker
    mode="single"
    selected={selected}
    styles={{
      head_cell: {
        width: "60px",
      },
      table: {
        maxWidth: "none",
      },
      day: {
        margin: "auto",
      },
    }}
/>

Another trip : you can put the calendar in a div, and transform scale(1.2) it. Exemple:

<div style={{transform:"translate(1.2)"}}>
   <DayPicker
   //Your props
   />
</div>
elyes kacem
  • 11
  • 1
0

You can simply use the below code now:

.rdp {
  --rdp-cell-size: 40px; // set your custom size here
  // ...any other globale style props
}

see doc: https://react-day-picker.js.org/basics/styling

hijack
  • 381
  • 3
  • 11