Highlight Added

Bugs

anwendung/src/components/CalendarSideBar.jsx

@@ -11,6 +11,17 @@ const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
 
 export default function BasicDateCalendar(p) {
 
+    function getBackMonthColor(monthIndex)
+    {
+        let date = new Date(parseInt(startParts[2]), parseInt(startParts[1])  + monthIndex, 1)
+        console.log(p.highlightYear + " " + date.getFullYear())
+        if (date.getFullYear() === p.highlightYear && date.getMonth() === p.highlightMonth + 1)
+        {
+            return true
+        }else
+            return false
+    }
+
     useEffect(() => {
         startParts = []
         endParts = []
@@ -36,7 +47,10 @@ export default function BasicDateCalendar(p) {
                             textAlign : "center",
                             marginBottom : 10,
                             fontSize: 19,
-                            pointerEvents: "none"
+                            pointerEvents: "none",
+                            backgroundColor: getBackMonthColor(index) ? "#346991":"rgba(0,0,0,0)",
+                            color : getBackMonthColor(index) ? "white":"black",
+                            borderRadius : 10
                         }}>{getMonthName(index)}</p>
                         <div className={"Days"} style={{
                             pointerEvents: "none"
@@ -60,6 +74,8 @@ export default function BasicDateCalendar(p) {
     )
 }
 
+
+
 function getMonthName(monthIndex) {
     if (startParts[1] - 1 + monthIndex < 12) {
         return months[startParts[1] - 1 + monthIndex][0];

anwendung/src/components/CalenderView.jsx

@@ -31,6 +31,10 @@ export default function CalenderView(p) {
     const[startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000)
     const[endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0)
     const[endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000)
+    const [highlightMonth, setHighlightMonth] = useState(0)
+    const [highlightYear, setHighlightYear] = useState(2000)
+
+
 
     function readEntries() {
         let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") +
@@ -266,11 +270,15 @@ export default function CalenderView(p) {
 
     function onWeekLeft() {
         currentWeekStartDay -= 7;
+        setHighlightMonth(new Date(currentYear, 0, currentWeekStartDay + 5).getMonth())
+        setHighlightYear(currentYear)
         readEntries()
     }
 
     function onWeekRight() {
         currentWeekStartDay += 7;
+        setHighlightMonth(new Date(currentYear, 0, currentWeekStartDay + 5).getMonth())
+        setHighlightYear(currentYear)
         readEntries()
     }
 
@@ -318,6 +326,9 @@ export default function CalenderView(p) {
             currentYear = s.startyear;
             setStartYearCalenderSideBar(currentYear)
             setEndYearCalenderSideBar(s.endyear)
+            //console.log(new Date(s.startyear, 0, s.startday).getMonth())
+            setHighlightMonth(new Date(s.startyear, 0, s.startday).getMonth())
+            setHighlightYear(currentYear)
 
             semesterStart = s.startday;
             setStartDayCalenderSideBar(semesterStart)
@@ -374,6 +385,8 @@ export default function CalenderView(p) {
         currentWeekStartDay = Math.round((date - start) / (1000 * 60 * 60 * 24))
         currentWeekStartDay = currentWeekStartDay - new Date(date.getFullYear(), 0, currentWeekStartDay).getUTCDay()
         currentYear = date.getFullYear()
+        setHighlightMonth(date.getMonth())
+        setHighlightYear(currentYear)
         readEntries()
     }
 
@@ -386,7 +399,7 @@ export default function CalenderView(p) {
             alignItems: "center"
         }}>
             <div>
-                <BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar} endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar} onMonthClick={onMonthClick}/>
+                <BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar} endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar} highlightYear={highlightYear} highlightMonth={highlightMonth} onMonthClick={onMonthClick}/>
             </div>
             <div style={{
                 display: "flex",