Display featured events

featured-events.twig

<small>
    <a
        href="/calendar"
        class="float-end text-decoration-none"
        title="Full calendar"
    >
        View full calendar
    </a>
</small>

<h2 class="mb-4">
    Upcoming Events
</h2>

<div class="row">
    {% for key, event in events %}
        {% set event = event[0] %}
        {% if event %}
            <div class="col-6 col-md-3">
                <a
                    href="{{ rows[key].link }}"
                    target="_blank"
                    title="{{ event.getSummary }}"
                    class="event-card text-decoration-none"
                >
                    <div
                        class="ratio ratio-16x9 mb-3"
                        style="background-image: url({{ Image(rows[key].image).src }});"
                    >
                    </div>

                    <h6>
                        <strong>
                            {{ event.getSummary }}
                        </strong>
                        <br/>
                        {{ event.start.date|formatDate }}
                        {{ event.start.dateTime|formatDateTime }}
                    </h6>
                    <p class="text-secondary">
                        {{ event.getDescription|excerpt(25) }}
                    </p>
                </a>
            </div>
        {% endif %}
    {% endfor %}
</div>

functions.php

acf_register_block_type([
    'name' => 'tbc_featured_events',
    'title' => 'TBC Featured Events',
    'render_callback' => function() {
        $context = Timber::context();

        $calendar = new Calendar;

        $context['rows'] = get_field( 'events' );

        $context['events'] = [];

        foreach ( $context['rows'] as $row ) {
            $context['events'][] = $calendar->getEventsByTerm( $row['search_term'] );
        }

        Timber::render( 'block/featured-events.twig', $context );
    },
    'icon' => 'calendar-alt',
]);