feat(calendar): add calendar to home page

src/components/calendar.tsx

@@ -41,7 +41,13 @@ const DaDRBCalendar = withDragAndDrop<
 
 const localizer = momentLocalizer(moment);
 
-export default function Calendar({ userId }: { userId?: string }) {
+export default function Calendar({
+  userId,
+  height,
+}: {
+  userId?: string;
+  height: string;
+}) {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
@@ -62,9 +68,9 @@ export default function Calendar({ userId }: { userId?: string }) {
           )}
         >
           {userId ? (
-            <CalendarWithUserEvents userId={userId} />
+            <CalendarWithUserEvents userId={userId} height={height} />
           ) : (
-            <CalendarWithoutUserEvents />
+            <CalendarWithoutUserEvents height={height} />
           )}
         </ErrorBoundary>
       )}
@@ -72,7 +78,13 @@ export default function Calendar({ userId }: { userId?: string }) {
   );
 }
 
-function CalendarWithUserEvents({ userId }: { userId: string }) {
+function CalendarWithUserEvents({
+  userId,
+  height,
+}: {
+  userId: string;
+  height: string;
+}) {
   const sesstion = useSession();
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
@@ -131,6 +143,9 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
       components={{
         toolbar: CustomToolbar,
       }}
+      style={{
+        height: height,
+      }}
       onView={setCurrentView}
       view={currentView}
       date={currentDate}
@@ -213,7 +228,7 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
   );
 }
 
-function CalendarWithoutUserEvents() {
+function CalendarWithoutUserEvents({ height }: { height: string }) {
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
   >('week');
@@ -224,6 +239,9 @@ function CalendarWithoutUserEvents() {
       localizer={localizer}
       culture='de-DE'
       defaultView='week'
+      style={{
+        height: height,
+      }}
       components={{
         toolbar: CustomToolbar,
       }}

src/components/custom-toolbar.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: calc(var(--spacing) * 2);
+  padding-left: calc(50px + var(--spacing));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

src/components/misc/header.tsx

@@ -45,7 +45,7 @@ export default function Header({
           <UserDropdown />
         </span>
       </header>
-      <main>{children}</main>
+      <main className='max-h-full overflow-y-auto p-5'>{children}</main>
     </div>
   );
 }

src/components/react-big-calendar.css

@@ -810,9 +810,6 @@ button.rbc-input::-moz-focus-inner {
   -ms-flex-direction: row;
   flex-direction: row;
 }
-.rbc-time-header.rbc-overflowing {
-  border-right: 1px solid #ddd;
-}
 .rbc-rtl .rbc-time-header.rbc-overflowing {
   border-right-width: 0;
   border-left: 1px solid #ddd;