district and region: Calendar update according to styleguide

district/templates/district/base.html

@@ -182,6 +182,7 @@
               </div>
             </button>
 
+            {% if page.root_page.has_calendar %}
               <button
                 class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm px-0"
                 :class="{'btn--activated': isCurrentView('calendar')}"
@@ -195,6 +196,18 @@
                 </div>
               </button>
 
+              {% with page.root_page.calendar.current_events.0 as first_event %}
+                {% if first_event %}
+                  <span class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')">
+                    <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
+                      <span class="pr-4">{{ first_event.name }}</span>
+                      <span class="pl-4">{{ first_event.begin|date:"l j. E"|capfirst }}</span>
+                    </div>
+                  </span>
+                {% endif %}
+              {% endwith %}
+            {% endif %}
+
             {% if page.root_page.facebook %}
               <a href="{{ page.root_page.facebook }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2  px-0">
                 <div class="btn__body py-2">

region/templates/region/base.html

@@ -182,6 +182,7 @@
               </div>
             </button>
 
+            {% if page.root_page.has_calendar %}
               <button
                 class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm px-0"
                 :class="{'btn--activated': isCurrentView('calendar')}"
@@ -195,6 +196,18 @@
                 </div>
               </button>
 
+              {% with page.root_page.calendar.current_events.0 as first_event %}
+                {% if first_event %}
+                  <span class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')">
+                    <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
+                      <span class="pr-4">{{ first_event.name }}</span>
+                      <span class="pl-4">{{ first_event.begin|date:"l j. E"|capfirst }}</span>
+                    </div>
+                  </span>
+                {% endif %}
+              {% endwith %}
+            {% endif %}
+
             {% if page.root_page.facebook %}
               <a href="{{ page.root_page.facebook }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2  px-0">
                 <div class="btn__body py-2">