From e2ab04b95c688706f4b4b4f7d654a0de61f4a20c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B1=E5=8D=9A=E4=BA=9E?= <naruto0426@rulingcom.com>
Date: Wed, 21 Dec 2022 11:15:29 +0800
Subject: [PATCH] Fix z-index bug.

---
 app/assets/stylesheets/calendar.scss    |  2 ++
 app/assets/stylesheets/fullcalendar.css | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/calendar.scss b/app/assets/stylesheets/calendar.scss
index b3c81af..6ffda89 100644
--- a/app/assets/stylesheets/calendar.scss
+++ b/app/assets/stylesheets/calendar.scss
@@ -136,6 +136,8 @@
 }
 
 #view_holder {
+    position: relative;
+    z-index: 0; //z-index can be set when position other than static.
 	clear: both;
 }
 
diff --git a/app/assets/stylesheets/fullcalendar.css b/app/assets/stylesheets/fullcalendar.css
index 4482ac0..475287b 100644
--- a/app/assets/stylesheets/fullcalendar.css
+++ b/app/assets/stylesheets/fullcalendar.css
@@ -479,6 +479,7 @@ a.fc-event:hover {
 /* ---------------------------------------------------------------------------------------------------- */
 .fc-event .fc-event-main {
     position: relative;
+    z-index: 2;
   }
 /* dragging */
 /* ---------------------------------------------------------------------------------------------------- */
@@ -707,7 +708,7 @@ A HORIZONTAL event
   display: table; }
 .fc .fc-daygrid-body { /* a <div> that wraps the table */
     position: relative;
-    /* container inner z-index's because <tr>s can't do it */
+    z-index: 1; /* container inner z-index's because <tr>s can't do it */
   }
 .fc .fc-daygrid-day.fc-day-today {
       background-color: rgba(255, 220, 40, 0.15);
@@ -736,6 +737,7 @@ A HORIZONTAL event
 }
 .fc .fc-daygrid-day-number {
     position: relative;
+    z-index: 4;
     padding: 4px;
   }
 .fc {
@@ -798,9 +800,11 @@ A HORIZONTAL event
 
 }
 .fc .fc-daygrid-event {
+    z-index: 6;
     margin-top: 1px;
   }
 .fc .fc-daygrid-event.fc-event-mirror {
+    z-index: 7;
   }
 .fc {
 
@@ -817,6 +821,7 @@ A HORIZONTAL event
   display: table; }
 .fc .fc-daygrid-more-link {
     position: relative;
+    z-index: 4;
     cursor: pointer;
   }
 .fc {
@@ -826,6 +831,7 @@ A HORIZONTAL event
 }
 .fc .fc-daygrid-week-number {
     position: absolute;
+    z-index: 5;
     top: 0;
     padding: 2px;
     min-width: 1.5em;
@@ -1042,14 +1048,14 @@ A VERTICAL event
       bottom: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
     }
 .fc .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */
-    /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */
+    z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */
   }
 .fc .fc-timegrid-divider {
     padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */
   }
 .fc .fc-timegrid-body {
     position: relative;
-    /* scope the z-indexes of slots and cols */
+    z-index: 1; /* scope the z-indexes of slots and cols */
     min-height: 100%; /* fill height always, even when slat table doesn't grow */
   }
 .fc .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */
@@ -1062,6 +1068,7 @@ A VERTICAL event
     }
 .fc .fc-timegrid-slots {
     position: relative;
+    z-index: 1;
   }
 .fc .fc-timegrid-slot { /* a <td> */
     height: 1.5em;