add numberOfDaysBefore param

packages/ui/src/components/ui/horizontal-calendar.tsx

@@ -10,6 +10,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 type HorizontalCalendarProps = {
   readonly className?: string;
   readonly numberOfDays?: number;
+  readonly numberOfDaysBefore?: number;
   readonly onDateChange: (date: Date) => void;
   readonly selectedDate: Date;
 };
@@ -17,11 +18,12 @@ type HorizontalCalendarProps = {
 export function HorizontalCalendar({
   className,
   numberOfDays = 14,
+  numberOfDaysBefore = 7,
   onDateChange,
   selectedDate,
 }: HorizontalCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const [baseDate, setBaseDate] = useState(new Date());
+  const [baseDate, setBaseDate] = useState(addDays(new Date(), -numberOfDaysBefore));
   const [currentMonthDate, setCurrentMonthDate] = useState(new Date());
 
   const dates = useMemo(() => {
@@ -90,6 +92,25 @@ export function HorizontalCalendar({
     };
   }, []);
 
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const selectedChild = container.querySelector(
+      `[data-date="${selectedDate.toISOString()}"]`,
+    ) as HTMLElement;
+    if (selectedChild) {
+      // Прокрутка так, чтобы элемент оказался в центре
+      const offsetLeft = selectedChild.offsetLeft;
+      const centerOffset = offsetLeft - container.clientWidth / 2 + selectedChild.clientWidth / 2;
+
+      container.scrollTo({
+        behavior: 'auto', // можно 'smooth', если хочешь плавно
+        left: centerOffset,
+      });
+    }
+  }, []); // <- только при монтировании
+
   return (
     <div className={cn('w-full', className)}>
       <div className="mb-2 flex items-center justify-between">