diff --git a/frontend/src/app.css b/frontend/src/app.css
index 7158691..ca87227 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -57,6 +57,7 @@
 
 .fc-event {
     box-shadow: none !important;
+    overflow: hidden;
 }
 
 .fc-event:hover {
diff --git a/frontend/src/routes/timetable/+page.svelte b/frontend/src/routes/timetable/+page.svelte
index 3069bc6..620bac3 100644
--- a/frontend/src/routes/timetable/+page.svelte
+++ b/frontend/src/routes/timetable/+page.svelte
@@ -38,8 +38,7 @@
     function initCalendar() {
         calendar = new Calendar(calendarEl, {
             plugins: [timeGridPlugin, listPlugin, momentTimezonePlugin],
-            initialView:
-                window.innerWidth > 768 ? "timeGridWeek" : "timeGridDay",
+            initialView: getDefaultView(),
             headerToolbar: {
                 left: "prev,next today",
                 center: "title",
@@ -60,6 +59,10 @@
             nowIndicator: true,
             slotDuration: "01:00:00",
             expandRows: true,
+            height: calcHeight(getDefaultView()),
+            windowResize: function (info) {
+                calendar.setOption("height", calcHeight(info.view.type));
+            },
             eventContent: function (info) {
                 return { html: info.event.title };
             },
@@ -79,6 +82,23 @@
         };
     });
 
+    function getDefaultView() {
+        return window.innerWidth > 768 ? "timeGridWeek" : "timeGridDay";
+    }
+
+    function calcHeight(viewType) {
+        if (viewType == "timeGridDay") {
+            return 1050;
+        }
+        let height = 2850 - (225 * window.innerWidth) / 128;
+        if (height > 1500) {
+            height = 1500;
+        } else if (height < 1050) {
+            height = 1050;
+        }
+        return height;
+    }
+
     async function fetchEvents(info = null) {
         let events_data;
         if (