Show already booked slots as unavailable

app/Http/Controllers/AppointmentController.php

@@ -44,7 +44,7 @@ class AppointmentController extends Controller
         foreach ($appointments as $appointment) {
             $events[] = [
                 "type" => "appointment",
-                "title" => ($appointment->client->id != $clientId ? '* ' : '') . $appointment->pro->displayName(),
+                "title" => ($appointment->client->id != $clientId ? '* ' : '') . $appointment->pro->displayName() . " (booked)",
                 "_title" => $appointment->title,
                 "description" => $appointment->description,
                 "clientName" => $appointment->client->displayName(),
@@ -178,6 +178,18 @@ class AppointmentController extends Controller
                 $proTimeLine->removeAvailability($suaStart, $suaEnd);
             }
 
+            // make already booked slots unavailable
+            $proAppointments = $appointments->filter(function ($record) use ($proId) {
+                return $record->pro_id == $proId;
+            });
+            foreach ($proAppointments as $appointment) {
+                if($appointment->start_time && $appointment->end_time) {
+                    $appStart = $this->convertToTimezone($appointment->start_time, $timeZone, 'UTC', true);
+                    $appEnd = $this->convertToTimezone($appointment->end_time, $timeZone, 'UTC', true);
+                    $proTimeLine->removeAvailability($appStart, $appEnd);
+                }
+            }
+
             foreach ($proTimeLine->available as $item) {
 
                 $eStart = new \DateTime('@' . $item->start);
@@ -188,7 +200,7 @@ class AppointmentController extends Controller
 
                 $events[] = [
                     "type" => "availability",
-                    "title" => $pro->displayName(),
+                    "title" => $pro->displayName() . " (available)",
                     "proId" => $pro->id,
                     "proUid" => $pro->uid,
                     "start" => $eStart->format('Y-m-d H:i:s'),

public/css/style.css

@@ -945,6 +945,9 @@ span.select2-container.select2-container--default.select2-container--open {
 .fc .other-client:hover {
     opacity: 0.8;
 }
+.fc .availability {
+    box-shadow: 0 0 3px green !important;
+}
 .w-150 {
     width: 150px !important;
     min-width: 150px !important;

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

@@ -524,6 +524,9 @@
                                                 }
                                             }
                                             successCallback(displayEvents);
+                                            $('.fc .availability').each(function () {
+                                                $(this).parent('.fc-timegrid-event-harness').css('pointer-events', 'none');
+                                            });
                                         }
                                         else {
                                             failureCallback('Unable to refresh appointments!');
@@ -538,6 +541,9 @@
                                     if (arg.event.extendedProps.otherClient) {
                                         classes.push('other-client');
                                     }
+                                    if (arg.event.extendedProps.type === 'availability') {
+                                        classes.push('availability');
+                                    }
                                     return classes;
                                 },
                                 loading: function(bool) {