Week calendar: Collapse days on mobile (except the current day)

src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html

@@ -40,3 +40,15 @@
     </div>
 </form>
 {% include "pretixpresale/fragment_week_calendar.html" with show_avail=event.settings.event_list_availability %}
+<div class="col-sm-4 visible-xs text-center">
+    <a href="?{% url_replace request "year" before.isocalendar.0 "week" before.isocalendar.1 %}"
+            class="btn btn-default">
+        <span class="fa fa-arrow-left"></span>
+        {{ before|date:week_format }}
+    </a>
+    <a href="?{% url_replace request "year" after.isocalendar.0 "week" after.isocalendar.1 %}"
+            class="btn btn-default">
+        {{ after|date:week_format }}
+        <span class="fa fa-arrow-right"></span>
+    </a>
+</div>

src/pretix/presale/templates/pretixpresale/fragment_js.html

@@ -8,12 +8,12 @@
     <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
     <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
     <script type="text/javascript" src="{% static "slider/bootstrap-slider.js" %}"></script>
+    <script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixcontrol/js/jquery.qrcode.min.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/widget/floatformat.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/questions.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/main.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
-    <script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
     <script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/iframe.js" %}"></script>

src/pretix/presale/templates/pretixpresale/fragment_week_calendar.html

@@ -1,9 +1,11 @@
 {% load i18n %}
 <div class="week-calendar">
     {% for day in days %}
-        <div class="weekday {% if day.events %}has-events{% else %}no-events{% endif %}"
+        <details class="weekday {% if day.events %}has-events{% else %}no-events{% endif %} {% if day.today %}today{% endif %}"
-                data-date="{{ day.date|date:"SHORT_DATE_FORMAT" }}">
+                data-date="{{ day.date|date:"SHORT_DATE_FORMAT" }}" open>
-            <h3>{{ day.day_formatted }}</h3>
+            <summary>
+                <h3><span class="fa fa-fw"></span> {{ day.day_formatted }}</h3>
+            </summary>
             <div class="events">
                 {% for event in day.events %}
                     <a class="event {% if event.continued %}continued{% else %} {% spaceless %}
@@ -84,6 +86,6 @@
                     </a>
                 {% endfor %}
             </div>
-        </div>
+        </details>
     {% endfor %}
 </div>

src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html

@@ -77,6 +77,18 @@
         {% endfor %}
     </form>
     {% include "pretixpresale/fragment_week_calendar.html" with show_avail=request.organizer.settings.event_list_availability %}
+    <div class="col-sm-4 visible-xs text-center">
+        <a href="?{% url_replace request "year" before.isocalendar.0 "week" before.isocalendar.1 %}"
+                class="btn btn-default">
+            <span class="fa fa-arrow-left"></span>
+            {{ before|date:week_format }}
+        </a>
+        <a href="?{% url_replace request "year" after.isocalendar.0 "week" after.isocalendar.1 %}"
+                class="btn btn-default">
+            {{ after|date:week_format }}
+            <span class="fa fa-arrow-right"></span>
+        </a>
+    </div>
 
     {% if multiple_timezones %}
         <div class="alert alert-info">

src/pretix/presale/views/organizer.py

@@ -10,7 +10,7 @@ from django.db.models.functions import Coalesce, Greatest
 from django.http import Http404, HttpResponse
 from django.utils.decorators import method_decorator
 from django.utils.formats import date_format, get_format
-from django.utils.timezone import now
+from django.utils.timezone import now, get_current_timezone
 from django.views import View
 from django.views.decorators.cache import cache_page
 from django.views.generic import ListView, TemplateView
@@ -427,6 +427,7 @@ def days_for_template(ebd, week):
         {
             'day_formatted': date_format(day, day_format),
             'date': day,
+            'today': day == now().astimezone(get_current_timezone()).date(),
             'events': sorted(ebd.get(day), key=sort_ev) if day in ebd else []
         }
         for day in week.days()

src/pretix/static/pretixpresale/js/ui/main.js

@@ -439,6 +439,14 @@ $(function () {
         }
     });
 
+    // Week calendar
+    // On mobile, auto-collapse all days except today
+    if ($(window).width() < 992) {
+        $(".week-calendar .weekday:not(.today)").each(function () {
+            $(this).prop("open", false);
+        });
+    }
+
     // Lightbox
     lightbox.init();
 });

src/pretix/static/pretixpresale/scss/_calendar.scss

@@ -80,6 +80,16 @@
   h3 {
     margin-bottom: 5px;
     font-weight: bold;
+    cursor: pointer;
+  }
+  h3 .fa::before {
+    content: $fa-var-caret-right;
+  }
+  details[open] h3 .fa::before {
+    content: $fa-var-caret-down;
+  }
+  .events {
+    overflow: hidden;  /* required for smooth toggle animation */
   }
   .no-events {
     display: none;
@@ -90,6 +100,14 @@
     display: flex;
     flex-direction: row;
 
+    details[open] summary {
+      cursor: default;
+      pointer-events: none;
+      h3 .fa {
+        display: none;
+      }
+    }
+
     .weekday {
       flex: 1;
       margin: 0 5px;