feat: Calendar Update

package.json

@@ -38,7 +38,7 @@
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
-    "react-calendar": "^5.1.0",
+    "react-big-calendar": "^1.18.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.2.0"
   },
@@ -47,6 +47,7 @@
     "@tailwindcss/postcss": "4.1.8",
     "@types/node": "22.15.29",
     "@types/react": "19.1.6",
+    "@types/react-big-calendar": "^1",
     "@types/react-dom": "19.1.6",
     "dotenv-cli": "8.0.0",
     "eslint": "9.28.0",

src/app/home/page.tsx

@@ -1,114 +1,31 @@
-import React from 'react';
+"use client";
 
-const Calendar: React.FC = () => {
-  const today = new Date();
-  const currentYear = today.getFullYear();
-  const currentMonth = today.getMonth();
-  const currentDate = today.getDate();
+import { Calendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
-  const firstDayMonth = new Date(currentYear, currentMonth, 1);
-  const lastDayMonth = new Date(currentYear, currentMonth + 1, 0);
-  const startDay = (firstDayMonth.getDay() + 6) % 7;
-  const daysMonth = lastDayMonth.getDate();
+moment.updateLocale('en', {
+  week: {
+    dow: 1,
+    doy: 4,
+  },
+});
 
-  const weeks: (number | null)[][] = [];
-  let currentDay = 1;
+const localizer = momentLocalizer(moment)
 
-  const firstWeek: (number | null)[] = [];
-  for (let i = 0; i < 7; i++) {
-    if (i < startDay) {
-      firstWeek.push(null);
-    } else {
-      firstWeek.push(currentDay);
-      currentDay++;
-    }
-  }
-  weeks.push(firstWeek);
-
-  while (currentDay <= daysMonth) {
-    const week: (number | null)[] = [];
-    for (let i = 0; i < 7; i++) {
-      if (currentDay <= daysMonth) {
-        week.push(currentDay);
-        currentDay++;
-      } else {
-        week.push(null);
-      }
-    }
-    weeks.push(week);
-  }
-
-  const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
-  return (
-    <div style={{
-      maxWidth: '1000px',
-      margin: '0 auto',
-      fontFamily: 'Arial, sans-serif'
-    }}>
-      <h1 style={{
-        textAlign: 'center'
-      }}>
-        {new Date(currentYear, currentMonth).toLocaleString('en-EN', {
-          month: 'long',
-          year: 'numeric'
-        })}
-      </h1>
-      <table style={{
-        width: '100%',
-        borderCollapse: 'collapse'
-      }} border={1}>
-        <thead>
-          <tr>
-            {weekdays.map((day, index) => (
-              <th
-                key={index}
-                style={{
-                  padding: '10px',
-                  backgroundColor: '#f0f0f0',
-                  border: '1px solid #ddd'
-                }}>
-                {day}  
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {weeks.map((week, weekIndex) => (
-            <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <td
-                  key={dayIndex}
-                  style={{
-                    border: '1px solid #ddd',
-                    position: 'relative',
-                    minWidth: '120px',
-                    minHeight: '100px',
-                    padding: '50px',
-                    verticalAlign: 'top',
-                    backgroundColor: day === currentDate ? '#add8e6' : 'transparent'
-                  }}
-                >
-                  {day && (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '5px',
-                        left: '5px',
-                        fontWeight: 'bold'
-                      }}
-                    >
-                      {day}
+const MyCalendar = (props) => (
+  <div>
+    <Calendar
+      localizer={localizer}
+      //events={myEventsList}
+      startAccessor="start"
+      endAccessor="end"
+      style={{ height: 500 }}
+      culture="de-DE"
+      defaultView='week'
+    />
   </div>
-                  )}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+)
 
-export default Calendar;
+export default MyCalendar;