Figured out how to go 100% width

[laneschmidt]

<DayPicker
      {...restProps}
      month={month}
      onMonthChange={(date) => {
        setSelectedMonth(date);
        onMonthChange?.(date);
      }}
      styles={{
        root: { width: '100%' },
        month_grid: { width: '100%' },
      }}
/>

yields

[laneschmidt]

Without styles, looks like

[Sayyat]

Not working for me

[Sayyat]

<DayPicker
			fixedWeeks
			showOutsideDays
			animate                           
			locale={currentLocale}
			startMonth={new Date(2025, 0)}
			endMonth={new Date(2040, 11)}
			mode="single"
			selected={selected}
			onSelect={setSelected}
			captionLayout="dropdown"
			navLayout="after"
			components={{
				// Root: RootWithBackdrop,
				Dropdown: CustomSelectDropdown,
				Chevron: (props) => (
					<span className="transition-colors size-full flex items-center justify-center"
					      style={{color: "var(--icon-muted)"}}>
            {props.orientation && chevronsMap[props.orientation]}
          </span>
				),
			}}
			styles={{
				root: {width: '100%'},
				month_grid: {width: '100%'},
			}}
			classNames={{
				// [UI.Root]: cn(d.root, "block w-full !m-0 !p-0"),
				// [UI.Months]: cn(d.months, "w-full"),
				// [UI.Month]: cn(d.month, "w-full !m-0"),
				// [UI.MonthGrid]: cn(d.month_grid, "w-full"),
				// [UI.Weeks]: cn(d.weeks, "w-full"),
				// [UI.DayButton]: cn(
				// 	d.day_button,
				// 	// квадратная кнопка -> идеальный круг
				// 	"w-full aspect-square p-0 leading-none rounded-full"
				// ),
				selected: "bg-accent rounded-full text-secondary",
			}}
		/>
		
	```

[Sayyat]

Finally

			styles={{
				root: {width: '100%'},
				month_grid: {width: '100%'},
				months: {width: '100%', maxWidth: '100%'},
				month: {width: '100%', maxWidth: '100%'},
			}}
			

solved the issue.

This is the full component

"use client";
import {DayPicker, DropdownProps, getDefaultClassNames, type Locale} from "react-day-picker";
import "react-day-picker/style.css";
import React, {ReactNode, useState} from "react";
import {enUS, kk, ru} from "react-day-picker/locale";
import {useTranslation} from "@/i18n";
import {ArrowDown, ArrowLeft, ArrowRight, ArrowUp} from "lucide-react";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/shared/components/ui/select";
import {cn} from "@/shared";

const localesMap: Record<string, Locale> = {kk, ru, en: enUS};
const chevronsMap: Record<string, ReactNode> = {
	up: <ArrowUp/>,
	down: <ArrowDown/>,
	left: <ArrowLeft/>,
	right: <ArrowRight/>
};

export function ScheduleDatePicker() {
	const {i18n} = useTranslation();
	const currentLocale = localesMap[i18n.language];
	const [selected, setSelected] = useState<Date>();
	const d = getDefaultClassNames();

	return (
		<DayPicker
			fixedWeeks
			showOutsideDays
			animate
			locale={currentLocale}
			startMonth={new Date(2025, 0)}
			endMonth={new Date(2040, 11)}
			mode="single"
			selected={selected}
			onSelect={setSelected}
			captionLayout="dropdown"
			navLayout="after"
			className="w-full"
			components={{
				Root: RootWithBackdrop,
				Dropdown: CustomSelectDropdown,
				Chevron: (props) => (
					<span className="transition-colors size-full flex items-center justify-center"
					      style={{color: "var(--icon-muted)"}}>
            {props.orientation && chevronsMap[props.orientation]}
          </span>
				),
			}}
			styles={{
				root: {width: '100%'},
				month_grid: {width: '100%'},
				months: {width: '100%', maxWidth: '100%'},
				month: {width: '100%', maxWidth: '100%'},
			}}
		/>
	);
}

export function CustomSelectDropdown(props: DropdownProps) {
	const {options, value, onChange} = props;
	const handleValueChange = (newValue: string) => {
		onChange?.({target: {value: newValue}} as React.ChangeEvent<HTMLSelectElement>);
	};
	return (
		<Select value={value?.toString()} onValueChange={handleValueChange}>
			<SelectTrigger><SelectValue/></SelectTrigger>
			<SelectContent>
				<SelectGroup>
					{options?.map((o) => (
						<SelectItem key={o.value} value={o.value.toString()} disabled={o.disabled}>
							{o.label}
						</SelectItem>
					))}
				</SelectGroup>
			</SelectContent>
		</Select>
	);
}

function RootWithBackdrop(props: React.HTMLAttributes<HTMLDivElement> & { rootRef?: React.Ref<HTMLDivElement> }) {
	const {className, children, rootRef, ...rest} = props;
	return (
		<div ref={rootRef} {...rest} className={cn(className, "relative w-full")}>
			<div
				aria-hidden
				className="pointer-events-none absolute inset-x-0 bottom-0 top-12 rounded-xl bg-card z-0"
			/>
			<div className="relative z-10 flex">{children}</div>
		</div>
	);
}

function FullWidthRoot(
	props: React.HTMLAttributes<HTMLDivElement>
) {
	const {className, style, children, ...rest} = props;
	return (
		<div
			{...rest}
			className={cn(className, "block w-full !m-0 !p-0")}
			style={{...style, width: "100%", margin: 0, padding: 0}}
		>
			{children}
		</div>
	);
}

And this is how it looks like

[laneschmidt]

Glad you got it working!