|
|
@ -11,7 +11,7 @@ |
|
|
|
@section('content') |
|
|
|
@section('content') |
|
|
|
<section class="appointment-section"> |
|
|
|
<section class="appointment-section"> |
|
|
|
<div class="row"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-5"> |
|
|
|
<h1>Book an Appointment</h1> |
|
|
|
<h1>Book an Appointment</h1> |
|
|
|
<div class="appointment-cards"> |
|
|
|
<div class="appointment-cards"> |
|
|
|
<a href="" class="appointment-card"> |
|
|
|
<a href="" class="appointment-card"> |
|
|
@ -27,12 +27,12 @@ |
|
|
|
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""> |
|
|
|
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<h3>Education Services</h3> |
|
|
|
<h3>Visa Services</h3> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="col-md-7"> |
|
|
|
<div class="calender-section"> |
|
|
|
<div class="calender-section"> |
|
|
|
<div class="claender-top"> |
|
|
|
<div class="claender-top"> |
|
|
|
<p>Time Zone:</p> |
|
|
|
<p>Time Zone:</p> |
|
|
@ -41,6 +41,9 @@ |
|
|
|
<h2>Select available date</h2> |
|
|
|
<h2>Select available date</h2> |
|
|
|
<h3>Education services | 30 mins</h3> |
|
|
|
<h3>Education services | 30 mins</h3> |
|
|
|
<div id="demo-calendar-apppearance"></div> |
|
|
|
<div id="demo-calendar-apppearance"></div> |
|
|
|
|
|
|
|
<div class="available-dates"> |
|
|
|
|
|
|
|
<h5 id='available-dates'></h5> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -48,8 +51,9 @@ |
|
|
|
@endsection |
|
|
|
@endsection |
|
|
|
@section('script') |
|
|
|
@section('script') |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
|
|
|
|
var $calender = $("#demo-calendar-apppearance"); |
|
|
|
$(document).ready(function () { |
|
|
|
$(document).ready(function () { |
|
|
|
$("#demo-calendar-apppearance").zabuto_calendar({ |
|
|
|
$calender.zabuto_calendar({ |
|
|
|
classname: 'table clickable table-bordered lightgrey-weekends', |
|
|
|
classname: 'table clickable table-bordered lightgrey-weekends', |
|
|
|
week_starts: 'monday', |
|
|
|
week_starts: 'monday', |
|
|
|
show_days: true, |
|
|
|
show_days: true, |
|
|
@ -59,6 +63,45 @@ |
|
|
|
next: '<i class="fas fa-chevron-circle-right"></i>' |
|
|
|
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) |
|
|
|
}); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
// 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 |
|
|
|
@endsection |