Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
 tribikram
|
a978c65643 | 2 years ago |
|
tribikram
|
1484a33139 | 2 years ago |
7 changed files with 284 additions and 9 deletions
@ -0,0 +1,82 @@ |
||||
/*! Zabuto Calendar - v2.1.0 - 2022-12-29 |
||||
* https://github.com/zabuto/calendar |
||||
* Copyright (c) 2022 Anke Heijnen; Licensed MIT */ |
||||
.zabuto-calendar { |
||||
width: 100%; |
||||
margin: 0; |
||||
padding: 0 |
||||
} |
||||
|
||||
.zabuto-calendar__navigation__item--next, |
||||
.zabuto-calendar__navigation__item--prev { |
||||
text-align: center; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.zabuto-calendar__navigation__item--header { |
||||
text-align: center |
||||
} |
||||
|
||||
.zabuto-calendar__navigation__item--header__title { |
||||
cursor: pointer; |
||||
font-weight: bolder |
||||
} |
||||
|
||||
.zabuto-calendar__days-of-week__item { |
||||
text-align: center |
||||
} |
||||
|
||||
.zabuto-calendar__day { |
||||
text-align: center |
||||
} |
||||
|
||||
.zabuto-calendar__day--today { |
||||
text-align: center |
||||
} |
||||
|
||||
.zabuto-calendar.table td, |
||||
.zabuto-calendar.table th { |
||||
vertical-align: middle |
||||
} |
||||
|
||||
.zabuto-calendar.table thead td { |
||||
padding-top: 14px; |
||||
padding-bottom: 14px; |
||||
background-color: #fafafa |
||||
} |
||||
|
||||
.zabuto-calendar.table-bordered thead td { |
||||
border: 0 |
||||
} |
||||
|
||||
.zabuto-calendar.table thead th { |
||||
background-color: #f0f0f0 |
||||
} |
||||
|
||||
.zabuto-calendar.table>thead:first-child>tr:first-child>td { |
||||
border-top: 1px solid #ddd |
||||
} |
||||
|
||||
.zabuto-calendar.table>thead>tr>th { |
||||
border-bottom: 2px solid #ddd |
||||
} |
||||
|
||||
.zabuto-calendar.table>tbody td { |
||||
width: calc(100% / 7) |
||||
} |
||||
|
||||
.zabuto-calendar.table>tbody>tr:last-child>td { |
||||
border-bottom: 1px solid #ddd |
||||
} |
||||
|
||||
.zabuto-calendar.table>tbody td .badge { |
||||
font-size: 100% |
||||
} |
||||
|
||||
.zabuto-calendar.clickable>tbody td { |
||||
cursor: pointer |
||||
} |
||||
|
||||
.zabuto-calendar.table.clickable>tbody td:hover { |
||||
background-color: #f0f0f0 |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,107 @@ |
||||
@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 |
||||
Loading…
Reference in new issue