Auto Scroll CalenderView to Middle

anwendung/src/components/CalenderView.jsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import Button from "@/components/Button";
 import {list} from "postcss";
 import Background from "@/components/Background";
@@ -18,6 +18,7 @@ export default function CalenderView(p) {
 
     const [entries, setEntries] = useState([[], [], [], [], [], []])
     const [update, setUpdate] = useState(false)
+    const scrollRef = useRef(null);
 
     function readEntries() {
         let url = "http://localhost:8080/entries?semesterid=" + localStorage.getItem("currentsid") +
@@ -189,6 +190,7 @@ export default function CalenderView(p) {
             semesterStart = s.startday;
         }).then(readEntries)
 
+        scrollRef.current.scrollTop = 600;
         window.addEventListener("contextmenu", (e) => (e.preventDefault()))
 
         setInterval(function(){
@@ -232,6 +234,7 @@ export default function CalenderView(p) {
                 flexDirection: "row",
                 justifyContent: "center",
                 alignItems: "center",
+                backgroundColor: "white",
                 gap: 5
             }}>
 
@@ -246,7 +249,7 @@ export default function CalenderView(p) {
                             <div className={"wochen-tag font-big"}>Samstag {new Date(currentYear, 0, currentWeekStartDay + 5).getDate()}.</div>
                         </div>
                     </div>
-                    <div className={"calender-container"}>
+                    <div className={"calender-container"} ref={scrollRef}>
 
                         <div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
 

anwendung/src/styles/globals.css

@@ -165,8 +165,8 @@ weekSelector
 
 .dateElement {
     display: flex;
-    max-width: 250px;
-    width: 250px;
+    max-width: 900px;
+    width: 900px;
     margin-left: 20px;
     margin-right: 20px;
     padding: 0px 20px;
@@ -299,10 +299,11 @@ Calender View
 .calender-view .spalte {
     border-radius: 10px;
     width: 400px;
-    background-color: #ffffff;
+    /*background-color: #ffffff;*/
     display: grid;
     padding: 0 3px;
     grid-template-columns: 100%;
+    background-color: white;
 }
 
 .wochen-tag-container .wochen-tag {