Calender Side Bar Autoscroll behaviour

anwendung/src/components/CalendarSideBar.jsx

@@ -1,4 +1,4 @@
-import {useEffect} from "react";
+import {useEffect, useRef} from "react";
 
 let startParts = []
 let endParts = []
@@ -8,14 +8,22 @@ let result = []
 let startDate
 let calculatedDay = []
 const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
+let lastMonth = 0
 
 export default function BasicDateCalendar(p) {
 
+    const ref = useRef(null)
+
     function getBackMonthColor(monthIndex)
     {
         let date = new Date(parseInt(startParts[2]), parseInt(startParts[1])  + monthIndex - 1, 1)
         if (date.getFullYear() === p.highlightYear && date.getMonth() === p.highlightMonth)
         {
+            if(lastMonth !== p.highlightMonth)
+            {
+                ref.current.scrollTo({top: 290 * monthIndex - 270, behavior: "smooth"})
+            }
+            lastMonth = p.highlightMonth
             return true
         }else
             return false
@@ -35,7 +43,7 @@ export default function BasicDateCalendar(p) {
     })
 
     return (
-        <div className={"Allround"}>
+        <div className={"Allround"} ref={ref}>
             <div className={"Down"}>
                 {result.map((monthResult, index) => (
                     <div className={"A box-shadow"} onClick={() => p.onMonthClick(

anwendung/src/styles/calendarSideBar.css

@@ -5,6 +5,7 @@
     margin: 10px;
     background-color: white;
     padding: 15px;
+    height: 270px;
 }
 
 .A P