Force horizontal view in DatePicker (React)

Date and time pickers
1

I would like to opt for a horizontal calendar view in my DatePicker component.

This is my desired effect:
screenshot-2024-03-05_10-57

I have plenty of screen real-estate, and yet the calendar container does not fully expand to the desired width.

This is my React component:

import React from "react"
import { Datepicker, Select, Button } from "@mobiscroll/react"

function SearchPanel({ isMobile }: { isMobile: boolean }) {
  return (
    <>
      <div className="search-panel mbsc-padding">
        <div className="mbsc-grid">
          <div className="mbsc-row mbsc-justify-content-center">
            <div className="mbsc-col-md-3 mbsc-col-12">
              <Datepicker
                select="range"
                placeholder="Add Dates"
                controls={["calendar"]}
                inputStyle="box"
                calendarType="month"
                pages={2}
                display="anchored"
                calendarSize={isMobile ? 1 : 2}
                calendarScroll={isMobile ? "vertical" : "horizontal"}
                cssClass="date-range-picker"
                buttons={[
                  {
                    text: "Apply",
                    // handler: (event) => {
                    //   alert("Custom button clicked!")
                    // },
                    cssClass: "apply-date-range-button",
                  },
                ]}
              />
            </div>
            <div className="mbsc-col-md-2 mbsc-col-12">
              <Select
                display="bubble"
                placeholder="Add guests"
                inputStyle="box"
              ></Select>
            </div>
            <div className="mbsc-col-md-2 mbsc-col-12">
              <Select placeholder="Add additional's" inputStyle="box"></Select>
            </div>
            <div className="mbsc-col-md-2 mbsc-col-12">
              <Select placeholder="Add filters" inputStyle="box"></Select>
            </div>
            <div className="mbsc-col-md-2 mbsc-col-12">
              <Select placeholder="Add code" inputStyle="box"></Select>
            </div>
            <div className="mbsc-col-md-1 mbsc-col-12">
              <Button className="search-button">Search</Button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default SearchPanel

And my attempt at CSS styling to force the expanded horizontal view:

.mbsc-datepicker-control-calendar {
  width: 1000px;
}

.mbsc-popup-content {
  overflow: hidden;
}

My attempt at modifying the styles yeilds: a horizontal calendar, and hidden scrollbar, but the container width does not expand to fit the calendar (and is therefore not visible).

2

Hi @Blair,

By default there is a 600px max-width set to the component and that is affecting the width of the component. You use the width and maxWith options to override the the default width of the component. Here is an example:

  <Datepicker
      width={1000}
      maxWidth={1000}
      // ...
  />

You can use the responsive option to define sizes for different screen sizes if needed.

Please let me know if this helps!