[edit] active class for appointment date #28

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

@ -136,19 +136,6 @@
var id = id; var id = id;
var now = new Date(); var now = new Date();
$calender.zabuto_calendar({ $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', classname: 'table event-colourful table-bordered lightgrey-weekends',
week_starts: 'monday', week_starts: 'monday',
show_days: true, show_days: true,
@ -170,6 +157,7 @@
}); });
let allBtns = document.querySelectorAll("td")
$calender.on('zabuto:calendar:day', function (e) { $calender.on('zabuto:calendar:day', function (e) {
var now = new Date(); var now = new Date();
var date = e.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) { // Add the class on clicked one
$(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>'); e.target.classList.add("active");
} 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>');
}
}) })
} }
function dispalyAppointments(appointments,formated_date,id) { function dispalyAppointments(appointments,formated_date,id) {

Loading…
Cancel
Save