diff --git a/src/App.css b/src/App.css index beadb97..d8891f2 100644 --- a/src/App.css +++ b/src/App.css @@ -1,10 +1,9 @@ .App { text-align: center; - font-family:"Roboto"; + font-family: "Roboto"; + height: 100vh; } - - .App-header { background-color: #282c34; min-height: 100vh; diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css index 1d53771..094fddd 100644 --- a/src/components/Calendar/Calendar.css +++ b/src/components/Calendar/Calendar.css @@ -4,12 +4,14 @@ main { } .calendar { - width: 100%; - height: 100%; + flex-grow: 1; + overflow: "hidden"; + height: 90vh; } .sidebar { border-right: 2px gray; + width: 20vw; } .fc .fc-daygrid-day { @@ -21,6 +23,31 @@ main { height: 60px !important; /* Default is ~40px */ } +.fc-timegrid-slot { + position: relative; +} + +.fc-timegrid-slot::after { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + border-top: 1px dotted #ccc; + pointer-events: none; + z-index: 1; +} +.fc .fc-timegrid-slot-label { + display: flex; + align-items: flex-start; + padding-top: 2px; + height: 100%; +} + +[data-theme="dark"] .fc-timegrid-slot::after { + border-top: 1px dotted rgba(255, 255, 255, 0.2); +} + #calendar { flex: 1; overflow: hidden; /* Important: let FullCalendar handle internal scroll */ diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index a21f8b3..be282fb 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -218,9 +218,9 @@ export default function CalendarApp() { initialView="timeGridWeek" editable={true} selectable={true} + height={"100%"} select={handleDateSelect} nowIndicator - selectMirror={true} views={{ timeGridWeek: { titleFormat: { month: "long", year: "numeric" } }, }} @@ -228,9 +228,8 @@ export default function CalendarApp() { events={filteredEvents} weekNumbers weekNumberFormat={{ week: "long" }} - slotDuration={"00:30:00"} - slotLabelInterval={"00:30:00"} - scrollTime={"09:00:00"} + slotDuration={"01:00:00"} + scrollTime={"08:00:00"} unselectAuto={false} allDayText="" slotLabelFormat={{ diff --git a/src/components/Menubar/Menubar.css b/src/components/Menubar/Menubar.css index eb6d19f..6996e9f 100644 --- a/src/components/Menubar/Menubar.css +++ b/src/components/Menubar/Menubar.css @@ -42,6 +42,7 @@ padding: 0.5rem; width: 100%; z-index: 1000; + height: 7vh; } .menubar-item {