This piece of code was used to check availability for dining reservations through our partner Sevenrooms, but can be re-purposed to accommodate any scheduler. To enable this template, simply set the page marketing keyword to schedule_appointment.
The code is broken down into the filter (with javascript) and the results to select.
Filter Options + Results
These filters are used to display relevant results:
<div class="pvwrap" id="PeopleVineContent">
<div class="ui-update portal">
<section class="component">
<div class="component-content">
<div class="box mix-box_outlined">
<div class="box-bd box-bd_inflated vr vr_x3">
<div class="split split_basisRight split_collapseOnMobile">
<h3 class="hdg hdg_6 mix-hdg_brandCallout">Make a Reservation:</h3>
</div>
<hr class="rule vr-override_x12">
<div data-pv-component="scheduler" data-pv-parameters="{schedule_item_no: 1520" data-pv-type="item">
<h1 class="hdg hdg_4" data-pv-element="schedule_item">Name of Scheduler</h1>
<div data-pv-element="schedule_item_description" style="font-size: 14pt;">
Summary
</div>
</div>
</div>
<div class="box-bd box-bd_inflated vr vr_x3">
<div class="split split_basisRight split_collapseOnMobile">
<h3 class="hdg hdg_6 mix-hdg_brandCallout">Enter Preferred Date and Time:</h3>
</div>
<hr class="rule vr-override_x12">
<ul class="gridList">
<li class="gridList-item gridList-item_1of4">
<span class="fieldset">
<span class="fieldset-input">
<input class="js-datepicker" id="from_date" placeholder="MM/DD/YYYY" type="text">
</span>
<span class="fieldset-detail"></span>
<span class="fieldset-error"></span>
</span>
</li>
<li class="gridList-item gridList-item_1of4">
<span class="fieldset">
<span class="fieldset-input">
<select id="from_time">
<option value="">Breakfast Service</option>
<option value="7:30">7:30 AM</option>
<option value="8:00">8:00 AM</option>
<option value="8:30">8:30 AM</option>
<option value="9:00">9:00 AM</option>
<option value="9:30">9:30 AM</option>
<option value="10:00">10:00 AM</option>
<option value="">-----------</option>
<option value="">Lunch Service</option>
<option value="11:30">11:30 AM</option>
<option value="12:00">12:00 PM</option>
<option value="12:30">12:30 PM</option>
<option value="13:00">1:00 PM</option>
<option value="13:30">1:30 PM</option>
<option value="">-----------</option>
<option value="">Dinner Service</option>
<option value="17:00">5:00 PM</option>
<option value="17:30">5:30 PM</option>
<option value="18:00">6:00 PM</option>
<option value="18:30">6:30 PM</option>
<option selected value="19:00">7:00 PM</option>
<option value="19:30">7:30 PM</option>
<option value="20:00">8:00 PM</option>
<option value="20:30">8:30 PM</option>
<option value="21:00">9:00 PM</option>
<option value="21:30">9:30 PM</option>
<option value="22:00">10:00 PM</option>
</select>
</span>
<span class="fieldset-detail"></span>
<span class="fieldset-error"></span>
</span>
</li>
<li class="gridList-item gridList-item_1of4">
<span class="fieldset">
<span class="fieldset-input">
<select id="total_guests">
<option value="1">1 person</option>
<option selected value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value="5">5 people</option>
<option value="6">6 people</option>
</select>
</span>
<span class="fieldset-detail"></span>
<span class="fieldset-error"></span>
</span>
</li>
<li class="gridList-item">
<span class="fieldset">
<a class="btn" href="#" id="btnApply">Show Availability</a>
</span>
</li>
</ul>
</div>
Please note that the closing tags are included in the next sample.
You can then display the results using this code:
<div class="box-bd box-bd_inflated vr vr_x3" id="selectTime">
<div class="split split_basisRight split_collapseOnMobile">
<h3 class="hdg hdg_6 mix-hdg_brandCallout">Select Preferred Time:</h3>
</div>
<hr class="rule vr-override_x12">
<ul class="blocks blocks_4to3to1 scheduleTimes" style="display: block;">
<li class="" data-date="{@slot_start@}" data-item-no="{@schedule_item_no@}" data-pv-component="scheduler" data-pv-conditional="{@q:from_date@}<>" data-pv-noresultsmessage="<li>Reservations are unavailable at this time.</li>" data-pv-parameters="{return_total: 10, from_date: '{@q:from_date@} {@q:from_time@}', to_date: '{@q:to_date@}', capacity: {@q:total_guests@}, schedule_item_no: 1520}" data-pv-type="availability" data-slot-no="{@schedule_slot_no@}" data-time="{@slot_start:time()@}" id="{@schedule_item_no@}-{@schedule_slot_n@}">
<a class="cardBtn" href="/checkout/schedule/{@schedule_item_no@}/slot/-1?start={@slot_start@}&qty={@capacity@}">
<div class="cardBtn-bd vr vr_centered">
<span class="cardBtn-txt cardBtn-txt_title">
<span data-pv-element="slot_start" data-pv-formatter="date(time)">3:30 PM</span>
</span>
<span data-pv-element="slot_subject">Schedule Item Name</span>
</div></a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
Lastly, you will need to add the javascript to be used to post back to the page. HAPI is rendered server side, so you will need to redirect the page to the new location. Keep in mind, this also allows you to pass data via the querystring and it will render in HAPI.
<script type="text/javascript">
new DatepickerHelper(".js-datepicker", {});
$(".js-datepicker").datepicker('setDate', new Date());
if (getQuery("from_date") != '' && getQuery("from_date") != null)
$("#from_date").val(getQuery("from_date"));
if (getQuery("from_time") != '' && getQuery("from_time") != null) {
var dt = new Date(getQuery("from_date") + ' ' + getQuery("from_time"));
dt.setTime(dt.getTime() + (1 * 60 * 60 * 1000)); //1 hour before selection
$("#from_time").val(dt.getHours() + ':' + (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes());
}
if (getQuery("total_guests") != '' && getQuery("total_guests") != null)
$("#total_guests").val(getQuery("total_guests"));
$("#btnApply").on("click", function () {
var dt = new Date($("#from_date").val() + ' ' + $("#from_time").val());
var todt = new Date(dt);
todt.setTime(todt.getTime() + (2 * 60 * 60 * 1000)); //2 hours after selection
dt.setTime(dt.getTime() - (1 * 60 * 60 * 1000)); //1 hour before selection
var from_time = dt.getHours() + ':' + (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes();
var todtstr = (todt.getMonth() + 1) + '/' + todt.getDate() + '/' + todt.getFullYear() + ' ' + todt.getHours() + ':' + (todt.getMinutes() < 10 ? '0' : '') + todt.getMinutes();
var goPath = window.location.pathname + '?from_date=' + (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear() + '&from_time=' + from_time + '&total_guests=' + $("#total_guests").val() + '&to_date=' + todtstr;
//console.log(goPath);
window.location.href = goPath;
});
</script>