[edit] disable dates without appointment date

public/frontend/css/style.css

@@ -1649,6 +1649,30 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 .available-dates h5{
     margin-bottom: 0;
 }
+.zabuto-calendar.table>thead>tr>th,
+.zabuto-calendar.table>thead:first-child>tr:first-child>td {
+    color: #000000;
+}
+.zabuto-calendar.table>thead:first-child>tr:first-child>td{
+    pointer-events: all;
+}
+table.lightgrey-weekends tbody td:nth-child(n+6) {
+    background-color: #f3f3f3;
+    color: #d30000;
+  }
+.event-colourful {
+    color: #bdbdbd;
+    cursor: not-allowed;
+}
+.event-colourful .zabuto-calendar__day{
+    pointer-events: none;
+}
+.event-clickable{
+    pointer-events: all !important;
+    color: #000000;
+    cursor: pointer;
+    box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%) !important;
+}
 /* appointment page css ends */
 
 /* Footer Css */

resources/views/appointment.blade.php

@@ -22,7 +22,7 @@
                     <button class="btn-appointment nav-link active" id="v-pills-education-tab" data-type = "1" data-bs-toggle="pill" data-bs-target="#v-pills-education" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
                         <i class="appointment-card-img"><img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""></i>Education Services</button>
                     <button class="btn-appointment nav-link" id="v-pills-visa-tab" data-type = "2" data-bs-toggle="pill" data-bs-target="#v-pills-visa" type="button" role="tab" aria-controls="v-pills-visa" aria-selected="false">
-                        <i class="appointment-card-img"><img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""></i>Visa Services</button>
+                        <i class="appointment-card-img"><img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""></i>Migration | Visa Services</button>
                 </div>
             </div>
 
@@ -134,6 +134,7 @@
     });
     function displayCalendar($calender,id){
         var id = id;
+        var now = new Date();
         $calender.zabuto_calendar({
         data: [
             @foreach($educationAppointments as $appointment)
@@ -148,18 +149,24 @@
                 },
             @endforeach
         ],
-        classname: 'table clickable table-bordered lightgrey-weekends',
+        classname: 'table event-colourful table-bordered lightgrey-weekends',
         week_starts: 'monday',
         show_days: true,
         cell_border: true,
-        today: true,
         show_days: true,
         weekstartson: 0,
-        today_markup: '<span class="badge bg-primary">[day]</span>',
         navigation_markup: {
             prev: '<i class="fas fa-chevron-circle-left"></i>',
             next: '<i class="fas fa-chevron-circle-right"></i>'
-        }
+        },
+        events:[
+            @foreach($educationAppointments as $appointment)
+                {
+                    date: "{{ $appointment->date }}",
+                    "classname": "clickable event-clickable"
+                },
+            @endforeach
+        ]
       
         });
 
@@ -186,9 +193,8 @@
                 }
             });
 
-
             if (e.today) {
-                $(e.element).css('color', 'blue');
+                $(e.element).html('<span class="badge bg-primary">'+ e.date.getDate() +'</span>');
             } else if (e.date.getTime() < now.getTime()) {
                 $(e.element).html('<span class="badge bg-danger">'+ e.date.getDate() +'</span>');
             } else {