[UI Help] DatePicker resizing

[LWJerri]

Hello, dear community! I'm trying to resize the calendar to use all available screen widths, but I'm faced with a problem - I can't find the correct class which can change the date picker width.

My page currently looks like this (see screenshot). As you can see, the root uses the full available screen width, but the table doesn't.

My code:

import { uk } from "date-fns/locale";
import { useState } from "react";
import { DateRange, DayPicker, getDefaultClassNames } from "react-day-picker";
import "react-day-picker/style.css";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

function App() {
  const [selectedDate, setSelectedDate] = useState<DateRange>();
  const defaultClassNames = getDefaultClassNames();
  
  const handleClickOnDate = (range?: DateRange) => {
    setSelectedDate(range);
  };
  
  return (
    <>
      <DayPicker
      mode="range"
      locale={uk}
      weekStartsOn={1}
      max={7}
      selected={selectedDate}
      onSelect={handleClickOnDate}
      showOutsideDays
      classNames={{
        root: cn(defaultClassNames.root, "shadow-lg p-5"),
        nav: cn(defaultClassNames.nav, "flex justify-between"),
        caption_label: "uppercase items-center",
        month_caption: cn(defaultClassNames.month_caption, "flex items-center"),
        chevron: cn(defaultClassNames.chevron, "fill-black"),
        today: cn("border-2 border-dashed rounded-md border-black text-2xl"),
        selected: "bg-white border border-black",
        day_button: cn(defaultClassNames.day_button, "text-red-500"),
        outside: cn(defaultClassNames.outside, "text-[#ED4245]"),
        month_grid: cn(defaultClassNames.month_grid),
      }}
      />
    </>
  );
}

export default App;

I also have one additional question - how I can modify day_button? I wanna remove/change circles (see screenshot).

Yes, I'm using TailwindCSS (basic ReactJS configuration).

[gpbl]

@LWJerri there is a discussion about targeting buttons with tailwind, thanks for your feedback!

In your case, you can set the border radius via the CSS variable:

// App.css
.rdp-root.my-calendar {
  --rdp-day_button-border-radius: none;
}

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';

import './App.css';

export default function App() {
  return <DayPicker className="my-calendar" mode="range" />;
}

https://stackblitz.com/edit/react-day-picker-9-2332-acy6q5?file=src%2FApp.tsx

With Tailwind, you can also update the day_button class name:

<DayPicker classNames={{
    day_button: "... border-radius-none" 
  }}
/>

[gpbl]

I will update the docs. Thanks for sharing your issues!

[LWJerri]

Amazing, thanks for your answer!

[adnan-smlatic]

What's the answer for making the DayPicker take up the full width of the parent container?