Improve calendar-navigation on organizer and events page (Z#177488) (#2373)

* hide icons for calendar-types and improve layout-breakpoints in calendar top-nav

* change month-selector to one dropdown "date"and redirect old URLs to new date-based URLs

* change week calendar to one dropdown "date“ and redirect old URLs to new date-based URLs

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

@@ -3,41 +3,38 @@
 {% load urlreplace %}
 <nav aria-label="{% trans "calendar navigation" %}">
     <ul class="row calendar-nav">
-        <li class="col-sm-4 hidden-xs text-left flip">
-            <a href="?{% url_replace request "year" subevent_list.before.year "month" subevent_list.before.month %}"
+        <li class="col-sm-4 col-xs-2 text-left flip">
+            <a href="?{% url_replace request "date" subevent_list.before|date:"Y-m" %}"
                     class="btn btn-default" aria-label="{% blocktrans with month=subevent_list.before|date:"F Y" %}Show previous month, {{ month }}{% endblocktrans %}">
                 <span class="fa fa-arrow-left" aria-hidden="true"></span>
-                {{ subevent_list.before|date:"F Y" }}
+                <span class="hidden-xs">{{ subevent_list.before|date:"F Y" }}</span>
             </a>
         </li>
-        <li class="col-sm-4 col-xs-12 text-center">
+        <li class="col-sm-4 col-xs-8 text-center">
             <form class="form-inline" method="get" id="monthselform" action="{% eventurl event "presale:event.index" cart_namespace=cart_namespace %}">
                 {% for f, v in request.GET.items %}
-                    {% if f != "month" and f != "year" %}
+                    {% if f != "date" %}
                         <input type="hidden" name="{{ f }}" value="{{ v }}">
                     {% endif %}
                 {% endfor %}
-                <div role="group" aria-label="{% trans "Select month and year to show" %}">
-                    <select name="month" class="form-control" aria-label="{% trans "Month" %}">
-                        {% for m in subevent_list.months %}
-                            <option value="{{ m|date:"m" }}" {% if m.month == subevent_list.date.month %}selected{% endif %}>{{ m|date:"F" }}</option>
-                        {% endfor %}
-                    </select>
-                    <select name="year" class="form-control" aria-label="{% trans "Year" %}">
-                        {% for y in subevent_list.years %}
-                            <option value="{{ y }}" {% if y == subevent_list.date.year %}selected{% endif %}>{{ y }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
+                <select name="date" class="form-control" aria-label="{% trans "Select month to show" %}">
+                {% for y in subevent_list.years %}
+                    <optgroup label="{{ y }}">
+                    {% for m in subevent_list.months %}
+                        <option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == subevent_list.date.month and y == subevent_list.date.year %}selected{% endif %}>{{ m|date:"F" }} {{ y }}</option>
+                    {% endfor %}
+                    </optgroup>
+                {% endfor %}
+                </select>
                 <button type="submit" class="js-hidden btn btn-default">
                     {% trans "Go" %}
                 </button>
             </form>
         </li>
-        <li class="col-sm-4 hidden-xs text-right flip">
-            <a href="?{% url_replace request "year" subevent_list.after.year "month" subevent_list.after.month %}"
+        <li class="col-sm-4 col-xs-2 text-right flip">
+            <a href="?{% url_replace request "date" subevent_list.after|date:"Y-m" %}"
                 class="btn btn-default" aria-label="{% blocktrans with month=subevent_list.after|date:"F Y" %}Show next month, {{ month }}{% endblocktrans %}">
-                {{ subevent_list.after|date:"F Y" }}
+                <span class="hidden-xs">{{ subevent_list.after|date:"F Y" }}</span>
                 <span class="fa fa-arrow-right" aria-hidden="true"></span>
             </a>
         </li>

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

@@ -3,54 +3,55 @@
 {% load urlreplace %}
 <nav aria-label="{% trans "calendar navigation" %}">
     <ul class="row calendar-nav">
-        <li class="col-sm-4 hidden-xs text-left flip">
-            <a href="?{% url_replace request "year" subevent_list.before.isocalendar.0 "week" subevent_list.before.isocalendar.1 %}"
+        <li class="col-sm-4 col-xs-2 text-left flip">
+            <a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
                 class="btn btn-default" aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
                 <span class="fa fa-arrow-left" aria-hidden="true"></span>
-                {{ subevent_list.before|date:subevent_list.week_format }}
+                <span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
             </a>
         </li>
-        <li class="col-sm-4 col-xs-12 text-center">
+        <li class="col-sm-4 col-xs-8 text-center">
             <form class="form-inline" method="get" id="monthselform" action="{% eventurl event "presale:event.index" cart_namespace=cart_namespace %}">
             {% for f, v in request.GET.items %}
-                {% if f != "week" and f != "year" %}
+                {% if f != "date" %}
                     <input type="hidden" name="{{ f }}" value="{{ v }}">
                 {% endif %}
             {% endfor %}
-                <div role="group" aria-label="{% trans "Select week and year to show" %}">
-                    <select name="week" class="form-control select-calendar-week-short" aria-label="{% trans "Week" %}">
-                        {% for w in subevent_list.weeks %}
-                            <option value="{{ w.0.isocalendar.1 }}" {% if w.0.isocalendar.1 == subevent_list.date.isocalendar.1 %}selected{% endif %}>{% trans "W" %} {{ w.0.isocalendar.1 }} ({{ w.0|date:"SHORT_DATE_FORMAT" }} – {{ w.1|date:"SHORT_DATE_FORMAT" }})</option>
-                        {% endfor %}
-                    </select>
-                    <select name="year" class="form-control" aria-label="{% trans "Year" %}">
-                        {% for y in subevent_list.years %}
-                            <option value="{{ y }}" {% if y == subevent_list.date.isocalendar.0 %}selected{% endif %}>{{ y }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
+                <select name="date" class="form-control" aria-label="{% trans "Select week to show" %}">
+                {% for weeks_per_year in subevent_list.weeks %}
+                    <optgroup label="{{ weeks_per_year.0.0.year }}">
+                    {% for w in weeks_per_year %}
+                        <option value="{{ w.0.isocalendar.0 }}-W{{ w.0.isocalendar.1 }}"
+                                {% if w.0.isocalendar.0 == subevent_list.date.isocalendar.0 and w.0.isocalendar.1 == subevent_list.date.isocalendar.1 %}selected{% endif %}>
+                                {{ w.0|date:"WEEK_FORMAT" }}
+                            ({{ w.0|date:"MONTH_DAY_FORMAT" }} – {{ w.1|date:"MONTH_DAY_FORMAT" }})
+                        </option>
+                    {% endfor %}
+                    </optgroup>
+                {% endfor %}
+                </select>
                 <button type="submit" class="js-hidden btn btn-default">
                     {% trans "Go" %}
                 </button>
             </form>
         </li>
-        <li class="col-sm-4 hidden-xs text-right flip">
-            <a href="?{% url_replace request "year" subevent_list.after.isocalendar.0 "week" subevent_list.after.isocalendar.1 %}"
+        <li class="col-sm-4 col-xs-2 text-right flip">
+            <a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
                 class="btn btn-default" aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
-                {{ subevent_list.after|date:subevent_list.week_format }}
+                <span class="hidden-xs">{{ subevent_list.after|date:subevent_list.week_format }}</span>
                 <span class="fa fa-arrow-right" aria-hidden="true"></span>
             </a>
         </li>
     </ul>
 </nav>
 {% include "pretixpresale/fragment_week_calendar.html" with show_avail=event.settings.event_list_availability days=subevent_list.days show_names=subevent_list.show_names %}
-<div class="col-sm-4 visible-xs text-center" aria-hidden="true">
-    <a href="?{% url_replace request "year" subevent_list.before.isocalendar.0 "week" subevent_list.before.isocalendar.1 %}"
+<div class="visible-xs text-center" aria-hidden="true">
+    <a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
             class="btn btn-default">
         <span class="fa fa-arrow-left" aria-hidden="true"></span>
         {{ subevent_list.before|date:subevent_list.week_format }}
     </a>
-    <a href="?{% url_replace request "year" subevent_list.after.isocalendar.0 "week" subevent_list.after.isocalendar.1 %}"
+    <a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
             class="btn btn-default">
         {{ subevent_list.after|date:subevent_list.week_format }}
         <span class="fa fa-arrow-right" aria-hidden="true"></span>

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

@@ -0,0 +1,28 @@
+{% load i18n %}
+{% load eventurl %}
+{% load urlreplace %}
+
+<div class="btn-group" role="group">
+    <a href="?{% url_replace request "style" "list" "date" "" %}" type="button" 
+            class="btn btn-default{% if style == "list" %} active{% endif %}">
+        {% trans "List" %}
+    </a>
+    <a href="?{% if "date" in request.GET %}{% url_replace request "style" "week" "old" "" "page" "" "date" date|date:"o-\WW" %}{% else %}{% url_replace request "style" "week" "old" "" "page" "" %}{% endif %}" type="button"
+            class="btn btn-default{% if style == "week" %} active{% endif %}">
+        {% trans "Week" %}
+    </a>
+    <a href="?{% if "date" in request.GET %}{% url_replace request "style" "calendar" "old" "" "page" "" "date" date|date:"Y-m" %}{% else %}{% url_replace request "style" "calendar" "old" "" "page" "" %}{% endif %}"
+            type="button"
+            class="btn btn-default{% if style == "calendar" %} active{% endif %}">
+        {% trans "Month" %}
+    </a>
+    <a href="?{% if "date" in request.GET %}{% url_replace request "style" "day" "old" "" "page" ""  "date" date|date:"Y-m-d" %}{% else %}{% url_replace request "style" "day" "old" "" "page" ""  "date" %}{% endif %}" type="button"
+       class="btn btn-default{% if style == "day" %} active{% endif %}">
+        {% trans "Day" %}
+    </a>
+</div>
+<a href="{% eventurl request.organizer "presale:organizer.ical" %}?{% url_replace request "locale" request.LANGUAGE_CODE "page" "" "old" "" "style" "" "date" "" %}"
+        class="btn btn-default">
+    <span class="fa fa-calendar-plus-o" aria-hidden="true"></span>
+    {% trans "iCal" %}
+</a>

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

@@ -13,66 +13,41 @@
     <h3>{{ date|date:"F Y" }}</h3>
     <form class="form-inline" method="get" id="monthselform" action="{% eventurl request.organizer "presale:organizer.index" %}">
         {% for f, v in request.GET.items %}
-            {% if f != "month" and f != "year" %}
+            {% if f != "date" %}
                 <input type="hidden" name="{{ f }}" value="{{ v }}">
             {% endif %}
         {% endfor %}
         <div class="row">
-            <div class="col-md-4 col-sm-6 col-xs-12 text-left flip">
-                <div class="btn-group" role="group">
-                    <a href="?{% url_replace request "style" "list" "week" "" "year" "" "month" "" "date" "" %}" type="button" class="btn btn-default">
-                        <span class="fa fa-list" aria-hidden="true"></span>
-                        {% trans "List" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "week" "old" "" "month" "" "year" "" "date" "" %}" type="button"
-                            class="btn btn-default">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Week" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "calendar" "old" "" "week" "" "date" "" %}"
-                            type="button"
-                            class="btn btn-default active">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Month" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "day" "week" "" "month" "" "old" "" "page" "" %}" type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-th" aria-hidden="true"></span>
-                        {% trans "Day" %}
-                    </a>
-                </div>
-                <a href="{% eventurl request.organizer "presale:organizer.ical" %}?{% url_replace request "locale" request.LANGUAGE_CODE "page" "" "old" "" "week" "" "style" "" "month" "" "year" "" %}"
-                        class="btn btn-default">
-                    <span class="fa fa-calendar-plus-o" aria-hidden="true"></span>
-                    {% trans "iCal" %}
-                </a>
+            <div class="col-md-5 col-sm-6 col-xs-12 text-left flip">
+                {% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="calendar" %}
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12 text-center" role="group" aria-label="{% trans "Select month and year to show" %}">
-                <select name="month" class="form-control" aria-label="{% trans "Month" %}">
+            <div class="col-md-2 col-sm-4 col-xs-8 text-center" role="group" aria-label="{% trans "Select month to show" %}">
+                <select name="date" class="form-control" aria-label="{% trans "Month" %}">
+                {% for y in years %}
+                    <optgroup label="{{ y }}">
                     {% for m in months %}
-                        <option value="{{ m|date:"m" }}" {% if m == date %}selected{% endif %}>{{ m|date:"F" }}</option>
-                    {% endfor %}
-                </select>
-                <select name="year" class="form-control" aria-label="{% trans "Year" %}">
-                    {% for y in years %}
-                        <option value="{{ y }}" {% if y == date.year %}selected{% endif %}>{{ y }}</option>
+                        <option value="{{ y }}-{{ m|date:"m" }}" {% if m.month == date.month and y == date.year %}selected{% endif %}>{{ m|date:"F" }} {{ y }}</option>
                     {% endfor %}
+                    </optgroup>
+                {% endfor %}
                 </select>
                 <button type="submit" class="js-hidden btn btn-default">
                     {% trans "Go" %}
                 </button>
             </div>
-            <div class="col-md-4 hidden-sm hidden-xs text-right flip">
+            <div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
-                    <a href="?{% url_replace request "year" before.year "month" before.month %}" class="btn btn-default">
+                    <a href="?{% url_replace request "date" before|date:"Y-m" %}"
+                       class="btn btn-default" aria-label="{{ before|date:"F Y" }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
-                        {{ before|date:"F Y" }}
+                        <span class="hidden-sm hidden-xs">{{ before|date:"F Y" }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
-                    <a href="?{% url_replace request "year" after.year "month" after.month %}" class="btn btn-default">
+                    <a href="?{% url_replace request "date" after|date:"Y-m" %}"
+                       class="btn btn-default" aria-label="{{ after|date:"F Y" }}">
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
-                        {{ after|date:"F Y" }}
+                        <span class="hidden-sm hidden-xs">{{ after|date:"F Y" }}</span>
                     </a>
                 {% endif %}
             </div>

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

@@ -19,54 +19,27 @@
             {% endif %}
         {% endfor %}
         <div class="row">
-            <div class="col-sm-4 hidden-xs text-left flip">
-                <div class="btn-group" role="group">
-                    <a href="?{% url_replace request "style" "list" "week" "" "year" "" "month" "" "date" "" %}" type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-list" aria-hidden="true"></span>
-                        {% trans "List" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "week" "month" "" "old" "" "date" "" %}" type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Week" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "calendar" "week" "" "old" "" "year" "" "date" "" %}"
-                       type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Month" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "day" "week" "" "month" "" "old" "" "page" "" %}" type="button"
-                       class="btn btn-default active">
-                        <span class="fa fa-th" aria-hidden="true"></span>
-                        {% trans "Day" %}
-                    </a>
-                </div>
-                <a href="{% eventurl request.organizer "presale:organizer.ical" %}?{% url_replace request "locale" request.LANGUAGE_CODE "page" "" "old" "" "week" "" "style" "" "month" "" "year" "" "date" "" %}"
-                   class="btn btn-default">
-                    <span class="fa fa-calendar-plus-o" aria-hidden="true"></span>
-                    {% trans "iCal" %}
-                </a>
+            <div class="col-md-5 col-sm-6 col-xs-12 text-left flip">
+                {% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="day" %}
             </div>
-            <div class="col-sm-4 col-xs-12 text-center">
+            <div class="col-md-2 col-sm-4 col-xs-8 text-center">
                 <input class="datepickerfield form-control" value="{{ date|date:"SHORT_DATE_FORMAT" }}" name="date">
                 <button type="submit" class="js-hidden btn btn-default">
                     {% trans "Go" %}
                 </button>
             </div>
-            <div class="col-sm-4 hidden-xs text-right flip">
+            <div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
                     <a href="?{% url_replace request "date" before.date.isoformat %}"
-                       class="btn btn-default">
+                       class="btn btn-default" aria-label="{{ before|date:"SHORT_DATE_FORMAT" }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
-                        {{ before|date:"SHORT_DATE_FORMAT" }}
+                        <span class="hidden-sm hidden-xs">{{ before|date:"SHORT_DATE_FORMAT" }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
                     <a href="?{% url_replace request "date" after.date.isoformat %}"
-                       class="btn btn-default">
-                        {{ after|date:"SHORT_DATE_FORMAT" }}
+                       class="btn btn-default" aria-label="{{ after|date:"SHORT_DATE_FORMAT" }}">
+                        <span class="hidden-sm hidden-xs">{{ after|date:"SHORT_DATE_FORMAT" }}</span>
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
                     </a>
                 {% endif %}

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

@@ -14,71 +14,44 @@
     <form class="form-inline" method="get" id="monthselform"
           action="{% eventurl request.organizer "presale:organizer.index" %}">
         {% for f, v in request.GET.items %}
-            {% if f != "week" and f != "year" %}
+            {% if f != "date" %}
                 <input type="hidden" name="{{ f }}" value="{{ v }}">
             {% endif %}
         {% endfor %}
         <div class="row">
             <div class="col-md-4 col-sm-6 col-xs-12 text-left flip">
-                <div class="btn-group" role="group">
-                    <a href="?{% url_replace request "style" "list" "week" "" "year" "" "month" "" "date" "" %}" type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-list" aria-hidden="true"></span>
-                        {% trans "List" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "week" "month" "" "old" "" "date" "" %}" type="button"
-                       class="btn btn-default active">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Week" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "calendar" "week" "" "old" "" "year" "" "date" "" %}"
-                       type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-calendar" aria-hidden="true"></span>
-                        {% trans "Month" %}
-                    </a>
-                    <a href="?{% url_replace request "style" "day" "week" "" "month" "" "old" "" "page" "" %}" type="button"
-                       class="btn btn-default">
-                        <span class="fa fa-th" aria-hidden="true"></span>
-                        {% trans "Day" %}
-                    </a>
-                </div>
-                <a href="{% eventurl request.organizer "presale:organizer.ical" %}?{% url_replace request "locale" request.LANGUAGE_CODE "page" "" "old" "" "week" "" "style" "" "month" "" "year" "" %}"
-                   class="btn btn-default">
-                    <span class="fa fa-calendar-plus-o" aria-hidden="true"></span>
-                    {% trans "iCal" %}
-                </a>
+                {% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="week" %}
             </div>
-            <div class="col-md-4 col-sm-6 col-xs-12 text-center">
-                <select name="week" class="form-control select-calendar-week-short">
-                    {% for w in weeks %}
-                        <option value="{{ w.0.isocalendar.1 }}"
-                                {% if w.0.isocalendar.1 == date.isocalendar.1 %}selected{% endif %}>{% trans "W" %} {{ w.0.isocalendar.1 }}
-                            ({{ w.0|date:"SHORT_DATE_FORMAT" }} – {{ w.1|date:"SHORT_DATE_FORMAT" }})
+            <div class="col-md-4 col-sm-4 col-xs-8 text-center">
+                <select name="date" class="form-control" aria-label="{% trans "Select week to show" %}">
+                {% for weeks_per_year in weeks %}
+                    <optgroup label="{{ weeks_per_year.0.0.year }}">
+                    {% for w in weeks_per_year %}
+                        <option value="{{ w.0.isocalendar.0 }}-W{{ w.0.isocalendar.1 }}"
+                                {% if w.0.isocalendar.0 == date.isocalendar.0 and w.0.isocalendar.1 == date.isocalendar.1 %}selected{% endif %}>
+                                {{ w.0|date:"WEEK_FORMAT" }}
+                            ({{ w.0|date:"MONTH_DAY_FORMAT" }} – {{ w.1|date:"MONTH_DAY_FORMAT" }})
                         </option>
                     {% endfor %}
-                </select>
-                <select name="year" class="form-control">
-                    {% for y in years %}
-                        <option value="{{ y }}" {% if y == date.isocalendar.0 %}selected{% endif %}>{{ y }}</option>
-                    {% endfor %}
+                    </optgroup>
+                {% endfor %}
                 </select>
                 <button type="submit" class="js-hidden btn btn-default">
                     {% trans "Go" %}
                 </button>
             </div>
-            <div class="col-md-4 hidden-sm hidden-xs text-right flip">
+            <div class="col-md-4 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
-                    <a href="?{% url_replace request "year" before.isocalendar.0 "week" before.isocalendar.1 %}"
-                       class="btn btn-default">
+                    <a href="?{% url_replace request "date" before|date:"o-\WW" %}"
+                       class="btn btn-default" aria-label="{{ before|date:week_format }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
-                        {{ before|date:week_format }}
+                        <span class="hidden-sm hidden-xs">{{ before|date:week_format }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
-                    <a href="?{% url_replace request "year" after.isocalendar.0 "week" after.isocalendar.1 %}"
-                       class="btn btn-default">
-                        {{ after|date:week_format }}
+                    <a href="?{% url_replace request "date" after|date:"o-\WW" %}"
+                       class="btn btn-default" aria-label="{{ after|date:week_format }}">
+                        <span class="hidden-sm hidden-xs">{{ after|date:week_format }}</span>
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
                     </a>
                 {% endif %}
@@ -86,16 +59,16 @@
         </div>
     </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">
+    <div class="col-sm-12 visible-sm visible-xs text-center">
         {% if has_before %}
-            <a href="?{% url_replace request "year" before.isocalendar.0 "week" before.isocalendar.1 %}"
+            <a href="?{% url_replace request "date" before|date:"o-\WW" %}"
                class="btn btn-default">
                 <span class="fa fa-arrow-left" aria-hidden="true"></span>
                 {{ before|date:week_format }}
             </a>
         {% endif %}
         {% if has_after %}
-            <a href="?{% url_replace request "year" after.isocalendar.0 "week" after.isocalendar.1 %}"
+            <a href="?{% url_replace request "date" after|date:"o-\WW" %}"
                class="btn btn-default">
                 {{ after|date:week_format }}
                 <span class="fa fa-arrow-right" aria-hidden="true"></span>

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

@@ -26,40 +26,14 @@
     {% else %}
         <h3>{% trans "Upcoming events" %}</h3>
     {% endif %}
-    <div>
-        <div class="btn-group" role="group">
-            <a href="?{% url_replace request "style" "list" "week" "" "year" "" "month" ""  "date" ""%}" type="button"
-                    class="btn btn-default active">
-                <span class="fa fa-list" aria-hidden="true"></span>
-                {% trans "List" %}
-            </a>
-            <a href="?{% url_replace request "style" "week" "month" "" "old" "" "page" "" "date" "" %}" type="button"
-                    class="btn btn-default">
-                <span class="fa fa-calendar" aria-hidden="true"></span>
-                {% trans "Week" %}
-            </a>
-            <a href="?{% url_replace request "style" "calendar" "week" "" "old" "" "page" "" "date" "" %}" type="button"
-                    class="btn btn-default">
-                <span class="fa fa-calendar" aria-hidden="true"></span>
-                {% trans "Month" %}
-            </a>
-            <a href="?{% url_replace request "style" "day" "week" "" "month" "" "old" "" "page" "" %}" type="button"
-               class="btn btn-default">
-                <span class="fa fa-th" aria-hidden="true"></span>
-                {% trans "Day" %}
-            </a>
+    <div id="monthselform">
+        <div class="row">
+            <div class="col-md-12">
+                {% include "pretixpresale/fragment_calendar_nav.html" with date=date request=request style="list" %}
+            </div>
         </div>
-        <a href="{% eventurl request.organizer "presale:organizer.ical" %}?{% url_replace request "locale" request.LANGUAGE_CODE "page" "" "old" "" "week" "" "style" "" "month" "" "year" "" %}"
-                class="btn btn-default">
-            <span class="fa fa-calendar-plus-o" aria-hidden="true"></span>
-            {% trans "iCal" %}
-        </a>
-        {% if "old" in request.GET %}
-            <a href="?{% url_replace request "old" "" %}" class="btn btn-link">{% trans "Show upcoming" %}</a>
-        {% else %}
-            <a href="?{% url_replace request "old" "1" %}" class="btn btn-link">{% trans "Show past events" %}</a>
-        {% endif %}
     </div>
+    {% if events %}
     <div class="event-list">
         <div class="row hidden-xs hidden-sm">
             <div class="col-md-5">
@@ -144,17 +118,13 @@
                     </a>
                 </div>
             </div>
-        {% empty %}
-            {% if "old" in request.GET %}
-                <div class="col-md-12">
-                    <em>{% trans "No archived events found." %}</em>
-                </div>
-            {% else %}
-                <div class="col-md-12">
-                    <em>{% trans "No public upcoming events found." %}</em>
-                </div>
-            {% endif %}
         {% endfor %}
     </div>
+    {% endif %}
+    {% if "old" in request.GET %}
+        <p><em>{% if not events %}{% trans "No archived events found." %} {% endif %}<a href="?{% url_replace request "old" "" %}">{% trans "Show upcoming" %}</a></em></p>
+    {% else %}
+        <p><em>{% if not events %}{% trans "No public upcoming events found." %} {% endif %}<a href="?{% url_replace request "old" "1" %}">{% trans "Show past events" %}</a></em></p>
+    {% endif %}
     {% include "pretixpresale/pagination.html" %}
 {% endblock %}

src/pretix/presale/views/event.py

@@ -39,6 +39,7 @@ from collections import defaultdict
 from datetime import date, datetime, timedelta
 from decimal import Decimal
 from importlib import import_module
+from urllib.parse import urlencode
 
 import isoweek
 import pytz
@@ -388,6 +389,20 @@ class EventIndex(EventViewMixin, EventListMixin, CartMixin, TemplateView):
     template_name = "pretixpresale/event/index.html"
 
     def get(self, request, *args, **kwargs):
+        # redirect old month-year-URLs to new date-URLs
+        keys = ("month", "year")
+        if all(k in request.GET for k in keys):
+            get_params = {k: v for k, v in request.GET.items() if k not in keys}
+            get_params["date"] = "%s-%s" % (request.GET.get("year"), request.GET.get("month"))
+            return redirect(self.request.path + "?" + urlencode(get_params))
+
+        # redirect old week-year-URLs to new date-URLs
+        keys = ("week", "year")
+        if all(k in request.GET for k in keys):
+            get_params = {k: v for k, v in request.GET.items() if k not in keys}
+            get_params["date"] = "%s-W%s" % (request.GET.get("year"), request.GET.get("week"))
+            return redirect(self.request.path + "?" + urlencode(get_params))
+
         from pretix.presale.views.cart import get_or_create_cart_id
 
         self.subevent = None
@@ -612,11 +627,14 @@ class EventIndex(EventViewMixin, EventListMixin, CartMixin, TemplateView):
                 timeout=120,
             )
             context['days'] = days_for_template(ebd, week)
-            context['weeks'] = [
-                (date_fromisocalendar(self.year, i + 1, 1), date_fromisocalendar(self.year, i + 1, 7))
-                for i in range(53 if date(self.year, 12, 31).isocalendar()[1] == 53 else 52)
-            ]
-            context['years'] = range(now().year - 2, now().year + 3)
+            years = (self.year - 1, self.year, self.year + 1)
+            weeks = []
+            for year in years:
+                weeks += [
+                    (date_fromisocalendar(year, i + 1, 1), date_fromisocalendar(year, i + 1, 7))
+                    for i in range(53 if date(year, 12, 31).isocalendar()[1] == 53 else 52)
+                ]
+            context['weeks'] = [[w for w in weeks if w[0].year == year] for year in years]
             context['week_format'] = get_format('WEEK_FORMAT')
             if context['week_format'] == 'WEEK_FORMAT':
                 context['week_format'] = WEEK_FORMAT

src/pretix/presale/views/organizer.py

@@ -37,7 +37,7 @@ import math
 from collections import defaultdict
 from datetime import date, datetime, time, timedelta
 from functools import reduce
-from urllib.parse import quote
+from urllib.parse import quote, urlencode
 
 import dateutil
 import isoweek
@@ -47,6 +47,7 @@ from django.core.cache import caches
 from django.db.models import Exists, Max, Min, OuterRef, Q
 from django.db.models.functions import Coalesce, Greatest
 from django.http import Http404, HttpResponse
+from django.shortcuts import redirect
 from django.utils.decorators import method_decorator
 from django.utils.formats import date_format, get_format
 from django.utils.timezone import get_current_timezone, now
@@ -220,17 +221,13 @@ class EventListMixin:
             self.month = now().month
 
     def _set_month_year(self):
-        if hasattr(self.request, 'event') and self.subevent:
-            tz = pytz.timezone(self.request.event.settings.timezone)
-            self.year = self.subevent.date_from.astimezone(tz).year
-            self.month = self.subevent.date_from.astimezone(tz).month
-        if 'year' in self.request.GET and 'month' in self.request.GET:
+        if 'date' in self.request.GET:
             try:
-                self.year = int(self.request.GET.get('year'))
-                self.month = int(self.request.GET.get('month'))
+                date = dateutil.parser.parse(self.request.GET.get('date')).date()
             except ValueError:
-                self.year = now().year
-                self.month = now().month
+                date = now().date()
+            self.year = date.year
+            self.month = date.month
         else:
             if hasattr(self.request, 'event'):
                 self._set_month_to_next_subevent()
@@ -286,17 +283,13 @@ class EventListMixin:
             self.week = now().isocalendar()[1]
 
     def _set_week_year(self):
-        if hasattr(self.request, 'event') and self.subevent:
-            tz = pytz.timezone(self.request.event.settings.timezone)
-            self.year = self.subevent.date_from.astimezone(tz).year
-            self.month = self.subevent.date_from.astimezone(tz).month
-        if 'year' in self.request.GET and 'week' in self.request.GET:
+        if 'date' in self.request.GET:
             try:
-                self.year = int(self.request.GET.get('year'))
-                self.week = int(self.request.GET.get('week'))
+                iso = dateutil.parser.isoparse(self.request.GET.get('date')).isocalendar()
             except ValueError:
-                self.year = now().isocalendar()[0]
-                self.week = now().isocalendar()[1]
+                iso = now().isocalendar()
+            self.year = iso[0]
+            self.week = iso[1]
         else:
             if hasattr(self.request, 'event'):
                 self._set_week_to_next_subevent()
@@ -600,6 +593,13 @@ class CalendarView(OrganizerViewMixin, EventListMixin, TemplateView):
     template_name = 'pretixpresale/organizers/calendar.html'
 
     def get(self, request, *args, **kwargs):
+        # redirect old month-year-URLs to new date-URLs
+        keys = ("month", "year")
+        if all(k in request.GET for k in keys):
+            get_params = {k: v for k, v in request.GET.items() if k not in keys}
+            get_params["date"] = "%s-%s" % (request.GET.get("year"), request.GET.get("month"))
+            return redirect(self.request.path + "?" + urlencode(get_params))
+
         self._set_month_year()
         return super().get(request, *args, **kwargs)
 
@@ -663,6 +663,13 @@ class WeekCalendarView(OrganizerViewMixin, EventListMixin, TemplateView):
     template_name = 'pretixpresale/organizers/calendar_week.html'
 
     def get(self, request, *args, **kwargs):
+        # redirect old week-year-URLs to new date-URLs
+        keys = ("week", "year")
+        if all(k in request.GET for k in keys):
+            get_params = {k: v for k, v in request.GET.items() if k not in keys}
+            get_params["date"] = "%s-W%s" % (request.GET.get("year"), request.GET.get("week"))
+            return redirect(self.request.path + "?" + urlencode(get_params))
+
         self._set_week_year()
         return super().get(request, *args, **kwargs)
 
@@ -698,11 +705,14 @@ class WeekCalendarView(OrganizerViewMixin, EventListMixin, TemplateView):
         )
 
         ctx['days'] = days_for_template(ebd, week)
-        ctx['weeks'] = [
-            (date_fromisocalendar(self.year, i + 1, 1), date_fromisocalendar(self.year, i + 1, 7))
-            for i in range(53 if date(self.year, 12, 31).isocalendar()[1] == 53 else 52)
-        ]
-        ctx['years'] = range(now().year - 2, now().year + 3)
+        years = (self.year - 1, self.year, self.year + 1)
+        weeks = []
+        for year in years:
+            weeks += [
+                (date_fromisocalendar(year, i + 1, 1), date_fromisocalendar(year, i + 1, 7))
+                for i in range(53 if date(year, 12, 31).isocalendar()[1] == 53 else 52)
+            ]
+        ctx['weeks'] = [[w for w in weeks if w[0].year == year] for year in years]
         ctx['week_format'] = get_format('WEEK_FORMAT')
         if ctx['week_format'] == 'WEEK_FORMAT':
             ctx['week_format'] = WEEK_FORMAT

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -22,6 +22,10 @@ td > .form-group > .checkbox {
   padding-top: 7px;
 }
 
+.form-inline .form-control {
+  max-width: 100%;
+}
+
 .has-success .form-control {
   border-color: #cccccc;
 }

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -33,6 +33,10 @@ a.btn, button.btn {
   margin-right: 10px;
 }
 
+.form-inline .form-control {
+  max-width: 100%;
+}
+
 .form-control.is-focused {
   $color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
   border-color: $input-border-focus;

src/pretix/static/pretixpresale/scss/main.scss

@@ -396,7 +396,7 @@ h2 .label {
 }
 
 .event-list {
-    margin-top: 15px;
+    margin-bottom: 15px;
     border-top: 1px solid $table-border-color;
 
     .row {