Forum

Thread tagged as: Question, Events

Output event day and event time separately

I'm designing event pages rendered from the event.detail.html template, and I would really like to output the day of the event and the time that the event starts separately in different elements, if that's possible. Searching the forum, I think it is possible, perhaps by using this "for" attribute described here:

for="eventDateTime_year eventDateTime_month eventDateTime_day eventTitle"

I can't get it to work for me, though. I see clearly there's a component of the eventDateTime object for the day, but is there such a thing as eventDateTime_time?

I see in the documentation we can set time=true. Maybe that enables it? If so, I can't see how it works in my own testing.

Here's my template, so you can see what I was trying to do -- but even though I try to isolate specific parts of the eventDateTime object in the two <span> elements, both date and time always seem to get output. (Actually, the commented out <span> doesn't output anything when uncommented, at the moment. The span that's currently uncommented does output both date and time, but I only want it to output time.)

<div class="module-flex_row callout-heading">
    <h2 class="summary"><perch:events id="eventTitle" /></h2>
</div>

<div class="row type-event">

  <div class="vevent">

      <p class="dtstart">
        <span class="value-title" title="<perch:events id="eventDateTime" format="c" />">
          <!-- <span class="component-event_day"><perch:events id="eventDateSlug" for="eventDateTime_month eventDateTime_day" format="%c" /></span> -->
          <span class="component-event_time"><perch:events id="eventDateTime" for="eventDateTime_time" format="%c" time="true" /></span>
          <!--* Nope, I've got to read the docs. I need event date and event time output separately. *-->
        </span>
      </p>

      <div class="description"><perch:events id="eventDescHTML" type="textarea" textile="true" editor="markitup" encode="false" /></div>

      <perch:if exists="image">
        <div class="component-image">
          <img src="<perch:events id="image" type="image" label="Image" width="640" crop="true" />" alt="<perch:events id="eventTitle" />" />
        </div>
      </perch:if>

      <p class="category"><a href="category.php?cat=<perch:events id="category_slugs" />"><perch:events id="category_names" /></a></p>


  </div>

</div>
Paul Lee

Paul Lee 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

You can do that with the format attribute:

Date: <perch:events id="eventDateTime" type="date" format="%d %B %Y" />

Time: <perch:events id="eventDateTime" type="date" format="%H %I" />

Codes: https://php.net/manual/en/function.strftime.php

Thank you. I'll study those PHP string parameters.