JezK
Edit File: rescheduleAppointment.php
<?php include('mainHeader.php')?> <link rel="stylesheet" href="src/mini-event-calendar.min.css"> <style> .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{ background: #b8d2de !important; border-radius:0; padding:5px 15px; border:unset !important; } .nav-tabs .nav-link{ padding:5px 15px; } .nav-link{ color:black; } </style> <section class="mt-5 pt-4 mx-5"> <div class="container-fluid bg-white text-dark pb-4 px-4 mb-4"> <div class="row"> <div class="col-xl-1 col-sm-6 col-md-4 mbrPadding text-center"> <div> <img src="img/dummybusinesspic.png"> </div> </div> <div class="col-xl-11 col-sm-6 col-md-8 videoConf"> <div class="row mt-4 pt-2"> <div class="col-xl-9 col-sm-6 col-md-8 mbrMargin"> <p class="mb-1 text-dark">Krify Services</p> <p class="mb-1">No. of Professionals : <span>5</span></p> <p class="mb-1"><img src="img/verified.png"> Verified</p> </div> <div class="col-xl-3 col-sm-6 col-md-8 mbrMargin text-right pt-4 mb-2"> <!-- <p class="mb-1 text-dark consultation-rate">Consultation 20$/ hr.</p> --> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary b-appointment">Confirm Appointment</a> </div> </div> </div> </div> <div class="row border-right border-bottom border-primaryTop mx-0 mb-3"> <div class="col-12 col-sm-4 col-xl-3 col-md-5 px-0"> <div id="calendar2" class="border-right border-left"></div> </div> <div class="col-12 col-sm-8 col-xl-9 col-md-7 mt-3"> <h3>29 Aug, 2019</h3> <form method="post" action="" class=""> <div class="row mx-0"> <p class="fs-14">Morning</p> <div class="table-responsive"> <table class="slot-book" cellspacing="0"> <tbody> <tr> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">09:00-09:20AM</div></td> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">09:20-09:40AM</div></td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">09:40-10:00AM</div></td> <td><div class="p-1 slotNot-available text-white text-nowrap fs-14 mr-1">10:00-10:20AM</div></td> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">10:20-10:40AM</div></td> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">10:40-11:00AM</div> </td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">11:00-11:20AM</div> </td> <td><div class="p-1 slotNot-released text-white text-nowrap fs-14 mr-1">11:20-11:40AM</div></td> </tr> </tbody> </table> </div> </div> <div class="row mx-0 mt-4"> <p class="fs-14">Afternoon</p> <div class="table-responsive"> <table class="slot-book" cellspacing="0"> <tbody> <tr> <td><div class="p-1 slotNot-released text-white text-nowrap fs-14 mr-1">12:00-12:20AM</div></td> <td><div class="p-1 slotNot-released text-white text-nowrap fs-14 mr-1">12:20-12:40AM</div> </td> <td><div class="p-1 slotNot-released text-white text-nowrap fs-14 mr-1">12:40-01:00AM</div></td> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">01:00-01:20AM</div> </td> <td><div class="p-1 slotFull text-white text-nowrap fs-14 mr-1">01:20-01:40AM</div> </td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">01:40-02:00AM</div> </td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">02:00-02:20AM</div></td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1"> 2:20-02:40AM</div></td> </tr> </tbody> </table> </div> </div> <div class="row mx-0 mt-4"> <p class="fs-14">Evening</p> <div class="table-responsive"> <table class="slot-book" cellspacing="0"> <tbody> <tr> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">03:00-03:20AM</div></td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">03:20-03:40AM</div> </td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">03:40-04:00AM</div></td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">04:00-41:20AM</div> </td> <td><div class="p-1 slotAvailable text-white text-nowrap fs-14 mr-1">04:20-04:40AM</div> </td> <td><div class="p-1 slot-grey text-white text-nowrap fs-14 mr-1">04:40-05:00AM</div> </td> <td><div class="p-1 slot-grey text-white text-nowrap fs-14 mr-1">05:00-05:20AM</div></td> <td><div class="p-1 slot-grey text-white text-nowrap fs-14 mr-1">05:20-05:40AM</div></td> </tr> </tbody> </table> </div> </div> <div class="row mx-0 mt-4"> <div class="col-12 col-lg-2 col-sm-3 col-md-3 p-0"><span class="s-available"></span ><span class="span-text1">Available</span></div> <div class="col-12 col-lg-2 col-sm-3 col-md-3 p-0"><span class="s-full"></span><span class="span-text2">Slot is full</span></div> <div class="col-12 col-lg-3 col-sm-3 col-md-3 p-0"><span class="s-n-released"></span><span class="span-text3">Slot Not Released</span></div> <div class="col-12 col-lg-4 col-sm-3 col-md-3 p-0"><span class="s-n-available"></span><span class="span-text4">Slot Not Available</span></div> </div> </form> </div> </div> <!-- <div class="border mx-0"> <ul class="nav nav-tabs border-0" role="tablist"> <li class="nav-item"> <a class="nav-link active top-tabs" data-toggle="tab" href="#ongoing">Overview</a> </li> <li class="nav-item"> <a class="nav-link top-tabs" data-toggle="tab" href="#upcoming">Q & A</a> </li> </ul> <div class="tab-content"> <div id="ongoing" class="container tab-pane active UserFont"><br> <h6>About</h6> <p class="paraColor mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="row"> <div class="col-xl-4 col-sm-6 col-md-4 border-right UserFont"> <p class="paraColor"><img src="img/address.png"> Address</p> <p class="mb-1">7-58, Ratan Towers, ABD road</p> <p class="mb-1">Timmapuram,</p> <p class="mb-1">Kakinada,</p> <p class="mb-1">Andhra Pradesh.</p> </div> <div class="col-xl-4 col-sm-6 col-md-4 border-right UserFont"> <p class="paraColor"><img src="img/timings.png"> Timings</p> <p class="mb-1">Mon - Fri : 10.00AM -6.00PM</p> </div> <div class="col-xl-4 col-sm-6 col-md-4 UserFont"> <p class="paraColor"><img src="img/services.png"> Services</p> <p class="mb-1">Logo Designs</p> <p class="mb-1">Graphics</p> <p class="mb-1">Web Services</p> <p class="mb-1">Web Design</p> </div> </div> </div> <div id="upcoming" class="container tab-pane UserFont"><br> <div id="accordion" class="accordion"> <div class="card mb-0"> <div class="card-header collapsed border pb-0" data-toggle="collapse" href="#collapseOne"> <a class="card-title">Item 1</a> </div> <div id="collapseOne" class="card-body collapse" data-parent="#accordion" > <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </p> </div> <div class="card-header collapsed border pb-0" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="card-title">Item 2</a> </div> <div id="collapseTwo" class="card-body collapse" data-parent="#accordion" > <div class="border mx-0"> </div> </div> </div> </div> </div> </div> --> </div> </section> <?php include('mainFooter.php')?> <script src="src/mini-event-calendar.min.js"></script> <script> $(document).ready(function(){ $("#calendar2").MEC({ months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], daysMin: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'], // dayLetter: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] }); //if you don't have events, use // $("#calendar2").MEC(); }); </script>