diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx index 05b3b6c..70e7561 100644 --- a/src/app/(main)/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -1,21 +1,14 @@ 'use client'; -import { RedirectButton } from '@/components/buttons/redirect-button'; +import Calendar from '@/components/calendar'; import { useGetApiUserMe } from '@/generated/api/user/user'; export default function Home() { - const { data, isLoading } = useGetApiUserMe(); + const { data } = useGetApiUserMe(); return ( -
-
-

- Hello{' '} - {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'} -

- - -
+
+
); -}; +} diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx index 71f326b..0f4a098 100644 --- a/src/components/calendar.tsx +++ b/src/components/calendar.tsx @@ -41,7 +41,7 @@ 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 ( {({ reset }) => ( @@ -62,9 +62,9 @@ export default function Calendar({ userId }: { userId?: string }) { )} > {userId ? ( - + ) : ( - + )} )} @@ -72,7 +72,7 @@ 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 +131,9 @@ function CalendarWithUserEvents({ userId }: { userId: string }) { components={{ toolbar: CustomToolbar, }} + style={{ + height: height, + }} onView={setCurrentView} view={currentView} date={currentDate} @@ -213,7 +216,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 +227,9 @@ function CalendarWithoutUserEvents() { localizer={localizer} culture='de-DE' defaultView='week' + style={{ + height: height, + }} components={{ toolbar: CustomToolbar, }} diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css index 8f8d1f6..3fba69f 100644 --- a/src/components/custom-toolbar.css +++ b/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; } diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx index ed53953..dd9e36d 100644 --- a/src/components/misc/header.tsx +++ b/src/components/misc/header.tsx @@ -45,7 +45,7 @@ export default function Header({ -
{children}
+
{children}
); } diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css index fe7270b..675898c 100644 --- a/src/components/react-big-calendar.css +++ b/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;