Upcoming events features and fixes. (#626)

Corrects the display of upcoming events over all the website.

Author: kattni

assets/static/beeware.css

@@ -625,3 +625,15 @@ body {
   padding: 0 1em 1em 0em;
   margin-left: -1em;
 }
+
+/*----------------------------------------------------
+  Upcoming Event on Homepage
+ --------------------------------------------------- */
+
+.upcoming_event_info {
+  margin-top: -1rem;
+}
+
+p.upcoming_event_date {
+  font-size: 110%;
+}

content/news/events/europython-2025-sprints/contents.lr

@@ -7,3 +7,5 @@ event_type: sprint
 speaker: Russell Keith-Magee
 ---
 url: https://ep2025.europython.eu
+---
+end_date: 2025-07-20

content/news/events/europython-2025/contents.lr

@@ -10,7 +10,7 @@ In this hands-on tutorial, you'll lean how you can use the BeeWare suite of tool
 
 No experience with mobile or desktop app development is required; a basic familiarity with Python is all you need. By the end of the tutorial, you'll have an app running on your own phone, written entirely by you, using nothing but Python.
 ---
-event_type: talk
+event_type: tutorial
 ---
 speaker: Russell Keith-Magee
 ---

content/news/events/pycon-us-2025-sprints/contents.lr

@@ -7,3 +7,5 @@ event_type: sprint
 speaker: Russell Keith-Magee, Malcolm Smith
 ---
 url: https://us.pycon.org/2025/
+---
+end_date: 2025-05-21

models/event.ini

@@ -32,6 +32,11 @@ label = Event date
 type = date
 width = 1/4
 
+[fields.end_date]
+label = Event end date
+type = date
+width = 1/4
+
 [fields.talk_title]
 label = Talk Title
 type = string

templates/event.html

@@ -28,7 +28,7 @@
   <div class="container">
     <p>{{ breadcrumbs(this) }}</p>
     <h1>{{ this.title }} ({{ this.event_type|title }})</h1>
-    <p>{{ this.date|datetimeformat("EEEE, MMMM d, YYYY", locale=this.alt)|title }}</p>
+    <p>{{ this.date|datetimeformat("EEEE, MMMM d, YYYY", locale=this.alt)|title }} {% if this.end_date %} - {{this.end_date|datetimeformat("EEEE, MMMM d, YYYY", locale=this.alt)|title}}{% endif %}</p>
   </div>
 </div>
 {% endblock %}
@@ -52,7 +52,7 @@ <h3>{{ t_what_is_a_sprint }}</h3>
   <div class="col-sm-12 col-md-4 gutter">
     <dl>
       <dt>{{ t_date|trim }}:</dt>
-      <dd>{{ this.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}</dd>
+      <dd>{{ this.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}{% if this.end_date %} - {{this.end_date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title}}{% endif %}</dd>
 
       {% if this.event_type == "sprint" %}
         <dt>{{ t_sprinters|trim }}:</dt>

templates/events.html

@@ -12,13 +12,22 @@
     var today = new Date();
     $('.upcoming.event').each(function() {
       var event_date = new Date($(this).data('date'));
-      if (event_date >= today) {
+      var event_end_date = $(this).data('end_date') ? new Date($(this).data('end_date')) : new Date($(this).data('date'));
+      if (event_date > today || (event_date >= today && event_end_date >= today)) {
+        $(this).hide();
+      }
+    });
+    $('.current.event').each(function() {
+      var event_date = new Date($(this).data('date'));
+      var event_end_date = $(this).data('end_date') ? new Date($(this).data('end_date')) : new Date($(this).data('date'));
+      if ((event_date = today) || (event_date < today && event_end_date >= today)) {
         $(this).hide();
       }
     });
     $('.past.event').each(function() {
       var event_date = new Date($(this).data('date'));
-      if (event_date < today) {
+      var event_end_date = $(this).data('end_date') ? new Date($(this).data('end_date')) : new Date($(this).data('date'));
+      if (event_date < today || (event_date < today && event_end_date < today) || (event_date < today && event_end_date >= today)) {
         $(this).hide();
       }
   });
@@ -41,12 +50,18 @@ <h1>{{ this.title }}</h1>
    and use Javascript (which will be evaluated at the time of viewing) to
    hide any events that shouldn't appear in each list. #}
 <h2>{{ t_upcoming_events }}</h2>
-{% for child in this.children.filter(F.date > today) %}
-<p class="{% if child.date < today %}past {% endif %}event" data-date="{{ child.date }}">{{ child.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }} <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} ({{ child.event_type|title }})</a></p>
+{% for child in this.children.order_by("date") %}
+    <p class="{% if (child.date < today and child.end_date is not defined) or (child.date < today and child.end_date < today) %}past {% endif %}event" data-date="{{ child.date }}" data-end-date="{{ child.end_date }}">
+    {{ child.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}{% if child.end_date %} - {{child.end_date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title}}{% endif %}
+    <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} ({{ child.event_type|title }})</a>
+    </p>
 {% endfor %}
 <h2>{{ t_past_events }}</h2>
 {% for child in this.children %}
-<p class="{% if child.date >= today %}upcoming {% endif %}event" data-date="{{ child.date }}">{{ child.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title  }} <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} ({{ child.event_type|title }})</a></p>
+    <p class="{% if (child.date > today and child.end_date is not defined) or (child.date >= today and child.end_date >= today) %}upcoming
+    {% elif (child.date == today and child.end_date is not defined) or (child.date < today and child.end_date is defined and child.end_date >= today) %}current {% endif %}event" data-date="{{ child.date }}" data-end-date="{{ child.end_date }}">
+    {{ child.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}{% if child.end_date %} - {{child.end_date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title}}{% endif %}
+    <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} ({{ child.event_type|title }})</a></p>
 {% endfor %}
 {% endblock %}
 {% block gutter %}

templates/home.html

@@ -39,7 +39,21 @@ <h2 class="display-2">{{ this.title }}</h2>
 {% endblock %}
 
 {% block body %}
-
+{% block extra_script %}
+<script>
+(function() {
+    var today = new Date();
+    $('.upcoming.event').each(function() {
+        var event_date = new Date($(this).data('date'));
+        var event_end_date = $(this).data('end-date') ? new Date($(this).data('end-date')) : new Date($(this).data('date'));
+        $(this).hide();
+        if (event_date >= today || (event_date >= today && event_end_date >= today) || (event_date < today && event_end_date >= today)) {
+            $(this).show();
+        }
+    });
+})();
+</script>
+{% endblock %}
 <!-- MD and Larger Project List -->
 <div class="row">
   <div class="col-sm-7 mr-auto">
@@ -76,20 +90,14 @@ <h3><a href="{{ '/news/buzz/'|url(alt=this.alt) }}">{{ t_latest_news }}</a></h3>
 
       <hr/>
 
-      {% set events = site.query('/news/events', alt=this.alt).filter(F.upcoming==True) %}
+      {% set events = site.query('/news/events', alt=this.alt).filter(F.date).order_by('date') %}
       {% if events %}
       <h3><a href="{{ '/news/events/'|url(alt=this.alt) }}">{{ t_meet_team }}</a></h3>
 
-      <div id="carousel-events" class="carousel slide" data-ride="carousel">
-        <ol class="carousel-indicators">
-          {% for event in events %}
-          <li data-target="#carousel-events" data-slide-to="{{ loop.index0 }} "{% if loop.index0 == 0 %} class="active"{% endif %}></li>
-          {% endfor %}
-        </ol>
-        <div class="carousel-inner" role="listbox">
           {% for event in events %}
-          <div class="carousel-item{% if loop.index0 == 0 %} active{% endif %}">
-            <h4><a href="{{ event|url(alt=this.alt) }}">{{ event.title }}</a></h4>
+          <div class="upcoming event" data-date="{{ event.date }}" data-end-date="{{ event.end_date }}">
+            <h5><a href="{{ event|url(alt=this.alt) }}">{{ event.title }}</a></h5>
+          <div class="upcoming_event_info">
             {% if event.event_type == "keynote" %}
             {{ event.speaker[0] }} {{ t_keynoting }}
             {% elif event.event_type == "talk" %}
@@ -102,11 +110,11 @@ <h4><a href="{{ event|url(alt=this.alt) }}">{{ event.title }}</a></h4>
             {{ t_sprinting }}
             {% else %} <br>
             {% endif %}
-            <p>{{ event.date.strftime("%d %B %Y") }}</p>
+            <p class="upcoming_event_date">{{ event.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}{% if event.end_date %} - {{event.end_date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title}}{% endif %}</p>
+          </div>
           </div>
           {% endfor %}
-        </div>
-    </div>
+
 
     <hr/>
     {% endif %}

templates/news.html

@@ -8,14 +8,16 @@
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
 {% set blog = site.query('/news/buzz', alt=this.alt).all() %}
-{% set events = site.query('/news/events', alt=this.alt).filter(F.upcoming == True) %}
+{% set events = site.query('/news/events', alt=this.alt).filter(F.date).order_by("date") %}
 {% block extra_script %}
 <script>
 (function() {
     var today = new Date();
     $('.upcoming.event').each(function() {
         var event_date = new Date($(this).data('date'));
-        if (event_date >= today) {
+        var event_end_date = $(this).data('end-date') ? new Date($(this).data('end-date')) : new Date($(this).data('date'));
+        $(this).hide();
+        if (event_date >= today || (event_date >= today && event_end_date >= today) || (event_date < today && event_end_date >= today)) {
             $(this).show();
         }
     });
@@ -43,7 +45,7 @@ <h3><a href="{{ child|url(alt=this.alt) }}">{{ child.title }}</a></h3>
     {{ this.gutter }}
     <ul>
     {% for child in events %}
-      <li class="upcoming event" data-date="{{ child.date }}">{{ child.date.strftime("%-d %B %Y") }}: <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} {{ child.event_type}}</a></li>
+      <li class="upcoming event" data-date="{{ child.date }}" data-end-date="{{ child.end_date }}">{{ child.date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title }}{% if child.end_date %} - {{child.end_date|datetimeformat("MMMM d, YYYY", locale=this.alt)|title}}{% endif %}: <a href="{{ child|url(alt=this.alt) }}">{{ child.title }} {{ child.event_type}}</a></li>
     {% endfor %}
     </ul>
   </div>