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="{@[email protected]}">
    <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/{@[email protected]}">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/{@[email protected]}">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.

So to filter for the past 30 days, you could do:

data-pv-parameters="{date_from: {@today:addDays(-30)@}, date_to: {@[email protected]}}"


Did this answer your question?