Calendar appt menu z-index issue fix

public/css/style.css

@@ -2112,7 +2112,7 @@ body.in-iframe .main-row > .sidebar {
 }
 .stag-menu {
     position: absolute;
-    z-index: 2;
+    z-index: 4;
 }
 .visit-segment .mcp-theme-1 .ql-editor[contenteditable] {
     min-height: 200px;

resources/views/app/patient/appointment-calendar.blade.php

@@ -351,7 +351,7 @@
             <form method="POST" action="/api/appointment/updateStatus" id="editApptForm_Status"
                   :class="editAppointment.isTrainingEvent ? 'non-interactive' : ''">
                 <h3 class="stag-popup-title">
-                    <span>Edit Date &amp; Time</span>
+                    <span>Edit Status</span>
                     <a native target="_blank" v-if="editAppointment.isTrainingEvent" class="ml-3"
                        :href="'{{config('app.hrm2_url')}}/patients/view/' + editAppointment.clientUid + '/calendar/' + editAppointment.uid">
                         <i class="fa fa-external-link-alt"></i>
@@ -1040,11 +1040,17 @@
                             }, 'json');
                         },
                         showEventMenu: function(_el) {
-                            let menu = $(_el).find('.calendar-event-menu').first();
+                            _el = $(_el);
+                            let menu = _el.closest('.fc-timegrid-body').find('.calendar-event-menu').first();
                             if(!menu.length) {
-                                menu = $('.calendar-event-menu').clone().removeClass('.calendar-event-menu').appendTo(_el);
+                                menu = $('.calendar-event-menu').clone().removeClass('.calendar-event-menu').appendTo(_el.closest('.fc-timegrid-body'));
                             }
-                            menu.show();
+                            menu
+                                .show()
+                                .css({
+                                    top: (_el.parent().position().top + _el.parent().outerHeight()) + 'px',
+                                    left: _el.closest('td').position().left + 'px',
+                                });
                         },
                         showEditAppointmentModal: function() {
                             // setup model data