Search code examples
javascriptreactjsreact-day-picker

How to make React-Day-Picker months side by side horizontally instead of vertically aligned


I am using the react-day-picker component and I have been able to make 2 months show up but they are presented on the screen one month on top of the other. How can I change this to be aligned horizontally?I have tried changing the CSS and using inline, but it does not work.

Here is how it looks now

     import React from 'react';
     import DayPicker from 'react-day-picker';
     import 'react-day-picker/lib/style.css';

export default function Example() {
  return <DayPicker numberOfMonths={2} />;
}

Solution

  • What you can try is adding this to you styles:

    .DayPicker-Months {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    

    You can see the actual example here: https://codesandbox.io/s/react-day-picker-base-yledo