Customize the /events page with HAPI and this Template

We've setup a template to display/hide events based on filters. Here's our template.


First off, to enable this template on your website, make sure you set the page keyword to events under the SEO & Options.  This will then override our out of the box page with this custom screen.  Enjoy.


<section class="container-fluid">
	<div class="container">
		<div class="row">
			<div class="col text-center">
				<h1>Search Events</h1>
			</div><!-- // .col -->
		</div><!-- // .row -->
	</div><!-- // .container -->

	<div class="container">
		<div class="row">
			<div class="col-xl-10 offset-xl-1">
				<div class="form-row text-center mb-0">
					<div class="form-group col-6 col-lg-3 col-xl-2">
						<label for="date_from">Start Date</label>
						<input class="form-control bs-datepicker" type="text" id="date_from" name="date_from" placeholder="MM/DD/YYYY"/>
					</div><!-- // .form-group -->
					<div class="form-group col-6 col-lg-3 col-xl-2">
						<label for="date_to">End Date</label>
						<input class="form-control bs-datepicker" type="text" id="date_to" name="date_to" placeholder="MM/DD/YYYY" />
					</div><!-- // .form-group -->
					<div class="form-group col-lg-6 col-xl-4">
						<label for="event_name">Search by Event Name</label>
						<span class="input-search">
							<input class="form-control" type="text" id="event_title" name="event_name" />
						</span><!-- // .input-search -->
					</div><!-- // .form-group -->
					<div class="form-group col-lg-6 offset-lg-1 col-xl-2 offset-xl-0">
						<label for="start_date">Filter by</label>
						<select class="form-control" id="category_no" name="category_no">
						    <option value="0">Select Category</option>
							<option data-pv-component="categories" data-pv-parameters="{reference_type: 'event'}" value="3241" data-pv-element="category_name">NAME</option>
						</select>
					</div><!-- // .form-group -->
					<div class="form-group col-lg-3 col-xl-2">
						<br>
						<a href="#" class="btn btn-primary btn-block" id="btnApply">Apply</a>
					</div><!-- // .form-group -->
				</div><!-- // .form-row -->
			</div><!-- // .col -->
		</div><!-- // .row -->
		<div class="row mt-2 mb-5 justify-content-center">
			<div class="col-xl-9">
				<div class="row">
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=9/22/2023 12:00 AM&date_to=9/22/2023 11:59 PM&date_range=today" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_today">Today</a>
					</div><!-- // .col -->
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=9/23/2023 12:00:00 AM&date_to=9/23/2023 11:59:59 PM&date_range=tomorrow" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_tomorrow">Tomorrow</a>
					</div><!-- // .col -->
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=9/17/2023 12:00 AM&date_to=9/23/2023 11:59:59 PM&date_range=thisweek" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_thisweek">This Week</a>
					</div><!-- // .col -->
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=9/24/2023 12:00 AM&date_to=9/30/2023 11:59:59 PM&date_range=nextweek" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_nextweek">Next Week</a>
					</div><!-- // .col -->
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=9/1/2023 12:00 AM&date_to=9/30/2023 11:59:59 PM&date_range=thismonth" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_thismonth">This Month</a>
					</div><!-- // .col -->
					<div class="col-md-6 col-lg-4 col-xl-2 mb-3 col-tight">
						<a href="?date_from=1/1/2023 12:00 AM&date_to=12/31/2023 11:59:59 PM&date_range=thisyear" class="btn btn-outlined btn-block btn-txt-sm" id="date_range_thisyear">This Year</a>
					</div><!-- // .col -->
				</div><!-- // .row -->
			</div><!-- // .col -->
		</div><!-- // .row -->
	</div><!-- // .container -->

	<div class="container">
		<div class="row">
		    <div class="col-xl-4 col-lg-6 align-self-stretch mb-4" data-pv-component="event" data-pv-type="eventlist" data-pv-parameters="{returnTotal: 24}" data-pv-noresultshide="#upcomingevents">
				<div class="card card-image mb-3">
					<div class="card-img-box-mask">
						<a href="/event/{@event_no@}"><img src="https://members.thefbrk.com/media/212153/media/1008/assets/img/stair_image.png" alt="{@event_title@}" data-pv-element="event_graphic"></a>
					</div><!-- // .card-img-box -->
					<div class="card-header card-header-static">
						<div class="split-items mb-3">
							<span class="card-date" data-pv-element="event_date" data-pv-formatter="date(dddd, MMM d | h:mm tt)">Friday, Jan 10 | 2:00 PM</span>
							<span class="card-privacy" data-pv-element="category_name">PRIVATE EVENT</span>
						</div><!-- // .split-items -->
						<h4 class="card-title align-self-end mb-2" data-pv-element="event_title">FBRK Community Mixer</h4>
					</div><!-- // .card-header -->
					<div class="card-body">
						<p class="card-text" data-pv-element="event_summary"><strong class="underlined text-black"><u>MEMBERS ONLY:</u></strong> Join the FBRK community as we announce new and exciting Events at our Impact House.  Special guests, live entertainment from some of Chicago’s best performers and a chance to meet XYZ and copy filler here in this area.</p>
						<p class="card-text"><small class="text-muted">Added <span data-pv-element="created_on" data-pv-formatter="ago">3 mins ago</span></small></p>
					</div><!-- // .card-body -->
					<div class="card-footer">
						<a href="/event/{@event_no@}" class="btn btn-outlined btn-sm-block" role="button">View Event</a>
					</div><!-- // .card-footer -->
				</div><!-- // .card -->
			</div><!-- // .col -->
		</div><!-- // .row -->
	</div><!-- // .container -->
