[edit] active class for appointment date

public/frontend/css/style.css

@@ -1622,7 +1622,6 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 .available-dates{
     /* background: #f0f0f0; */
     display: inline-block;
-    text-align: center;
     justify-content: center;
     color: #272626;
     margin-top: 1rem;
@@ -1633,11 +1632,11 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     border: 1px solid #e0ecfb;
     color:#1a60c5;
     padding: 10px 12px;
-    margin-left: 15px;
+    margin: 6px;
 }
-.available-dates button:nth-of-type(1){
+/* .available-dates button:nth-of-type(1){
     margin-left:0;
-}
+} */
 .available-dates button, .appointment-section .modal-footer button{
     transition: all 250ms ease-in-out;
 }
@@ -1659,7 +1658,8 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 table.lightgrey-weekends tbody td:nth-child(n+6) {
     background-color: #f3f3f3;
     color: #d30000;
-  }
+    pointer-events: none !important;
+}
 .event-colourful {
     color: #bdbdbd;
     cursor: not-allowed;
@@ -1673,6 +1673,9 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     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;
 }
+.event-clickable.active{
+    background-color: #27ab00 !important;
+}
 /* appointment page css ends */
 
 /* Footer Css */

resources/views/appointment.blade.php

@@ -136,19 +136,6 @@
         var id = id;
         var now = new Date();
         $calender.zabuto_calendar({
-        data: [
-            @foreach($educationAppointments as $appointment)
-                @php
-                    $date = Carbon\Carbon::createFromFormat('Y-m-d', $appointment->date);
-                    $start_time = Carbon\Carbon::createFromFormat('H:i A', $appointment->start_time);
-                    $end_time = Carbon\Carbon::createFromFormat('H:i A', $appointment->end_time); 
-                @endphp
-                {
-                    date: "{{ $date->format('Y-m-d') }}",
-                    content: "{{ $start_time->format('H:i') }} - {{ $end_time->format('H:i') }}"
-                },
-            @endforeach
-        ],
         classname: 'table event-colourful table-bordered lightgrey-weekends',
         week_starts: 'monday',
         show_days: true,
@@ -170,6 +157,7 @@
       
         });
 
+        let allBtns = document.querySelectorAll("td")
         $calender.on('zabuto:calendar:day', function (e) {
         var now = new Date();
         var date = e.date;
@@ -192,14 +180,13 @@
 
                 }
             });
-
-            if (e.today) {
-                $(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
-            } else if (e.date.getTime() < now.getTime()) {
-                $(e.element).html('<span class="badge bg-danger">'+ e.date.getDate() +'</span>');
-            } else {
-                $(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
-            }
+            // On click, remove the MyClass on ALL td
+            allBtns.forEach(function(el){
+                el.classList.remove("active");
+            });
+            
+            // Add the class on clicked one
+            e.target.classList.add("active");
         })
     }
     function dispalyAppointments(appointments,formated_date,id) {