Does the Day Picker Input calendar only open down and to the right?

Question

The calendar (so far) doesn't seem to account for collision detection when deciding the position of the calendar. For example :

In the screen shot you can see that the calendar goes off screen. Even if I disable horizontal scroll (overflow-x: hidden;), it still renders off screen.

Is there a solution to this without hacking away at the styles?

Via CSS is a bit difficult, if not impossible, since to move the overlay on the left you will need to know the window's size. Another user had a similar issue: https://github.com/gpbl/react-day-picker/issues/536, see my comment there :) — gpbl, Nov 15 '17 at 23:10

score 0 · Answer 1 · edited Mar 01 '19 at 04:13

react-day-picker's DayPickerInput API now has classNames which allows you to change the name of the classes for the overlay and the overlay wrapper. You are basically renaming them so that in your own CSS/LESS file, you can use that name to style the overlay and have it use that instead of the classes in the react-day-picker-style.css (which you should not try to change as a best practice).

If you want to change the default props for the overlay (calendar popup), then you would do something like this wherever you are creating the component:

createElement(DayPicker.Input,
    { //all other props 
        classNames: {
            overlay: "TheNewNameForTheClass", 
            overlayWrapper: "TheOtherNewNameForTheClass" 
        } 
    }
})

And then in your styling file, you would use TheNewNameForTheClass and TheOtherNewNameForTheClass to style the overlay.

The solution would have been collision detection. While this isn’t a bad enhancement in the library it’s a small shortcoming — Mark C., Mar 01 '19 at 00:53

Does the Day Picker Input calendar only open down and to the right?

1 Answers1