@@ -7,6 +7,38 @@

 {% endblock %}

 {% block main %}

+    <div class="tl_panel">

+        <div id="vr-daily-schedule-zoom" class="tl_submit_panel">

+            <button id="daily-zoom-in" class="tl_submit">+</button>

+            <button id="daily-zoom-out" class="tl_submit">-</button>

+            <button id="daily-zoom-reset" class="tl_submit" data-default="3">Reset</button>

+        </div>

+        <script>

+            const zoomPanel = document.querySelector('#vr-daily-schedule-zoom');

+            const root = document.querySelector(':root');

+            const rootStyles = getComputedStyle(root);

+            const defaultZoom = rootStyles.getPropertyValue('--slot-height');

+

+            zoomPanel.querySelectorAll('button').forEach((element) => {

+                element.addEventListener('click',() => {

+                    let currentVal = rootStyles.getPropertyValue('--slot-height');

+                    let split = currentVal.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);

+                    [value,unit] = [parseFloat(split[1]),split[2] ? split[2] : ''];

+

+                    if (element.id == 'daily-zoom-in' && value < 9)

+                    {

+                        root.style.setProperty('--slot-height',(value + 1.5) + unit);

+                    } else if (element.id == 'daily-zoom-out' && value >= 3)

+                    {

+                        root.style.setProperty('--slot-height',(value - 1.5) + unit);

+                    } else if (element.id == 'daily-zoom-reset')

+                    {

+                        root.style.setProperty('--slot-height',defaultZoom);

+                    }

+                });

+            });

+        </script>

+    </div>

     <div class="vr-daily-schedule">

         <div class="daily-timeline-container">

             <div class="daily-timeline">

@@ -11,6 +11,10 @@ $header-bg-color: #f2f2f2;

 $slot-height: 3rem;

 $cell-amount: 48;

+:root {

+  --slot-height: #{$slot-height};

+}

+

 .vr-daily-schedule {

   position: relative;

   display: flex;

@@ -35,7 +39,7 @@ $cell-amount: 48;

   }

   .daily-timeline-label-container {

-    height: $slot-height;

+    height: var(--slot-height);

     position: relative;

     padding-inline-end: 8px;

     text-align: right;

@@ -72,7 +76,7 @@ $cell-amount: 48;

     vertical-align: top;

     .line {

-      height: $slot-height;

+      height: var(--slot-height);

       &:after {

         content: "";

@@ -104,10 +108,10 @@ $cell-amount: 48;

       height: 100%;

       width: 100%;

       display: grid;

-      grid-template-rows: repeat($cell-amount, #{$slot-height / ($cell-amount / 24)});

+      grid-template-rows: repeat($cell-amount, calc(var(--slot-height) / (#{$cell-amount} / 24)));

       .event-cell {

-        line-height: $slot-height / 4;

+        line-height: calc(var(--slot-height) / 4);

         z-index: 2;

         box-sizing: border-box;

         border-radius: 5px;