[edit] active class for appointment date

et#27
tribikram 2 years ago
parent d310c517c1
commit 4ac8f51bbc
  1. 13
      public/frontend/css/style.css
  2. 27
      resources/views/appointment.blade.php

@ -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 */

@ -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 @@
}
});
// On click, remove the MyClass on ALL td
allBtns.forEach(function(el){
el.classList.remove("active");
});
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>');
}
// Add the class on clicked one
e.target.classList.add("active");
})
}
function dispalyAppointments(appointments,formated_date,id) {

Loading…
Cancel
Save