Calendar events — fetching and looping

All upcoming events

<hh-for each="event" in='<hh-data.calendar-events
  where="start>@now"
  sort="start"
  limit="50" />'>
  <div>
    <strong>{event.title}</strong><br>
    Date: {event.start}<br>
    Location: {event.location}
  </div>
</hh-for>

With resource (consultant name)

<hh-for each="event" in='<hh-data.calendar-events
  include="calendar_resources.user"
  where="start>@now"
  sort="start"
  limit="50" />'>
  {event.title} —
  <hh-for each='res' in='event.calendar_resources' glue=", ">{res.user.name}</hh-for>
</hh-for>

Date range — use filter + @str2datetime (NOT where) for ranges

<hh-for each="event" in='<hh-data.calendar-events
  filter="start > @str2datetime[2025-12-01 00:00]"
  filter="start < @str2datetime[2025-12-31 23:59]"
  sort="start" limit="500" />'>
  {event.title} on {event.start}
</hh-for>

Count only

You have <hh-data.count><hh-data.calendar-events where="start>@now" /></hh-data.count> upcoming events.

Leads — fetch, filter, count

Recent leads (newest first)

<hh-for each="lead" in='<hh-data.leads
  sort="created_at"
  limit="10" />'>
  <div>
    <strong>{lead.name}</strong> — {lead.email} — {lead.phone}
  </div>
</hh-for>

Filter by status slug — note: spaces around = required

<hh-for each="lead" in='<hh-data.leads
  filter-status="slug = moede-booket"
  sort="created_at"
  limit="50" />'>
  {lead.name} - {lead.email}
</hh-for>

Filter by custom field value

<hh-for each="lead" in='<hh-data.leads
  filter-field_value="zipcode LIKE 20*"
  sort="created_at"
  limit="50" />'>
  {lead.name} - {lead.email}
</hh-for>

Count leads by status

Total: <hh-data.count><hh-data.leads /></hh-data.count>
Active: <hh-data.count><hh-data.leads filter-status="slug = active" /></hh-data.count>

Date formatting and calculation

<!-- Format a date placeholder -->
<hh-date.format value="%lead_created_at%" format="dd/MM/yyyy" />

<!-- Add 7 days to today -->
<hh-date.calculate value="@now" add-days="7" />

<!-- Use in a hidden input (pre-fill follow-up date = booking + 30 days) -->
<input type="hidden" name="followup_date"
  value="<hh-date.calculate value="%event_start_date%" add-days="30" />" />

Data fields — reading stored JSON values

<!-- Display a data field value on a web page or email -->
<hh-data-fields.value slug="df_my-field" />

<!-- Read a specific key from a JSON data field -->
<hh-data-fields.value slug="df_quote-data" key="totalPrice" />

Booking availability check

<!-- Check if a booking form has available slots (use in automation condition) -->
<hh-booking.available form="booking-form-slug" />

<!-- Show content only when slots are available -->
@if(<hh-booking.available form="konsultation" />){
  <a href="%page[book-nu,url]%">Book a time now</a>
}@else{
  No available times right now.
}@endif

Troubleshooting

• Component not rendering: Check for typos in tag name (must start with hh-). Confirm the component is used in a context that supports server-side rendering (emails, webpages, booking confirmation pages).
• Date range shows wrong results: Use filter + @str2datetime for ranges. where with two conditions is unreliable for date ranges.
• Status filter returns nothing: Verify the status slug (copy from Campaign Settings → Lead statuses — use the slug column, not the display name). Remember spaces around =: slug = my-status.
• Loop shows empty: Check that the campaign has leads/events matching your filter. Test without filters first, then add one filter at a time.
• Resource/service names blank in loop: Add include="calendar_resources.user" or include="calendar_services" to the data component.