[edit] appointment js function

public/frontend/css/style.css

@@ -1495,6 +1495,25 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 .calender-section h2{
     color: #296AC7;
 }
+.calender-disable{
+    pointer-events: none;
+    cursor: not-allowed;
+}
+.calender-disable:hover{
+    cursor: not-allowed;
+}
+.available-dates{
+    background: #f0f0f0;
+    display: inline-block;
+    text-align: center;
+    justify-content: center;
+    color: #272626;
+    padding: 10px;
+    margin-top: 1rem;
+}
+.available-dates h5{
+    margin-bottom: 0;
+}
 /* appointment page css ends */
 
 /* Footer Css */

resources/views/appointment.blade.php

@@ -11,7 +11,7 @@
 @section('content')
     <section class="appointment-section">
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-5">
                 <h1>Book an Appointment</h1>
                 <div class="appointment-cards">
                     <a href="" class="appointment-card">
@@ -27,12 +27,12 @@
                             <img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
                         </div>
                         <div>
-                            <h3>Education Services</h3>
+                            <h3>Visa Services</h3>
                         </div>
                     </a>
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-7">
                 <div class="calender-section">
                     <div class="claender-top">
                         <p>Time Zone:</p>
@@ -41,6 +41,9 @@
                     <h2>Select available date</h2>
                     <h3>Education services | 30 mins</h3>
                     <div id="demo-calendar-apppearance"></div>
+                    <div class="available-dates">
+                        <h5 id='available-dates'></h5>
+                    </div>
                 </div>
             </div>
         </div>
@@ -48,8 +51,9 @@
 @endsection
 @section('script')
 <script>
+    var $calender = $("#demo-calendar-apppearance");
     $(document).ready(function () {
-    $("#demo-calendar-apppearance").zabuto_calendar({
+    $calender.zabuto_calendar({
         classname: 'table clickable table-bordered lightgrey-weekends',
         week_starts: 'monday',
         show_days: true,
@@ -59,6 +63,45 @@
             next: '<i class="fas fa-chevron-circle-right"></i>'
         }
     });
+
+    var dates = [7, 8, 9]
+    var availableDates = document.getElementById('available-dates')
+
+    $calender.on('zabuto:calendar:day', function (e) {
+        var now = new Date();
+            if (e.today) {
+                $(e.element).css('color', 'blue');
+            } else if (e.date.getTime() < now.getTime()) {
+                $(e.element).click(function() { return false })
+            }
+            else if(dates){
+                dates.forEach((date) => {
+                    if(e.element[0].innerText == date){
+                        availableDates.innerText=[dates]
+                    }
+                    else{
+                        availableDates.innerText=""
+                        return false;
+                    }
+                    console.log(date)
                 });
+                // for (let i = 0; i < dates.length; i++){
+                //     if(e.element[0].innerText == dates[i]){
+                //         console.log(true)
+                //     }
+                //     else{
+                //         console.log(dates[i])
+                //     }
+                // }
+            } 
+            else {
+                $(e.element).click(function() { return false })
+            }
+            writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
+        })
+    });
+    function writeToEventLog(message) { 
+
+    }
 </script>
 @endsection