From d6cca00b84b73681fa5c960fe86a50bcca4aaf54 Mon Sep 17 00:00:00 2001
From: Mickey-Zhaang <mickey.zhaang@gmail.com>
Date: Wed, 1 Apr 2026 14:27:31 -0400
Subject: [PATCH 1/3] mock toggle, no functionality yet

---
 .../schedule_overlap/ScheduleOverlap.vue      | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
index 64a00b7a..b4957a31 100644
--- a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
+++ b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
@@ -682,6 +682,25 @@
                   </div>
                 </div>
 
+                <div v-if="showOverlayInvertAvailability">
+                  <v-switch
+                    id="invert-availability-toggle"
+                    inset
+                    :input-value="invertAvailability"
+                    @change="updateInvertAvailability"
+                    hide-details
+                  >
+                    <template v-slot:label>
+                      <div class="tw-text-sm tw-text-black">
+                        Invert Availability
+                      </div>
+                    </template>
+                  </v-switch>
+                  <div class="tw-mt-2 tw-text-xs tw-text-dark-gray">
+                    Invert default availaibility editing mode
+                  </div>
+                </div>
+
                 <!-- Options section -->
                 <div
                   v-if="!event.daysOnly && showCalendarOptions"
@@ -1148,6 +1167,7 @@ export default {
           : localStorage["showEditOptions"] == "true",
       availabilityType: availabilityTypes.AVAILABLE, // The current availability type
       overlayAvailability: false, // Whether to overlay everyone's availability when editing
+      invertAvailability: false, // Whether to invert available/unavailable blocks when viewing
       bufferTime: calendarOptionsDefaults.bufferTime, // Set in mounted()
       workingHours: calendarOptionsDefaults.workingHours, // Set in mounted()
 
@@ -2252,6 +2272,10 @@ export default {
     },
 
     // Options
+    showOverlayInvertAvailability() {
+      return this.respondents.length > 0
+    },
+
     showOverlayAvailabilityToggle() {
       return this.respondents.length > 0 && this.overlayAvailabilitiesEnabled
     },
@@ -2486,7 +2510,14 @@ export default {
 
       this.$worker
         .run(
-          (days, times, parsedResponses, daysOnly, hideIfNeeded) => {
+          (
+            days,
+            times,
+            parsedResponses,
+            daysOnly,
+            hideIfNeeded,
+            invertAvailability
+          ) => {
             // Define functions locally because we can't import functions
             const splitTimeNum = (timeNum) => {
               const hours = Math.floor(timeNum)
@@ -2527,11 +2558,10 @@ export default {
 
               // Check every response and see if they are available for the given time
               for (const response of Object.values(parsedResponses)) {
-                // Check availability array
-                if (
+                const isAvailable =
                   response.availability?.has(date.getTime()) ||
                   (response.ifNeeded?.has(date.getTime()) && !hideIfNeeded)
-                ) {
+                if (invertAvailability ? !isAvailable : isAvailable) {
                   formatted.get(date.getTime()).add(response.user._id)
                   continue
                 }
@@ -2545,6 +2575,7 @@ export default {
             this.parsedResponses,
             this.event.daysOnly,
             this.hideIfNeeded,
+            this.invertAvailability,
           ]
         )
         .then((formatted) => {
@@ -3488,6 +3519,7 @@ export default {
       // Reset options
       this.availabilityType = availabilityTypes.AVAILABLE
       this.overlayAvailability = false
+      this.invertAvailability = false
     },
     highlightAvailabilityBtn() {
       this.$emit("highlightAvailabilityBtn")
@@ -3997,6 +4029,10 @@ export default {
       this.showEventOptions = !this.showEventOptions
       localStorage["showEventOptions"] = this.showEventOptions
     },
+    updateInvertAvailability(val) {
+      this.invertAvailability = !!val
+      this.getResponsesFormatted()
+    },
     updateOverlayAvailability(val) {
       this.overlayAvailability = !!val
       this.$posthog.capture("overlay_availability_toggled", {

From 21efcd173bf09a5a44dcd9a8c8ce6f73a5851896 Mon Sep 17 00:00:00 2001
From: Mickey-Zhaang <mickey.zhaang@gmail.com>
Date: Wed, 1 Apr 2026 15:31:39 -0400
Subject: [PATCH 2/3] take complement of the set of all available slots as a
 subset of all slots and sets complement as new availability

---
 .../schedule_overlap/ScheduleOverlap.vue      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
index b4957a31..48606f76 100644
--- a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
+++ b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
@@ -2515,8 +2515,7 @@ export default {
             times,
             parsedResponses,
             daysOnly,
-            hideIfNeeded,
-            invertAvailability
+            hideIfNeeded
           ) => {
             // Define functions locally because we can't import functions
             const splitTimeNum = (timeNum) => {
@@ -2561,7 +2560,7 @@ export default {
                 const isAvailable =
                   response.availability?.has(date.getTime()) ||
                   (response.ifNeeded?.has(date.getTime()) && !hideIfNeeded)
-                if (invertAvailability ? !isAvailable : isAvailable) {
+                if (isAvailable) {
                   formatted.get(date.getTime()).add(response.user._id)
                   continue
                 }
@@ -2575,7 +2574,6 @@ export default {
             this.parsedResponses,
             this.event.daysOnly,
             this.hideIfNeeded,
-            this.invertAvailability,
           ]
         )
         .then((formatted) => {
@@ -2863,6 +2861,8 @@ export default {
       this.availabilityAnimEnabled = false
     },
     async submitAvailability(guestPayload = { name: "", email: "" }) {
+      this.invertAvailability = false
+
       let payload = {}
 
       let type = ""
@@ -4031,6 +4031,26 @@ export default {
     },
     updateInvertAvailability(val) {
       this.invertAvailability = !!val
+
+      if (this.event.daysOnly) return
+
+      const allSlots = new Set()
+      for (const day of this.allDays) {
+        for (const time of this.times) {
+          const date = getDateHoursOffset(day.dateObject, time.hoursOffset)
+          if (date) allSlots.add(date.getTime())
+        }
+      }
+
+      const newAvailability = new Set()
+      for (const ts of allSlots) {
+        if (!this.availability.has(ts) && !this.ifNeeded.has(ts)) {
+          newAvailability.add(ts)
+        }
+      }
+
+      this.availability = newAvailability
+
       this.getResponsesFormatted()
     },
     updateOverlayAvailability(val) {

From 1fba53e2f67a7e1d2b541cb7139aaf0940fbe5d7 Mon Sep 17 00:00:00 2001
From: Mickey-Zhaang <mickey.zhaang@gmail.com>
Date: Wed, 1 Apr 2026 15:39:37 -0400
Subject: [PATCH 3/3] always show invert availability

---
 .../schedule_overlap/ScheduleOverlap.vue         | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
index 48606f76..241359d8 100644
--- a/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
+++ b/frontend/src/components/schedule_overlap/ScheduleOverlap.vue
@@ -2273,7 +2273,8 @@ export default {
 
     // Options
     showOverlayInvertAvailability() {
-      return this.respondents.length > 0
+      // might be useful to gat something later
+      return true
     },
 
     showOverlayAvailabilityToggle() {
@@ -2510,13 +2511,7 @@ export default {
 
       this.$worker
         .run(
-          (
-            days,
-            times,
-            parsedResponses,
-            daysOnly,
-            hideIfNeeded
-          ) => {
+          (days, times, parsedResponses, daysOnly, hideIfNeeded) => {
             // Define functions locally because we can't import functions
             const splitTimeNum = (timeNum) => {
               const hours = Math.floor(timeNum)
@@ -2557,10 +2552,11 @@ export default {
 
               // Check every response and see if they are available for the given time
               for (const response of Object.values(parsedResponses)) {
-                const isAvailable =
+                // Check availability array
+                if (
                   response.availability?.has(date.getTime()) ||
                   (response.ifNeeded?.has(date.getTime()) && !hideIfNeeded)
-                if (isAvailable) {
+                ) {
                   formatted.get(date.getTime()).add(response.user._id)
                   continue
                 }