v9: navigation with centered captions

[ayuhito]

I've been trying to recreate the navigation chevrons with the months in between, but I haven't found a way to do it since the code is semantically very difficult to modify. As you can see in the documentation, even the examples are broken which probably indicates this is an unintended bug.

Expected Behavior

v8 Documentation

Actual Behavior

v9 Documentation

[berkerdemirer]

If you use tailwind to style you could do:

<DayPicker classNames={{
months: 'inline-flex gap-5 w-full justify-center
}} />

[gpbl]

@ayuhito thanks for trying out the new version! Yes the way the navigation works changed. Instead being rendered for each month (which was causing any sort of workaround to align the buttons), the navigation is rendered on top of the months.

You can add this CSS to restyle it:

.rdp-nav {
  left: 0;
  right: 0;
}

.rdp-button_next {
  position: absolute;
  right: 0;
}

.rdp-button_prev {
  position: absolute;
  left: 0;
}

.rdp-month_caption, .rdp-caption_label {
  justify-content: center;
}

(not sure if it works perfectly, but you got the idea).