@extends('layout.app') @section('title') <title>Book an Appointment</title> <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."> <meta name="robots" content="index, follow" /> <meta property="og:url" content="" /> <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/> <meta property="og:title" content="ET-Visas"/> <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/> @endsection @section('content') <section class="appointment-section"> <div class="row"> <div class="col-md-5"> <h1>Book an Appointment</h1> <div class="appointment-cards"> <a href="" class="appointment-card"> <div class="appointment-card-img"> <img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""> </div> <div> <h3>Education Services</h3> </div> </a> <a href="" class="appointment-card"> <div class="appointment-card-img"> <img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""> </div> <div> <h3>Visa Services</h3> </div> </a> </div> </div> <div class="col-md-7"> <div class="calender-section"> <div class="claender-top"> <p>Time Zone:</p> <h5>Australia / Sydney</h5> </div> <h2>Select available date</h2> <h3>Education services | 30 mins</h3> <div id="demo-calendar-apppearance"></div> <div class="available-dates"> <h5 id='available-dates'></h5> </div> </div> </div> </div> </section> @endsection @section('script') <script> var $calender = $("#demo-calendar-apppearance"); $(document).ready(function () { $calender.zabuto_calendar({ classname: 'table clickable table-bordered lightgrey-weekends', week_starts: 'monday', show_days: true, today_markup: '<span class="badge bg-primary">[day]</span>', navigation_markup: { prev: '<i class="fas fa-chevron-circle-left"></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) }); // 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