From 4ac8f51bbc792bcae2e557c16c1de850a152ab88 Mon Sep 17 00:00:00 2001 From: tribikram Date: Tue, 14 Feb 2023 14:08:02 +0545 Subject: [PATCH] [edit] active class for appointment date --- public/frontend/css/style.css | 13 +++++++----- resources/views/appointment.blade.php | 29 ++++++++------------------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/public/frontend/css/style.css b/public/frontend/css/style.css index 33b80c9..bfe8ea3 100644 --- a/public/frontend/css/style.css +++ b/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 */ diff --git a/resources/views/appointment.blade.php b/resources/views/appointment.blade.php index e1f7279..882b22e 100644 --- a/resources/views/appointment.blade.php +++ b/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(''+ e.date.getDate() +''); - } else if (e.date.getTime() < now.getTime()) { - $(e.element).html(''+ e.date.getDate() +''); - } else { - $(e.element).html(''+ e.date.getDate() +''); - } + // 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) { -- 2.25.1