By using this sample code you can create a custom view running HAPI. By simply creating a new page and then setting the marketing keyword to events it will automatically switch to your template.
<section class="" id="events">
<div class="j-card" data-pv-component="event" data-pv-object="dt" data-pv-parameters="{returnTotal:'8'}" data-pv-type="eventlist">
<img alt="event graphic" class="image" src="{@event_graphic@}">
<div class="details">
<div class="j-row">
<p class="j-date"><span class="day" data-pv-element="event_date" data-pv-formatter="date(ddd, MMM d)" style="font-weight:bold;">Day, Month ##</span> | <span class="time" data-pv-element="event_date" data-pv-formatter="date(time)">##:## ?M</span></p>
<p class="tag" data-pv-element="category_name">Tag</p>
</div>
<h3 class="title"><a data-pv-element="event_title" href="/event/{@event_no@}">This is the title of the card</a></h3>
<p class="description" data-pv-element="event_summary">TEXT HERE</p>
<a class="ph-btn" href="/event/{@event_no@}">View Event</a>
</div>
</div>
</section>
As you can see in the div.j-card we are calling component event and type eventlist and returning the next 8 events. As you loop through the data, you can see you can provide a combination of {@@} variables or data-pv-element for the object names.
If you wanted to include past events, you could setup a 2nd section with new parameters including date_from and date_to. In the event you wanted to create a dynamic filer, you can use the following date variables too.
{@thisMonthStart@}-{@thisMonthEnd@}
{@nextMonthStart@}-{@nextMonthEnd@}
{@lastMonthStart@}-{@lastMonthEnd@}
{@today@}
{@today:addDays(#)@}
{@today:addMonths(#)@}
{@today:addYears(#)@}
So to filter for the past 30 days, you could do:
data-pv-parameters="{date_from: {@today:addDays(-30)@}, date_to: {@today@}}"