Set calendar height to 100% (#9295)

* Set calendar height to 100% and set `smallHeader to true

* Unset `smallHeader`

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

app/src/layouts/calendar/calendar.vue

@@ -39,6 +39,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .calendar-layout {
+	height: calc(100% - calc(61px + 2 * 24px));
 	padding: var(--content-padding);
 	padding-top: 0;
 }

app/src/layouts/calendar/index.ts

@@ -30,8 +30,7 @@ export default defineLayout<LayoutOptions>({
 	component: CalendarLayout,
 	slots: {
 		options: CalendarOptions,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		sidebar: () => {},
+		sidebar: () => undefined,
 		actions: CalendarActions,
 	},
 	setup(props, { emit }) {
@@ -161,7 +160,7 @@ export default defineLayout<LayoutOptions>({
 				eventResizableFromStart: true,
 				eventDurationEditable: true,
 				dayMaxEventRows: true,
-				contentHeight: 800,
+				height: '100%',
 				nextDayThreshold: '01:00:00',
 				plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
 				initialView: viewInfo.value?.type ?? 'dayGridMonth',

app/src/layouts/map/map.vue

@@ -308,7 +308,7 @@ export default defineComponent({
 .layout-map {
 	position: relative;
 	width: 100%;
-	height: calc(100% - 61px);
+	height: calc(100% - 60px);
 }
 
 .center {

app/src/views/private/components/header-bar/header-bar.vue

@@ -173,6 +173,11 @@ export default defineComponent({
 		}
 	}
 
+	&.small {
+		top: 0;
+		height: 60px;
+	}
+
 	&.small .title-container .headline {
 		opacity: 0;
 		pointer-events: none;