HAPI Sample - Scheduler - Dining Reservations

Build a custom scheduler page using this sample code.


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@}&lt;&gt;" data-pv-noresultsmessage="&lt;li&gt;Reservations are unavailable at this time.&lt;/li&gt;" 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>

Additional Help Tutorials

Find more ways to grow on PeopleVine.

Display the total items in your shopping cart in your website header

By using the HAPI variables 0 and $0.00, you can add an always updated value within your website layout.

Posted September 12, 2019

Customize the /login with a Guest Checkout button when they're shopping in eCommerce

If you've customized your login page and are a member focused organization, but want to sell ecommerce merchandise to the public, you can setup a Guest Checkout option by following these steps.

Posted September 12, 2019

PeopleVine Check-In Tools - Featuring Fully Customizable Self-Service Check-In

See the tools available to you when checking in your members and the different data/experiences we can capture. In addition, introducing our new fully customizable self-service check-in.

Posted September 11, 2019

PeopleVine Integrates

Posted September 9, 2019

The Ultimate Guide to Importing Data into PeopleVine

You can easily import your data to PeopleVine by placing it in a CSV file and mapping the data to the appropriate fields in PeopleVine. Check out this guide for some samples and the overall data model.

Posted September 6, 2019

Prompt Questions When Checking Someone In At Your Space

Now when your members are checked in using the Control Panel, /Checkin or when scanning their QR code you can prompt a form to capture information on their visit.

Posted August 10, 2019

Ready for a Real Billing Platform (for those not using PeopleVine Billing)

Migrate to PeopleVine Billing for Memberships and streamline your business with the ultimate in "lock-down" abilities for non-payers. Get paid on-time and all the time with PeopleVine Billing.

Posted August 9, 2019

PeopleVine + SevenRooms = Hospitality Perfected

We are proud to introduce our latest update to the platform that includes a tighter integration with SevenRooms to create the ultimate hospitality experience.

Posted August 9, 2019

PeopleVine Webhooks Sync Your Data in Real-Time with Any Other System (if you needed to)

With PeopleVine Webhooks, you can sync every touchpoint with your existing systems to keep your legacy platforms updated in real-time. This article will show you how to setup a webhook and dynamically populate the data into it.

Posted July 29, 2019

Leverage "Get Items" to Automatically Issue Perks to Members + Re-Issue Perks

You can leverage the "get items" feature in order to issue perks to your members after signing up and renewing annually.

Posted July 29, 2019

Process Payment on File API Call

Learn how to connect your POS to PeopleVine and leverage our payment on file API for enabling convenience to your customers.

Posted July 27, 2019

HAPI - Setup a custom page displaying available locations based on the user's location

This code sample provides a way to automatically sort your locations by the closest distance to the user.

Posted July 22, 2019

Add Facebook Pixel Tracking to Your Website - Step by Step Guide

See how to add a Facebook Tracking Pixel to your website and start to target specific actions.

Posted July 12, 2019

New Reports + Improved Reporting Engine

Check out the new reporting tools and grid view with sorting and filtering of the live data.

Posted July 9, 2019

© PeopleVine 2019. Powered by PeopleVine. Terms of use | Privacy & cookies