Patient calendar - click through mode

public/css/style.css

@@ -1181,3 +1181,6 @@ button.note-templates-trigger-assessment {
     outline: none !important;
     box-shadow: none !important;
 }
+.appt-calendar-col.click-through .fc-timegrid-event-harness {
+    pointer-events: none !important;
+}

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

@@ -68,6 +68,10 @@
             <h4 class="font-weight-bold m-0 font-size-16">
                 {{ $patient->displayName() }}'s Calendar
             </h4>
+            <button v-on:click.prevent="clickThruMode = !clickThruMode"
+                    class="ml-3 btn btn-sm outline-0" :class="clickThruMode ? 'btn-info font-weight-bold' : 'btn-outline-info'">
+                Click Through Mode
+            </button>
             <div class="ml-auto d-inline-flex align-items-center">
                 <label class="mr-2 my-0 text-secondary">Show</label>
                 <select id="eventTypes"
@@ -127,7 +131,7 @@
                 </select>
             </form>
             <hr class="my-2">
-            <div class="appt-calendar-col">
+            <div class="appt-calendar-col" :class="clickThruMode ? 'click-through' : ''">
                 <div class="stag-fc-container"></div>
             </div>
         </div>
@@ -414,6 +418,8 @@
 
                         inProgress: false,
                         editHonored: false,
+
+                        clickThruMode: false,
                     },
                     methods: {
                         // init