app/Http/Controllers/Admin/AppointmentController.php

@@ -7,7 +7,6 @@ use App\Http\Controllers\Controller;
 
 use App\Models\Appointment;
 use Illuminate\Http\Request;
-use Carbon\Carbon;
 
 class AppointmentController extends Controller
 {
@@ -37,17 +36,16 @@ class AppointmentController extends Controller
     {
         $request->validate([
             'date' => 'required|date',
-            'start_time' => 'required|date_format:H:i',
+            'start_time' => 'required|date_format:H:i A',
-            'end_time' => 'required|date_format:H:i',
+            'end_time' => 'required|date_format:H:i A',
             // 'location' => 'required|max:255',
             // 'description' => 'required',
         ]);
-        $start_time = Carbon::createFromFormat('H:i', $request->get('start_time'))->format('H:i A');
+
-        $end_time = Carbon::createFromFormat('H:i', $request->get('end_time'))->format('H:i A');
         $appointment = new Appointment([
             'date' => $request->get('date'),
-            'start_time' => $start_time,
+            'start_time' => $request->get('start_time'),
-            'end_time' => $end_time,
+            'end_time' => $request->get('end_time'),
             'location' => $request->get('location'),
             'description' => $request->get('description'),
             'service_type' => $request->get('service_type'),
@@ -60,14 +58,8 @@ class AppointmentController extends Controller
 
     public function edit($id)
     {
-        $appointment = Appointment::findorfail($id);
+        $appointment = Appointment::find($id);
-        $start_time = explode(" ", $appointment->start_time);
+
-        $start_time = $start_time[0];
-       
-        $end_time = explode(" ", $appointment->end_time);
-        $end_time = $end_time[0];
-        $appointment['start_time'] = $start_time;
-        $appointment['end_time'] = $end_time;
         return view($this->view.'edit', compact('appointment'));
     }
 
@@ -75,22 +67,19 @@ class AppointmentController extends Controller
     {
         $request->validate([
             'date' => 'required|date',
-            'start_time' => 'required|date_format:H:i',
+            'start_time' => 'required|date_format:H:i A',
-            'end_time' => 'required|date_format:H:i',
+            'end_time' => 'required|date_format:H:i A',
             // 'location' => 'required|max:255',
             // 'description' => 'required',
         ]);
-        $start_time = Carbon::createFromFormat('H:i', $request->get('start_time'))->format('H:i A');
-        $end_time = Carbon::createFromFormat('H:i', $request->get('end_time'))->format('H:i A');
 
         $appointment = Appointment::find($id);
         $appointment->date = $request->get('date');
-        $appointment->start_time = $start_time;
+        $appointment->start_time = $request->get('start_time');
-        $appointment->end_time = $end_time;
+        $appointment->end_time = $request->get('end_time');
         $appointment->location = $request->get('location');
         $appointment->description = $request->get('description');
         $appointment->service_type = $request->get('service_type');
-        $appointment->status = $request->get('status');
         $appointment->save();
 
         return redirect($this->redirect)->with('success', 'Appointment has been updated');

app/Http/Controllers/AppointmentController.php

@@ -76,7 +76,6 @@ class AppointmentController extends Controller
             $appointment->is_booked = true;
             $appointment->save();
             $subject = 'Appointment Confirmed';
-            dispatch(function() use ($name,$email,$subject,$formated_date,$appointment) {
             \Mail::send('appointment_confirmed', array(
 
                 'full_name' =>$name,
@@ -89,7 +88,7 @@ class AppointmentController extends Controller
 
                 'end_time' => $appointment['end_time'],
     
-                'phone' =>$appointment['phone'],
+                'phone' =>$request['phone'],
     
                 'subject' =>$subject 
     
@@ -102,7 +101,6 @@ class AppointmentController extends Controller
                 // $message->cc('suman@extratechs.com.au', 'Extratech')->subject($subject);
     
                });
-            });
         }
 
         return response()->json(['appointment_detail' => $appointment_detail,'appointment' => $appointment,'formated_date' => $formated_date],200);

public/frontend/css/style.css

@@ -1622,6 +1622,7 @@ 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;
@@ -1632,11 +1633,11 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     border: 1px solid #e0ecfb;
     color:#1a60c5;
     padding: 10px 12px;
-    margin: 6px;
+    margin-left: 15px;
 }
-/* .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;
 }
@@ -1658,8 +1659,7 @@ 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,9 +1673,6 @@ 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/admin/appointment/edit.blade.php

@@ -48,13 +48,13 @@
                             <div class="col-md-6" >
                                 <div class="form-group" >
                                     <label>Start Time <span style="color: red";> * </span></label>
-                                    <input type="time" name="start_time" class="form-control"  value = "{{$appointment->start_time}}" required/>
+                                    <input type="text" name="start_time" class="form-control"  value = "{{$appointment->start_time}}" required/>
                                 </div>
                             </div>
                             <div class="col-md-6" >
                                 <div class="form-group" >
                                     <label>End Time <span style="color: red";> * </span></label>
-                                    <input type="time" name="end_time" class="form-control"  value = "{{$appointment->end_time}}" required/>
+                                    <input type="text" name="end_time" class="form-control"  value = "{{$appointment->end_time}}" required/>
                                 </div>
                             </div>
                             <div class="col-md-6">

resources/views/appointment.blade.php

@@ -136,6 +136,19 @@
         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,
@@ -157,7 +170,6 @@
       
         });
 
-        let allBtns = document.querySelectorAll("td")
         $calender.on('zabuto:calendar:day', function (e) {
         var now = new Date();
         var date = e.date;
@@ -180,13 +192,14 @@
 
                 }
             });
-            // On click, remove the MyClass on ALL td
+
-            allBtns.forEach(function(el){
+            if (e.today) {
-                el.classList.remove("active");
+                $(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>');
-            // Add the class on clicked one
+            } else {
-            e.target.classList.add("active");
+                $(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
+            }
         })
     }
     function dispalyAppointments(appointments,formated_date,id) {