</section>

Add this to the Javscript Section.

if (getQuery("date_from") != '' && getQuery("date_from") != null) {    var dt = new Date(getQuery("date_from"));    $("#date_from").val((dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear());}if (getQuery("date_to") != '' && getQuery("date_to") != null) {    var dt = new Date(getQuery("date_to"));    $("#date_to").val((dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear());}if (getQuery("event_title") != '' && getQuery("event_title") != null)    $("#event_title").val(getQuery("event_title"));    if (getQuery("category_no") != '' && getQuery("category_no") != null)    $("#category_no").val(getQuery("category_no"));$("#btnApply").on("click", function () {    var dt = new Date($("#date_to").val());    var df = new Date($("#date_from").val());    var goPath = window.location.pathname + '?date_from=' + (!isNaN(df.getTime()) ? (df.getMonth() + 1) + '/' + df.getDate() + '/' + df.getFullYear() : '') + '&date_to=' + (!isNaN(dt.getTime()) ? (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear() : '') + '&event_title=' + $("#event_title").val() + '&category_no=' + $("#category_no").val();    //console.log(goPath);    window.location.href = goPath;});

Additional Help Tutorials

Find more ways to grow on PeopleVine.

Transaction Reporting has an Upgrade

We updated the Transaction Reporting screen to provide you with the data necessary to provide a glimpse at your revenue and the necessary data to audit your financials.

Posted September 7, 2023

You Can Set the Time to Process Authorizations

When a charge is processed through your POS, the charge may be Authorized until we capture the tip or at the end of day to handle refunds or changes. In this case, you can now set the time as to when we will process your authorizations.

Posted August 28, 2023

Adding Your Alliants Integration

Follow these steps to connect Peoplevine with your Alliants account for messaging.

Posted August 28, 2023

Setup Your Membership Tiers Based on Age

You can enable your membership tier to be for members between certain ages, when they past that age, they will automatically migrate to the next age tier.

Posted August 22, 2023

Follow these steps to update your Twilio settings to ensure delivery

This article will overview how to setup your brand and campaigns for broader/better delivery.

Posted August 10, 2023

Select Which Transaction Types You Want to Sync with Quickbooks

You're able to select which types of transaction items you want to sync to Quickbooks.

Posted June 14, 2023

Configure your Member Portal to Show Spa and Wellness

Once your Spa and Wellness feature is enabled, you need to configure the following to display on your member portal.

Posted June 14, 2023

Setup a Temporary ID for Hotel Guests

You can allow hotel guests to act as a member during their time at your property by leveraging these settings.

Posted May 23, 2023

We've updated the Scheduler Engine with some New Features

Check out these additions that will increase the functionality of your schedulers.

Posted May 22, 2023

Send E-mails Prior to An Appointment, Reservation or Event with Pre-Arrival Campaigns

A new campaign type is set up for pre-arrivals, allowing you to send messaging to a person prior to them arriving for their appointment, reservation or event.

Posted May 2, 2023

Change the Currency you charge in for GoCardless and Stripe

You can now charge people in their local currency by using our "switch currency" option when charging a transaction or subscription (for recurring billing).

Posted February 23, 2023

We Are Expanding Our Platform for Global Capabilities including Country Codes

We updated our platform to store the country code when storing a person's phone number or mobile number. This will assist with ensuring your data is properly formatted, plus more!

Posted February 21, 2023

Register Your Twilio Account for A2P 10DLC Registration with the Carriers to Ensure Delivery

Due to requirements in the US, all clients using Twilio to send SMS to US based customers must register their business and campaigns for outbound messages.

Posted January 6, 2023

Peoplevine is Live on the Toast Marketplace for 1-click Enablement

We've made it easier for you to activate Peoplevine with Toast by using the standard integration.

Posted December 9, 2022

Track an Alternate ID for Membership Card Scans and Identify Primary Membership

We made some updates to the membership experience by adding an alternate ID used to ensure keycards and other IDs are scannable in our platform along with flagging the primary membership.

Posted November 29, 2022

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