How to Setup Multi-Day Events with a Daily Schedule in Statamic

How-to-Setup-Multi-Day-Events-with-a-Daily-Schedule-in-Statamic.md

How to Setup Multi-Day Events with a Daily Schedule in Statamic

After trying several methods, I find this the best way to setup a multi-day events page in Statamic...especially if you need daily scheduled event times as well. Please see the finished product at https://www.fishcap.net/events/huk-bassmaster-elite-at-the-st-lawrence-river-presented-by-black-velvet.

1. Setup your collection fieldset as follows:

fields:
  start_date:
    display: Start Date
    type: date
    allow_blank: false
    allow_time: false
    require_time: false
    earliest_date: January 1, 1900
    width: 50
    validate: required
  end_date:
    display: End Date
    type: date
    allow_blank: false
    allow_time: false
    require_time: false
    earliest_date: January 1, 1900
    width: 50
    validate: required
  event_schedule:
    mode: table
    fields:
      schedule_day:
        type: text
        width: 25
        display: Day
      schedule_time:
        type: text
        width: 25
        display: Time
      schedule_name:
        type: text
        width: 25
        display: Name
      schedule_location:
        type: text
        width: 25
        display: Location
    type: grid
    display: Event Schedule
  event_body:
    settings: Standard
    restrict_assets: false
    type: redactor
    display: Event Body
    validate: required

2. Then add a couple entries and rows for the Daily Event Schedule Times

3. Setup your template code as follows on the index.html summary page. I am using the Zurb Foundation 6 framework but you can use anything you want for styling:

{{ collection:events end_date:is_after="yesterday" sort="start_date:asc" as="posts" paginate="true" limit="6" }}

{{ if no_results }}
  <p>Sorry, there are no results.</p>
{{ /if }}

<div class="grid-x grid-margin-x">
  {{ posts scope="post" }}
  <div class="small-12 medium-6 cell flex-container">
    <div class="card event-cards">
      <div class="card-section gray">
        <h4>{{ title }}</h4>
        <p><strong>{{ start_date format="F j, Y" }}{{ if end_date != start_date }} - {{ end_date format="F j, Y" }}{{ /if }}</strong></p>
        <p>
          {{ event_body | strip_tags | safe_truncate:100:... }}
          <a href="{{ url }}">Read More</a>
        </p>
      </div>
    </div>  
  </div>
  {{ /posts }}
</div>

<div class="grid-x grid-margin-x">
  <div class="small-12 cell">
  {{ paginate }}
    {{ auto_links }}
  {{ /paginate }}
  </div>
</div>

{{ /collection:events }}

4. Setup your entry.html page with the following code:

<div class="grid-container page-content">
  
  <div class="grid-x grid-padding-x">
    <div class="small-12 cell">
      <h1>{{ title }}</h1>
    </div>
  </div>

  <div class="grid-x grid-padding-x pb-1">
    <div class="small-12 cell">
      <h3>{{ start_date format="F j, Y" }}{{ if end_date != start_date }} - {{ end_date format="F j, Y" }}{{ /if }}</h3>
    </div>
  </div>

  <div class="grid-x grid-padding-x pb-1">
    <div class="small-12 cell">
      {{ event_body }}
    </div>
  </div>

  {{ if event_schedule:0 }}
  <div class="grid-x grid-padding-x">
    <div class="small-12 cell">
      <h3>Daily Schedule</h3>
      <div>
        <table class="stack" role='presentation'>
          <thead>
            <tr>
              <th>Day</th>
              <th>Time</th>
              <th>Location</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {{ event_schedule }}
            <tr>
              <td style="vertical-align: top;">{{ schedule_day }}</td>
              <td style="vertical-align: top;">{{ schedule_time }}</td>
              <td style="vertical-align: top;">{{ schedule_location }}</td>
              <td style="vertical-align: top;">{{ schedule_name }}</td>
            </tr>
            {{ /event_schedule }}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {{ /if }}
      
</div>

5. If you want an Event archived.html page, setup your template using this code:

{{ collection:events end_date:is_before="today" sort="start_date:asc" as="posts" paginate="true" limit="6" }}

{{ if no_results }}
  <p>Sorry, there are no results.</p>
{{ /if }}

<div class="grid-x grid-margin-x">
  {{ posts scope="post" }}
  <div class="small-12 medium-6 cell flex-container">
      <div class="card event-cards">
        <div class="card-section gray">
          <h4>{{ title }}</h4>
          <p><strong>{{ start_date format="F j, Y" }}{{ if end_date != start_date }} - {{ end_date format="F j, Y" }}{{ /if }}</strong></p>
          <p>
            {{ event_body | strip_tags | safe_truncate:100:... }}
            <a href="{{ url }}">Read More</a>
          </p>
        </div>
      </div>  
    </div>
  {{ /posts }}
</div>

<div class="grid-x grid-margin-x">
  <div class="small-12 cell">
  {{ paginate }}
    {{ auto_links }}
  {{ /paginate }}
  </div>
</div>

{{ /collection:events }}

6. Lastly setup in routes.yaml

collections:
  events: /events/{slug}

Hope this helps someone...