Event Calendar Module: How to List Past Events and Future Events Separately

Develop, Build & Integrate CMS Development
1

Hi. In a page module, I’m trying to have update it so that upcoming events display in one section of the page, and past events display in another section of the page. Currently, all events (regardless of date) are displaying in one list. The code for the module is below, and the URL of the page is Katzcy® | Advancing Cybersecurity Workforce Through Games, Events, & Marketing

I’m a novice with HubSpot, but experienced with HTML and CSS. Thanks in advance for any assitance!

<div class="event-calender-wrap">
 <div class="event-calender-top">
 <div class="event-calender-in">
 <div class="event-calender-title">
 <div class="event-calender-title-inner"><h2>Upcoming Events</h2></div>
 </div>
 <div class="event-wrap upcomming-event-wrap">
 {% for item in module.event_item %}
 {% set crnt_dt = local_dt|datetimeformat('%Y') %}
 {% set evt_dt = item.start_date|datetimeformat('%Y') %}
 {% set crnt_m = local_dt|datetimeformat('%m') %}
 {% set evt_d = item.start_date|datetimeformat('%m') %}
 {% set crnt_cd = local_dt|datetimeformat('%d') %}
 {% set evt_cd = item.start_date|datetimeformat('%d') %}
 {% if crnt_dt <= evt_dt and crnt_m <= evt_d and crnt_cd <= evt_cd %}
 <div class="upcomming-event-item">
 <div class="upcomming-event-item-in event-clearfix">
 <div class="upcomming-event-col upcomng-col-1">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.start_date|datetimeformat('%B %e, %Y') }}
 {% if item.end_date and item.start_date|datetimeformat('%B %e, %Y') != item.end_date|datetimeformat('%B %e, %Y') %}
 to<br>{{ item.end_date|datetimeformat('%B %e, %Y') }}
 {% endif %}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-2">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.title }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-3">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.place }}
 </div>
 </div>
 </div>
 {% if item.detail_link.url.href %}
 <div class="upcomming-event-col upcomng-col-4">
 <div class="upcomming-event-col-in">
 <div class="content">
 {% set href = item.detail_link.url.href %}
 {% if item.detail_link.url.type is equalto "EMAIL_ADDRESS" %}
 {% set href = "mailto:" + href %}
 {% endif %}
 <a class="event-link-btn" href="{{ href }}"
 {% if item.detail_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if item.detail_link.no_follow %}rel="nofollow"{% endif %}
 >
 Learn More
 </a>
 </div>
 </div>
 </div>
 {% endif %}
 </div>
 </div>
 {% else %}{% endif %}
 {% endfor %}

 </div>
 </div>
 </div>
 <div class="event-calender-middle">
 <div class="event-calender-middle-in event-clearfix">
 <div class="event-calender-col col-left">
 <div class="content">
 <div class="image">
 {% if module.featured_image.src %}
 <img src="{{ module.featured_image.src }}" alt="{{ module.featured_image.alt }}" {{ sizeAttrs }}>
 {% endif %}
 </div>
 </div>
 </div>
 <div class="event-calender-col col-right">
 <div class="content">
 <div class="event-calender-content-top">
 <div class="event-calender-content-in">
 <h4><strong>{{ module.title_sec }}</strong></h4>
 <p><span>{{ module.summary }}</span></p>
 </div>
 </div>
 {% if module.button_type == 'st' or module.button_type == 'ct' %}
 <div class="event-calender-content-bottom">
 <div class="event-calender-content-in">
 {% if module.button_type == 'st' %}
 {% set href = module.button.btn_link.url.href %}
 {% if module.button.btn_link.url.type is equalto "EMAIL_ADDRESS" %}
 {% set href = "mailto:" + href %}
 {% endif %}
 <a class="event-link-btn" href="{{ href }}"
 {% if module.button.btn_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if module.button.btn_link.no_follow %}rel="nofollow"{% endif %}
 >
 {{ module.button.btn_text }}
 </a>
 {% elif module.button_type == 'ct' %}
 {% cta guid="{{ module.cta_field }}" %}
 {% endif %}
 </div>
 </div>
 {% endif %}
 </div>
 </div>
 </div>
 </div>

 <div class="event-calender-bottom">
 <div class="event-calender-in">
 <div class="event-calender-title">
 <div class="event-calender-title-inner"><h2>Past Events</h2></div>
 </div>
 <div class="event-wrap past-event-wrap">
 {% for item in module.event_item %}
 {% set crnt_dt = local_dt|datetimeformat('%Y') %}
 {% set evt_dt = item.start_date|datetimeformat('%Y') %}
 {% set crnt_m = local_dt|datetimeformat('%m') %}
 {% set evt_d = item.start_date|datetimeformat('%m') %}
 {% set crnt_cd = local_dt|datetimeformat('%d') %}
 {% set evt_cd = item.start_date|datetimeformat('%d') %}

 {% if crnt_dt <= evt_dt and crnt_m <= evt_d and crnt_cd <= evt_cd %}{% else %}
 {% set st_pm = item.start_date|datetimeformat('%p') %}
 {% set end_pm = item.end_date|datetimeformat('%p') %}
 {% if st_pm == end_pm %}
 {% set start_pm = '' %}
 {% set end_pm = '' %}
 {% set full_pm = st_pm %}
 {% set dt_dev = '-' %}
 {% else %}
 {% set start_pm = " "+st_pm+" " %}
 {% set end_pm = " "+end_pm+" " %}
 {% set full_pm = '' %}
 {% set dt_dev = ' – ' %}
 {% endif %}
 <div class="past-event-item">
 <div class="past-event-item-in upcomming-clearfix">
 <div class="upcomming-event-col upcomng-col-1">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.start_date|datetimeformat('%B %e, %Y') }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-2">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.title }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-3">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.place }}
 </div>
 </div>
 </div>
 </div>
 </div>
 {% endif %}
 {% endfor %}

 </div>
 </div>
 </div>
</div>
2

Hi @SGriffinKatzcy, to display upcoming and past events separately, you can compare the unixtimestamp of today’s date and the event date (dividing by 1000 gets the day from unix time)

{% for item in module.event_item %}
 {% if unixtimestamp(local_dt)//1000 < unixtimestamp(item.start_date)//1000 %}
 ... upcoming events
 {% endif %}
{% endfor %}

Then reverse for past events, so local_dt > item.start_date.

3

Hi @piersg , thanks so much for your reply and this information! I really appreciate you taking your time to help me and others in the community.

I was able to get the correct events to display in the list of past events with unixtimestamp, but for some reason, the upcoming events are still not displaying (there should be one). Is there an error somewhere in my code?

<div class="event-calender-wrap">
 <div class="event-calender-top">
 <div class="event-calender-in">
 <div class="event-calender-title">
 <div class="event-calender-title-inner"><h2>Upcoming Events</h2></div>
 </div>
 <div class="event-wrap upcomming-event-wrap">
 {% for item in module.event_item %}
 {% if unixtimestamp(local_dt)//1000 < unixtimestamp(item.start_date)//1000 %}
 {% set crnt_dt = local_dt|datetimeformat('%Y') %}
 {% set evt_dt = item.start_date|datetimeformat('%Y') %}
 {% set crnt_m = local_dt|datetimeformat('%m') %}
 {% set evt_d = item.start_date|datetimeformat('%m') %}
 {% set crnt_cd = local_dt|datetimeformat('%d') %}
 {% set evt_cd = item.start_date|datetimeformat('%d') %}
 {% if crnt_dt <= evt_dt and crnt_m <= evt_d and crnt_cd <= evt_cd %}
 <div class="upcomming-event-item">
 <div class="upcomming-event-item-in event-clearfix">
 <div class="upcomming-event-col upcomng-col-1">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.start_date|datetimeformat('%B %e, %Y') }}
 {% if item.end_date and item.start_date|datetimeformat('%B %e, %Y') != item.end_date|datetimeformat('%B %e, %Y') %}
 to<br>{{ item.end_date|datetimeformat('%B %e, %Y') }}
 {% endif %}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-2">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.title }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-3">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.place }}
 </div>
 </div>
 </div>
 {% if item.detail_link.url.href %}
 <div class="upcomming-event-col upcomng-col-4">
 <div class="upcomming-event-col-in">
 <div class="content">
 {% set href = item.detail_link.url.href %}
 {% if item.detail_link.url.type is equalto "EMAIL_ADDRESS" %}
 {% set href = "mailto:" + href %}
 {% endif %}
 <a class="event-link-btn" href="{{ href }}"
 {% if item.detail_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if item.detail_link.no_follow %}rel="nofollow"{% endif %}
 >
 Learn More
 </a>
 </div>
 </div>
 </div>
 {% endif %}
 </div>
 </div>
 {% else %}{% endif %}{% endif %}
 {% endfor %}

 </div>
 </div>
 </div>
 <div class="event-calender-middle">
 <div class="event-calender-middle-in event-clearfix">
 <div class="event-calender-col col-left">
 <div class="content">
 <div class="image">
 {% if module.featured_image.src %}
 <img src="{{ module.featured_image.src }}" alt="{{ module.featured_image.alt }}" {{ sizeAttrs }}>
 {% endif %}
 </div>
 </div>
 </div>
 <div class="event-calender-col col-right">
 <div class="content">
 <div class="event-calender-content-top">
 <div class="event-calender-content-in">
 <h4><strong>{{ module.title_sec }}</strong></h4>
 <p><span>{{ module.summary }}</span></p>
 </div>
 </div>
 {% if module.button_type == 'st' or module.button_type == 'ct' %}
 <div class="event-calender-content-bottom">
 <div class="event-calender-content-in">
 {% if module.button_type == 'st' %}
 {% set href = module.button.btn_link.url.href %}
 {% if module.button.btn_link.url.type is equalto "EMAIL_ADDRESS" %}
 {% set href = "mailto:" + href %}
 {% endif %}
 <a class="event-link-btn" href="{{ href }}"
 {% if module.button.btn_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if module.button.btn_link.no_follow %}rel="nofollow"{% endif %}
 >
 {{ module.button.btn_text }}
 </a>
 {% elif module.button_type == 'ct' %}
 {% cta guid="{{ module.cta_field }}" %}
 {% endif %}
 </div>
 </div>
 {% endif %}
 </div>
 </div>
 </div>
 </div>

 <div class="event-calender-bottom">
 <div class="event-calender-in">
 <div class="event-calender-title">
 <div class="event-calender-title-inner"><h2>Past Events</h2></div>
 </div>
 <div class="event-wrap past-event-wrap">
 {% for item in module.event_item %}
 {% if unixtimestamp(local_dt)//1000 > unixtimestamp(item.start_date)//1000 %}
 {% set crnt_dt = local_dt|datetimeformat('%Y') %}
 {% set evt_dt = item.start_date|datetimeformat('%Y') %}
 {% set crnt_m = local_dt|datetimeformat('%m') %}
 {% set evt_d = item.start_date|datetimeformat('%m') %}
 {% set crnt_cd = local_dt|datetimeformat('%d') %}
 {% set evt_cd = item.start_date|datetimeformat('%d') %}

 {% if crnt_dt <= evt_dt and crnt_m <= evt_d and crnt_cd <= evt_cd %}{% else %}
 {% set st_pm = item.start_date|datetimeformat('%p') %}
 {% set end_pm = item.end_date|datetimeformat('%p') %}
 {% if st_pm == end_pm %}
 {% set start_pm = '' %}
 {% set end_pm = '' %}
 {% set full_pm = st_pm %}
 {% set dt_dev = '-' %}
 {% else %}
 {% set start_pm = " "+st_pm+" " %}
 {% set end_pm = " "+end_pm+" " %}
 {% set full_pm = '' %}
 {% set dt_dev = ' – ' %}
 {% endif %}
 <div class="past-event-item">
 <div class="past-event-item-in upcomming-clearfix">
 <div class="upcomming-event-col upcomng-col-1">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.start_date|datetimeformat('%B %e, %Y') }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-2">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.title }}
 </div>
 </div>
 </div>
 <div class="upcomming-event-col upcomng-col-3">
 <div class="upcomming-event-col-in">
 <div class="content">
 {{ item.place }}
 </div>
 </div>
 </div>
 </div>
 </div>
 {% endif %}{% endif %}
 {% endfor %}

 </div>
 </div>
 </div>
</div>
4

If you remove this if statement

{% if crnt_dt <= evt_dt and crnt_m <= evt_d and crnt_cd <= evt_cd %}...{% endif %}

does the upcoming event show up?

5

Ah, yes, success! Thank you so much @piersg !! You’re the best :grin: