Baden-Württemberg Stiftung

Calendar @calendar

Design

Variants

Calendar-Grid
Calendar-List
Calendar-List
Calendar-List

Calendar-Grid @calendar--grid

HTML
Context

<div class="calendar calendar--grid">
  <div class="calendar__filter">
    <div class="calendar__filter__inner"><button class="calendar__filter__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <form class="form-list-filter">
        <div class="form-list-filter__fields">
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Kategorie</button>
                  <div class="filter__items">
                    <div class="filter__item"><svg class="icon icon--performance" viewBox="0 0 200 200">
                        <use xlink:href="#icon-performance"></use>
                      </svg><label class="checkbox" for="checkbox-135e"><input class="checkbox__input" type="checkbox" id="checkbox-135e" name="checkbox-135e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Performance</span></label></div>
                    <div class="filter__item"><svg class="icon icon--reading" viewBox="0 0 200 200">
                        <use xlink:href="#icon-reading"></use>
                      </svg><label class="checkbox" for="checkbox-fdf4"><input class="checkbox__input" type="checkbox" id="checkbox-fdf4" name="checkbox-fdf4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lesung</span></label></div>
                    <div class="filter__item"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                        <use xlink:href="#icon-workshop"></use>
                      </svg><label class="checkbox" for="checkbox-6a9f"><input class="checkbox__input" type="checkbox" id="checkbox-6a9f" name="checkbox-6a9f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Workshop</span></label></div>
                    <div class="filter__item"><svg class="icon icon--chat" viewBox="0 0 200 200">
                        <use xlink:href="#icon-chat"></use>
                      </svg><label class="checkbox" for="checkbox-7afc"><input class="checkbox__input" type="checkbox" id="checkbox-7afc" name="checkbox-7afc" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Gespräch</span></label></div>
                    <div class="filter__item"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                        <use xlink:href="#icon-theatre"></use>
                      </svg><label class="checkbox" for="checkbox-3bbf"><input class="checkbox__input" type="checkbox" id="checkbox-3bbf" name="checkbox-3bbf" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Theater</span></label></div>
                    <div class="filter__item"><svg class="icon icon--speech" viewBox="0 0 200 200">
                        <use xlink:href="#icon-speech"></use>
                      </svg><label class="checkbox" for="checkbox-80a1"><input class="checkbox__input" type="checkbox" id="checkbox-80a1" name="checkbox-80a1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Vortrag</span></label></div>
                    <div class="filter__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><label class="checkbox" for="checkbox-5757"><input class="checkbox__input" type="checkbox" id="checkbox-5757" name="checkbox-5757" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ausstellung</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Ort</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-eb49"><input class="checkbox__input" type="checkbox" id="checkbox-eb49" name="checkbox-eb49" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nürtingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-f3f9"><input class="checkbox__input" type="checkbox" id="checkbox-f3f9" name="checkbox-f3f9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ludwigsburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-ef8c"><input class="checkbox__input" type="checkbox" id="checkbox-ef8c" name="checkbox-ef8c" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Tübingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-7a8d"><input class="checkbox__input" type="checkbox" id="checkbox-7a8d" name="checkbox-7a8d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ehingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-e8b2"><input class="checkbox__input" type="checkbox" id="checkbox-e8b2" name="checkbox-e8b2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bretten</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-01e6"><input class="checkbox__input" type="checkbox" id="checkbox-01e6" name="checkbox-01e6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Esslingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-75da"><input class="checkbox__input" type="checkbox" id="checkbox-75da" name="checkbox-75da" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Marbach am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-a06f"><input class="checkbox__input" type="checkbox" id="checkbox-a06f" name="checkbox-a06f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Stuttgart</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4f3c"><input class="checkbox__input" type="checkbox" id="checkbox-4f3c" name="checkbox-4f3c" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Friedrichshafen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-d9c4"><input class="checkbox__input" type="checkbox" id="checkbox-d9c4" name="checkbox-d9c4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Karlsruge</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6df4"><input class="checkbox__input" type="checkbox" id="checkbox-6df4" name="checkbox-6df4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kenzingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4937"><input class="checkbox__input" type="checkbox" id="checkbox-4937" name="checkbox-4937" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Mannheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-fbdf"><input class="checkbox__input" type="checkbox" id="checkbox-fbdf" name="checkbox-fbdf" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bad Säckingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-66ae"><input class="checkbox__input" type="checkbox" id="checkbox-66ae" name="checkbox-66ae" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Konstanz</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6054"><input class="checkbox__input" type="checkbox" id="checkbox-6054" name="checkbox-6054" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Riedlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-0813"><input class="checkbox__input" type="checkbox" id="checkbox-0813" name="checkbox-0813" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Biberach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-12a9"><input class="checkbox__input" type="checkbox" id="checkbox-12a9" name="checkbox-12a9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Freiburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-b384"><input class="checkbox__input" type="checkbox" id="checkbox-b384" name="checkbox-b384" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottenburg a. N.</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-740b"><input class="checkbox__input" type="checkbox" id="checkbox-740b" name="checkbox-740b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bruchsal</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-b49a"><input class="checkbox__input" type="checkbox" id="checkbox-b49a" name="checkbox-b49a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Böblingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-a448"><input class="checkbox__input" type="checkbox" id="checkbox-a448" name="checkbox-a448" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Dettingen an der Erms</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-b657"><input class="checkbox__input" type="checkbox" id="checkbox-b657" name="checkbox-b657" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Hausach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-0359"><input class="checkbox__input" type="checkbox" id="checkbox-0359" name="checkbox-0359" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidelberg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c30e"><input class="checkbox__input" type="checkbox" id="checkbox-c30e" name="checkbox-c30e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lörrach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c4a2"><input class="checkbox__input" type="checkbox" id="checkbox-c4a2" name="checkbox-c4a2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Blaustein</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-95fa"><input class="checkbox__input" type="checkbox" id="checkbox-95fa" name="checkbox-95fa" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Fellbach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-a7ea"><input class="checkbox__input" type="checkbox" id="checkbox-a7ea" name="checkbox-a7ea" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidenheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-8e1e"><input class="checkbox__input" type="checkbox" id="checkbox-8e1e" name="checkbox-8e1e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Herrlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-7102"><input class="checkbox__input" type="checkbox" id="checkbox-7102" name="checkbox-7102" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kornwestheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9894"><input class="checkbox__input" type="checkbox" id="checkbox-9894" name="checkbox-9894" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kressberg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-38c5"><input class="checkbox__input" type="checkbox" id="checkbox-38c5" name="checkbox-38c5" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ladenburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6fe4"><input class="checkbox__input" type="checkbox" id="checkbox-6fe4" name="checkbox-6fe4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lauffen am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6fe2"><input class="checkbox__input" type="checkbox" id="checkbox-6fe2" name="checkbox-6fe2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ramseck am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9bf6"><input class="checkbox__input" type="checkbox" id="checkbox-9bf6" name="checkbox-9bf6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Reutlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-fac4"><input class="checkbox__input" type="checkbox" id="checkbox-fac4" name="checkbox-fac4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottweil</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4bb2"><input class="checkbox__input" type="checkbox" id="checkbox-4bb2" name="checkbox-4bb2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Schorndorf</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-5815"><input class="checkbox__input" type="checkbox" id="checkbox-5815" name="checkbox-5815" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Waldenburg</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Zielgruppe</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-c6c1"><input class="checkbox__input" type="checkbox" id="checkbox-c6c1" name="checkbox-c6c1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-10e6"><input class="checkbox__input" type="checkbox" id="checkbox-10e6" name="checkbox-10e6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-245f"><input class="checkbox__input" type="checkbox" id="checkbox-245f" name="checkbox-245f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-fbcc"><input class="checkbox__input" type="checkbox" id="checkbox-fbcc" name="checkbox-fbcc" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Diese Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9f73"><input class="checkbox__input" type="checkbox" id="checkbox-9f73" name="checkbox-9f73" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nächste Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6a11"><input class="checkbox__input" type="checkbox" id="checkbox-6a11" name="checkbox-6a11" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label"><div class="period">
  <div class="period__row">
    <div class="period__label">Von:</div>
    <div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
  </div>
  <div class="period__row">
    <div class="period__label">Bis:</div>
    <div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
  </div>
</div></span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-search"></use>
            </svg><span class="button__text">Filter anwenden</span></button></div>
      </form>
      <div class="calendar__filter-tag-group">
        <div class="filter-tag-group">
          <ul class="filter-tag-group__items" aria-labelledby="filter-tag-group-baa5">
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Lesung<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Theater<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="calendar__nav">
    <div class="calendar__tabs">
      <div class="calendar-tabs">
        <div class="calendar-tabs__inner">
          <ul class="calendar-tabs__ul">
            <li class="calendar-tabs__li calendar-tabs__li--current"><a class="calendar-tabs__a" href="#">April</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Mai</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Juni</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Juli</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">August</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">September</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Oktober</a></li>
          </ul><button class="calendar-tabs__prev" type="button"><svg class="icon icon--chevron-left" viewBox="0 0 200 200">
              <use xlink:href="#icon-chevron-left"></use>
            </svg></button><button class="calendar-tabs__next" type="button"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
              <use xlink:href="#icon-chevron-right"></use>
            </svg></button>
        </div>
      </div>
    </div><button class="calendar__open-filter" type="button"><svg class="icon icon--filter" viewBox="0 0 200 200">
        <use xlink:href="#icon-filter"></use>
      </svg><span class="calendar__open-filter__badge">2</span></button>
    <div class="calendar__toggle-view"><a class="calendar__toggle-view__item calendar__toggle-view__item--active" href="calendar-list.html" title="Listenansicht"><svg class="icon icon--list" viewBox="0 0 200 200">
          <use xlink:href="#icon-list"></use>
        </svg></a><a class="calendar__toggle-view__item" href="calendar-grid.html" title="Kachelansicht"><svg class="icon icon--grid" viewBox="0 0 200 200">
          <use xlink:href="#icon-grid"></use>
        </svg></a></div>
  </nav>
  <div class="calendar__days">
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mo</span><span class="calendar__day__meta__text__date">01.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Gespräch zwischen Anna und Bär</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                  <div class="calendar-card__info__badge">Für Kinder</div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-sand">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                      <use xlink:href="#icon-theatre"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Erich Witschke liest aus Hegel, Hölderlin, Schelling. Roman einer Männer-freundschaft Aus der Reihe Wie sich Denken versprachlicht</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                    <use xlink:href="#icon-theatre"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__badge">Zusatztermin</div>
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Das Gruseln im Sommerschloss</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-green">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--speech" viewBox="0 0 200 200">
                      <use xlink:href="#icon-speech"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-purple">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                      <use xlink:href="#icon-workshop"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                  <div class="calendar-card__info__badge">Für Kinder</div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-blue">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                      <use xlink:href="#icon-theatre"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Di</span><span class="calendar__day__meta__text__date">02.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__badge">Zusatztermin</div>
                <div class="calendar-card__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-sand">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--chat" viewBox="0 0 200 200">
                      <use xlink:href="#icon-chat"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                  <div class="calendar-card__info__badge">Für Kinder</div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">04.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__badge">Zusatztermin</div>
                <div class="calendar-card__canvas calendar-card__canvas--liso-green">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                      <use xlink:href="#icon-exhibition"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Do</span><span class="calendar__day__meta__text__date">05.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--speech" viewBox="0 0 200 200">
                    <use xlink:href="#icon-speech"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-purple">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--chat" viewBox="0 0 200 200">
                      <use xlink:href="#icon-chat"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Fr</span><span class="calendar__day__meta__text__date">06.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-blue">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--performance" viewBox="0 0 200 200">
                      <use xlink:href="#icon-performance"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--speech" viewBox="0 0 200 200">
                    <use xlink:href="#icon-speech"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Sa</span><span class="calendar__day__meta__text__date">07.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-green">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                      <use xlink:href="#icon-exhibition"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__badge">Zusatztermin</div>
                <div class="calendar-card__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">So</span><span class="calendar__day__meta__text__date">08.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__grid">
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--image" href="#">
                <div class="calendar-card__image">
                  <div class="image loading" style="padding-top: 66.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="265" src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/400x265/CCCCCC/28281a.png?text=400x265" width="400" height="265" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--icon" href="#">
                <div class="calendar-card__icon"><svg class="icon icon--speech" viewBox="0 0 200 200">
                    <use xlink:href="#icon-speech"></use>
                  </svg></div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                </div>
              </a></div>
            <div class="calendar__day__grid__item"><a class="calendar-card calendar-card--canvas" href="#">
                <div class="calendar-card__canvas calendar-card__canvas--liso-sand">
                  <div class="calendar-card__canvas__inner"><svg class="icon icon--chat" viewBox="0 0 200 200">
                      <use xlink:href="#icon-chat"></use>
                    </svg></div>
                </div>
                <div class="calendar-card__headline">
                  <h4 class="headline headline--4">Hier steht ein Titel</h4>
                </div>
                <div class="calendar-card__info">
                  <div class="calendar-card__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                      <use xlink:href="#icon-stopwatch"></use>
                    </svg><span class="calendar-card__info__text">17:00 Uhr</span></div>
                  <div class="calendar-card__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                      <use xlink:href="#icon-location"></use>
                    </svg><span class="calendar-card__info__text">Stuttgart</span></div>
                  <div class="calendar-card__info__badge">Für Kinder</div>
                </div>
              </a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__days__loadmore-button"><button class="button button--primary" type="button"><span class="button__text">Mehr laden</span></button></div>
  </div>
</div>

{
  "filterCloseIcon": "close",
  "filterOpenIcon": "filter",
  "filterOpenBadge": "2",
  "loadmoreButton": {
    "text": "Mehr laden",
    "link": null
  },
  "tabs": true,
  "filterTag": {
    "items": [
      {
        "link": "#",
        "text": "Lesung"
      },
      {
        "link": "#",
        "text": "Theater"
      }
    ]
  },
  "grid": true,
  "views": [
    {
      "title": "Listenansicht",
      "icon": "list",
      "link": "calendar-list.html",
      "active": true
    },
    {
      "title": "Kachelansicht",
      "icon": "grid",
      "link": "calendar-grid.html"
    }
  ],
  "items": [
    {
      "meta": {
        "day": "Mo",
        "date": "01.05"
      },
      "items": [
        {
          "use": "calendar-card--image",
          "settings": {
            "headline": {
              "text": "Gespräch zwischen Anna und Bär"
            },
            "infoBadge": "Für Kinder"
          }
        },
        {
          "use": "calendar-card--canvas"
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "chat",
            "headline": {
              "text": "Erich Witschke liest aus Hegel, Hölderlin, Schelling. Roman einer Männer-freundschaft Aus der Reihe Wie sich Denken versprachlicht"
            }
          }
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "theatre"
          }
        },
        {
          "use": "calendar-card--image",
          "settings": {
            "badge": "Zusatztermin",
            "headline": {
              "text": "Das Gruseln im Sommerschloss"
            }
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-green",
              "icon": "speech"
            }
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-purple",
              "icon": "workshop"
            }
          }
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "performance",
            "infoBadge": "Für Kinder"
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-blue",
              "icon": "theatre"
            }
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Di",
        "date": "02.05"
      },
      "items": [
        {
          "use": "calendar-card--image"
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "performance"
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-sand",
              "icon": "chat"
            },
            "infoBadge": "Für Kinder"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Mi",
        "date": "04.05"
      },
      "items": [
        {
          "use": "calendar-card--canvas",
          "settings": {
            "badge": "Zusatztermin",
            "canvas": {
              "backgroundColor": "liso-green",
              "icon": "exhibition"
            }
          }
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "performance"
          }
        },
        {
          "use": "calendar-card--image"
        }
      ]
    },
    {
      "meta": {
        "day": "Do",
        "date": "05.05"
      },
      "items": [
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "speech"
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-purple",
              "icon": "chat"
            }
          }
        },
        {
          "use": "calendar-card--image"
        }
      ]
    },
    {
      "meta": {
        "day": "Fr",
        "date": "06.05"
      },
      "items": [
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-blue",
              "icon": "performance"
            }
          }
        },
        {
          "use": "calendar-card--image"
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "speech"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Sa",
        "date": "07.05"
      },
      "items": [
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-green",
              "icon": "exhibition"
            }
          }
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "performance"
          }
        },
        {
          "use": "calendar-card--image"
        }
      ]
    },
    {
      "meta": {
        "day": "So",
        "date": "08.05"
      },
      "items": [
        {
          "use": "calendar-card--image"
        },
        {
          "use": "calendar-card--icon",
          "settings": {
            "icon": "speech"
          }
        },
        {
          "use": "calendar-card--canvas",
          "settings": {
            "canvas": {
              "backgroundColor": "liso-sand",
              "icon": "chat"
            },
            "infoBadge": "Für Kinder"
          }
        }
      ]
    }
  ]
}

Calendar-List @calendar--list

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="calendar calendar--list">
  <div class="calendar__filter">
    <div class="calendar__filter__inner"><button class="calendar__filter__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <form class="form-list-filter">
        <div class="form-list-filter__fields">
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Kategorie</button>
                  <div class="filter__items">
                    <div class="filter__item"><svg class="icon icon--performance" viewBox="0 0 200 200">
                        <use xlink:href="#icon-performance"></use>
                      </svg><label class="checkbox" for="checkbox-5cf4"><input class="checkbox__input" type="checkbox" id="checkbox-5cf4" name="checkbox-5cf4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Performance</span></label></div>
                    <div class="filter__item"><svg class="icon icon--reading" viewBox="0 0 200 200">
                        <use xlink:href="#icon-reading"></use>
                      </svg><label class="checkbox" for="checkbox-1d18"><input class="checkbox__input" type="checkbox" id="checkbox-1d18" name="checkbox-1d18" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lesung</span></label></div>
                    <div class="filter__item"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                        <use xlink:href="#icon-workshop"></use>
                      </svg><label class="checkbox" for="checkbox-1fab"><input class="checkbox__input" type="checkbox" id="checkbox-1fab" name="checkbox-1fab" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Workshop</span></label></div>
                    <div class="filter__item"><svg class="icon icon--chat" viewBox="0 0 200 200">
                        <use xlink:href="#icon-chat"></use>
                      </svg><label class="checkbox" for="checkbox-2dc4"><input class="checkbox__input" type="checkbox" id="checkbox-2dc4" name="checkbox-2dc4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Gespräch</span></label></div>
                    <div class="filter__item"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                        <use xlink:href="#icon-theatre"></use>
                      </svg><label class="checkbox" for="checkbox-a4a8"><input class="checkbox__input" type="checkbox" id="checkbox-a4a8" name="checkbox-a4a8" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Theater</span></label></div>
                    <div class="filter__item"><svg class="icon icon--speech" viewBox="0 0 200 200">
                        <use xlink:href="#icon-speech"></use>
                      </svg><label class="checkbox" for="checkbox-685e"><input class="checkbox__input" type="checkbox" id="checkbox-685e" name="checkbox-685e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Vortrag</span></label></div>
                    <div class="filter__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><label class="checkbox" for="checkbox-ed6f"><input class="checkbox__input" type="checkbox" id="checkbox-ed6f" name="checkbox-ed6f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ausstellung</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Ort</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-88a6"><input class="checkbox__input" type="checkbox" id="checkbox-88a6" name="checkbox-88a6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nürtingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9283"><input class="checkbox__input" type="checkbox" id="checkbox-9283" name="checkbox-9283" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ludwigsburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-985f"><input class="checkbox__input" type="checkbox" id="checkbox-985f" name="checkbox-985f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Tübingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-353d"><input class="checkbox__input" type="checkbox" id="checkbox-353d" name="checkbox-353d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ehingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-83d2"><input class="checkbox__input" type="checkbox" id="checkbox-83d2" name="checkbox-83d2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bretten</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c5e6"><input class="checkbox__input" type="checkbox" id="checkbox-c5e6" name="checkbox-c5e6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Esslingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-0b39"><input class="checkbox__input" type="checkbox" id="checkbox-0b39" name="checkbox-0b39" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Marbach am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-efca"><input class="checkbox__input" type="checkbox" id="checkbox-efca" name="checkbox-efca" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Stuttgart</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3319"><input class="checkbox__input" type="checkbox" id="checkbox-3319" name="checkbox-3319" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Friedrichshafen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-037e"><input class="checkbox__input" type="checkbox" id="checkbox-037e" name="checkbox-037e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Karlsruge</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-306f"><input class="checkbox__input" type="checkbox" id="checkbox-306f" name="checkbox-306f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kenzingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-fb19"><input class="checkbox__input" type="checkbox" id="checkbox-fb19" name="checkbox-fb19" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Mannheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3367"><input class="checkbox__input" type="checkbox" id="checkbox-3367" name="checkbox-3367" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bad Säckingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9fc1"><input class="checkbox__input" type="checkbox" id="checkbox-9fc1" name="checkbox-9fc1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Konstanz</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-8b4e"><input class="checkbox__input" type="checkbox" id="checkbox-8b4e" name="checkbox-8b4e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Riedlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-235d"><input class="checkbox__input" type="checkbox" id="checkbox-235d" name="checkbox-235d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Biberach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3cd7"><input class="checkbox__input" type="checkbox" id="checkbox-3cd7" name="checkbox-3cd7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Freiburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c75a"><input class="checkbox__input" type="checkbox" id="checkbox-c75a" name="checkbox-c75a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottenburg a. N.</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-2845"><input class="checkbox__input" type="checkbox" id="checkbox-2845" name="checkbox-2845" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bruchsal</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-af34"><input class="checkbox__input" type="checkbox" id="checkbox-af34" name="checkbox-af34" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Böblingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-fc5e"><input class="checkbox__input" type="checkbox" id="checkbox-fc5e" name="checkbox-fc5e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Dettingen an der Erms</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-cbd1"><input class="checkbox__input" type="checkbox" id="checkbox-cbd1" name="checkbox-cbd1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Hausach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-a581"><input class="checkbox__input" type="checkbox" id="checkbox-a581" name="checkbox-a581" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidelberg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-681e"><input class="checkbox__input" type="checkbox" id="checkbox-681e" name="checkbox-681e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lörrach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-43ad"><input class="checkbox__input" type="checkbox" id="checkbox-43ad" name="checkbox-43ad" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Blaustein</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3053"><input class="checkbox__input" type="checkbox" id="checkbox-3053" name="checkbox-3053" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Fellbach</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-88a4"><input class="checkbox__input" type="checkbox" id="checkbox-88a4" name="checkbox-88a4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidenheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9b7e"><input class="checkbox__input" type="checkbox" id="checkbox-9b7e" name="checkbox-9b7e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Herrlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-b4b2"><input class="checkbox__input" type="checkbox" id="checkbox-b4b2" name="checkbox-b4b2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kornwestheim</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-49b9"><input class="checkbox__input" type="checkbox" id="checkbox-49b9" name="checkbox-49b9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kressberg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-49f7"><input class="checkbox__input" type="checkbox" id="checkbox-49f7" name="checkbox-49f7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ladenburg</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-ccf4"><input class="checkbox__input" type="checkbox" id="checkbox-ccf4" name="checkbox-ccf4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lauffen am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-17d2"><input class="checkbox__input" type="checkbox" id="checkbox-17d2" name="checkbox-17d2" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ramseck am Neckar</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-e175"><input class="checkbox__input" type="checkbox" id="checkbox-e175" name="checkbox-e175" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Reutlingen</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-fb47"><input class="checkbox__input" type="checkbox" id="checkbox-fb47" name="checkbox-fb47" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottweil</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-2c17"><input class="checkbox__input" type="checkbox" id="checkbox-2c17" name="checkbox-2c17" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Schorndorf</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-a45a"><input class="checkbox__input" type="checkbox" id="checkbox-a45a" name="checkbox-a45a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Waldenburg</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Zielgruppe</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-0f2d"><input class="checkbox__input" type="checkbox" id="checkbox-0f2d" name="checkbox-0f2d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-e223"><input class="checkbox__input" type="checkbox" id="checkbox-e223" name="checkbox-e223" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-5ca3"><input class="checkbox__input" type="checkbox" id="checkbox-5ca3" name="checkbox-5ca3" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-2cda"><input class="checkbox__input" type="checkbox" id="checkbox-2cda" name="checkbox-2cda" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Diese Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-baf9"><input class="checkbox__input" type="checkbox" id="checkbox-baf9" name="checkbox-baf9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nächste Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-8e1b"><input class="checkbox__input" type="checkbox" id="checkbox-8e1b" name="checkbox-8e1b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label"><div class="period">
  <div class="period__row">
    <div class="period__label">Von:</div>
    <div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
  </div>
  <div class="period__row">
    <div class="period__label">Bis:</div>
    <div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
  </div>
</div></span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-search"></use>
            </svg><span class="button__text">Filter anwenden</span></button></div>
      </form>
      <div class="calendar__filter-tag-group">
        <div class="filter-tag-group">
          <ul class="filter-tag-group__items" aria-labelledby="filter-tag-group-7d2e">
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Lesung<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Theater<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="calendar__nav">
    <div class="calendar__tabs">
      <div class="calendar-tabs">
        <div class="calendar-tabs__inner">
          <ul class="calendar-tabs__ul">
            <li class="calendar-tabs__li calendar-tabs__li--current"><a class="calendar-tabs__a" href="#">April</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Mai</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Juni</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Juli</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">August</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">September</a></li>
            <li class="calendar-tabs__li"><a class="calendar-tabs__a" href="#">Oktober</a></li>
          </ul><button class="calendar-tabs__prev" type="button"><svg class="icon icon--chevron-left" viewBox="0 0 200 200">
              <use xlink:href="#icon-chevron-left"></use>
            </svg></button><button class="calendar-tabs__next" type="button"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
              <use xlink:href="#icon-chevron-right"></use>
            </svg></button>
        </div>
      </div>
    </div><button class="calendar__open-filter" type="button"><svg class="icon icon--filter" viewBox="0 0 200 200">
        <use xlink:href="#icon-filter"></use>
      </svg><span class="calendar__open-filter__badge">2</span></button>
    <div class="calendar__toggle-view"><a class="calendar__toggle-view__item" href="calendar-list.html" title="Listenansicht"><svg class="icon icon--list" viewBox="0 0 200 200">
          <use xlink:href="#icon-list"></use>
        </svg></a><a class="calendar__toggle-view__item calendar__toggle-view__item--active" href="calendar-grid.html" title="Kachelansicht"><svg class="icon icon--grid" viewBox="0 0 200 200">
          <use xlink:href="#icon-grid"></use>
        </svg></a></div>
  </nav>
  <div class="calendar__days">
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mo</span><span class="calendar__day__meta__text__date">01.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                    <div class="calendar-banner__info__badge">Für Kinder</div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Von Anfang an eine menschliche Relation</h4>
                    </div>
                    <div class="calendar-banner__text">Der Hörspielautor Fred von Hoerschelmann im Spiegel seines Briefwechsels mit Elisabeth Noelle-Neumann</div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7079-title">
                      <title id="icon-7079-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                    <div class="calendar-banner__text">Lorem ipsum dolor sit amet</div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9e94-title">
                      <title id="icon-9e94-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Di</span><span class="calendar__day__meta__text__date">02.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                    <use xlink:href="#icon-exhibition"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Märchen und Mythen in Bildern umgesetzt</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e1a9-title">
                      <title id="icon-e1a9-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner calendar-banner--badge">
                <div class="calendar-banner__badge">Zusatztermin</div>
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                    <div class="calendar-banner__info__badge">Für Kinder</div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Das Gruseln im Sommerschloss</h4>
                    </div>
                    <div class="calendar-banner__text">Mit Anja Sommer</div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3c7b-title">
                      <title id="icon-3c7b-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--speech" viewBox="0 0 200 200">
                    <use xlink:href="#icon-speech"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Es war einmal: Worte und Zauber</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-0355-title">
                      <title id="icon-0355-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">04.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-49b8-title">
                      <title id="icon-49b8-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                    <use xlink:href="#icon-workshop"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5e7e-title">
                      <title id="icon-5e7e-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                    <use xlink:href="#icon-theatre"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                    <div class="calendar-banner__info__badge">Für Kinder</div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ff12-title">
                      <title id="icon-ff12-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Do</span><span class="calendar__day__meta__text__date">05.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner calendar-banner--badge">
                <div class="calendar-banner__badge">Zusatztermin</div>
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5258-title">
                      <title id="icon-5258-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5604-title">
                      <title id="icon-5604-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                    <use xlink:href="#icon-exhibition"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d5cd-title">
                      <title id="icon-d5cd-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Fr</span><span class="calendar__day__meta__text__date">06.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                    <use xlink:href="#icon-theatre"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-bdc9-title">
                      <title id="icon-bdc9-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner calendar-banner--badge">
                <div class="calendar-banner__badge">Zusatztermin</div>
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                    <div class="calendar-banner__info__badge">Für Kinder</div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                    <div class="calendar-banner__text">Mit Anja Sommer</div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-05d2-title">
                      <title id="icon-05d2-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                    <use xlink:href="#icon-workshop"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-cf4b-title">
                      <title id="icon-cf4b-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Sa</span><span class="calendar__day__meta__text__date">07.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d95e-title">
                      <title id="icon-d95e-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3a91-title">
                      <title id="icon-3a91-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner calendar-banner--badge">
                <div class="calendar-banner__badge">Zusatztermin</div>
                <div class="calendar-banner__icon"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                    <use xlink:href="#icon-exhibition"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-cb86-title">
                      <title id="icon-cb86-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">So</span><span class="calendar__day__meta__text__date">08.05</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e002-title">
                      <title id="icon-e002-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-79c2-title">
                      <title id="icon-79c2-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                    <use xlink:href="#icon-exhibition"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-786d-title">
                      <title id="icon-786d-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__days__loadmore-button"><button class="button button--primary" type="button"><span class="button__text">Mehr laden</span></button></div>
  </div>
</div>

{
  "filterCloseIcon": "close",
  "filterOpenIcon": "filter",
  "filterOpenBadge": "2",
  "loadmoreButton": {
    "text": "Mehr laden",
    "link": null
  },
  "tabs": true,
  "filterTag": {
    "items": [
      {
        "link": "#",
        "text": "Lesung"
      },
      {
        "link": "#",
        "text": "Theater"
      }
    ]
  },
  "list": true,
  "views": [
    {
      "title": "Listenansicht",
      "icon": "list",
      "link": "calendar-list.html"
    },
    {
      "title": "Kachelansicht",
      "icon": "grid",
      "link": "calendar-grid.html",
      "active": true
    }
  ],
  "items": [
    {
      "meta": {
        "day": "Mo",
        "date": "01.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "headline": {
              "text": "Von Anfang an eine menschliche Relation"
            },
            "text": "Der Hörspielautor Fred von Hoerschelmann im Spiegel seines Briefwechsels mit Elisabeth Noelle-Neumann",
            "infoBadge": "Für Kinder"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "text": "Lorem ipsum dolor sit amet"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Di",
        "date": "02.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "exhibition",
            "headline": {
              "text": "Märchen und Mythen in Bildern umgesetzt"
            }
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "reading",
            "headline": {
              "text": "Das Gruseln im Sommerschloss"
            },
            "text": "Mit Anja Sommer",
            "infoBadge": "Für Kinder"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "speech",
            "headline": {
              "text": "Es war einmal: Worte und Zauber"
            }
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Mi",
        "date": "04.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "workshop"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "theatre",
            "infoBadge": "Für Kinder"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Do",
        "date": "05.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "chat"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "exhibition"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Fr",
        "date": "06.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "theatre"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "reading",
            "infoBadge": "Für Kinder",
            "text": "Mit Anja Sommer"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "workshop"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Sa",
        "date": "07.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "badge": "Zusatztermin",
            "icon": "exhibition"
          }
        }
      ]
    },
    {
      "meta": {
        "day": "So",
        "date": "08.05"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance"
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "exhibition"
          }
        }
      ]
    }
  ]
}

Calendar-List @calendar--list-dgb

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="calendar calendar--list">
  <div class="calendar__filter">
    <div class="calendar__filter__inner"><button class="calendar__filter__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <form class="form-list-filter">
        <div class="form-list-filter__fields">
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Kategorie</button>
                  <div class="filter__items">
                    <div class="filter__item"><svg class="icon icon--performance" viewBox="0 0 200 200">
                        <use xlink:href="#icon-performance"></use>
                      </svg><label class="checkbox" for="checkbox-2b7d"><input class="checkbox__input" type="checkbox" id="checkbox-2b7d" name="checkbox-2b7d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Performance</span></label></div>
                    <div class="filter__item"><svg class="icon icon--reading" viewBox="0 0 200 200">
                        <use xlink:href="#icon-reading"></use>
                      </svg><label class="checkbox" for="checkbox-0bf6"><input class="checkbox__input" type="checkbox" id="checkbox-0bf6" name="checkbox-0bf6" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lesung</span></label></div>
                    <div class="filter__item"><svg class="icon icon--workshop" viewBox="0 0 200 200">
                        <use xlink:href="#icon-workshop"></use>
                      </svg><label class="checkbox" for="checkbox-9454"><input class="checkbox__input" type="checkbox" id="checkbox-9454" name="checkbox-9454" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Workshop</span></label></div>
                    <div class="filter__item"><svg class="icon icon--chat" viewBox="0 0 200 200">
                        <use xlink:href="#icon-chat"></use>
                      </svg><label class="checkbox" for="checkbox-afd9"><input class="checkbox__input" type="checkbox" id="checkbox-afd9" name="checkbox-afd9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Gespräch</span></label></div>
                    <div class="filter__item"><svg class="icon icon--theatre" viewBox="0 0 200 200">
                        <use xlink:href="#icon-theatre"></use>
                      </svg><label class="checkbox" for="checkbox-1b9e"><input class="checkbox__input" type="checkbox" id="checkbox-1b9e" name="checkbox-1b9e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Theater</span></label></div>
                    <div class="filter__item"><svg class="icon icon--speech" viewBox="0 0 200 200">
                        <use xlink:href="#icon-speech"></use>
                      </svg><label class="checkbox" for="checkbox-b4eb"><input class="checkbox__input" type="checkbox" id="checkbox-b4eb" name="checkbox-b4eb" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Vortrag</span></label></div>
                    <div class="filter__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><label class="checkbox" for="checkbox-f6ad"><input class="checkbox__input" type="checkbox" id="checkbox-f6ad" name="checkbox-f6ad" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ausstellung</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Zielgruppe</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-d5b5"><input class="checkbox__input" type="checkbox" id="checkbox-d5b5" name="checkbox-d5b5" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-44bc"><input class="checkbox__input" type="checkbox" id="checkbox-44bc" name="checkbox-44bc" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c74a"><input class="checkbox__input" type="checkbox" id="checkbox-c74a" name="checkbox-c74a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-fb36"><input class="checkbox__input" type="checkbox" id="checkbox-fb36" name="checkbox-fb36" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Diese Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-025a"><input class="checkbox__input" type="checkbox" id="checkbox-025a" name="checkbox-025a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nächste Woche</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-71fe"><input class="checkbox__input" type="checkbox" id="checkbox-71fe" name="checkbox-71fe" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label"><div class="period">
  <div class="period__row">
    <div class="period__label">Von:</div>
    <div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
  </div>
  <div class="period__row">
    <div class="period__label">Bis:</div>
    <div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
  </div>
</div></span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-search"></use>
            </svg><span class="button__text">Filter anwenden</span></button></div>
      </form>
      <div class="calendar__filter-tag-group">
        <div class="filter-tag-group">
          <ul class="filter-tag-group__items" aria-labelledby="filter-tag-group-fab9">
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Lesung<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Theater<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="calendar__nav"><button class="calendar__open-filter" type="button"><svg class="icon icon--filter" viewBox="0 0 200 200">
        <use xlink:href="#icon-filter"></use>
      </svg><span class="calendar__open-filter__badge">2</span></button></nav>
  <div class="calendar__days">
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">28.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9278-title">
                      <title id="icon-9278-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-bf38-title">
                      <title id="icon-bf38-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">29.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ca6d-title">
                      <title id="icon-ca6d-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">30.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7f8d-title">
                      <title id="icon-7f8d-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">28.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-f293-title">
                      <title id="icon-f293-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6b1d-title">
                      <title id="icon-6b1d-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">29.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-46ef-title">
                      <title id="icon-46ef-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">30.09</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-27cd-title">
                      <title id="icon-27cd-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__year">
        <h2 class="headline headline--2">2023</h2>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">Mi</span><span class="calendar__day__meta__text__date">03.01</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--chat" viewBox="0 0 200 200">
                    <use xlink:href="#icon-chat"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">12:00 - 14:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-a205-title">
                      <title id="icon-a205-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
                    <use xlink:href="#icon-performance"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">17:00 - 19:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Freiburg</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4715-title">
                      <title id="icon-4715-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">D0</span><span class="calendar__day__meta__text__date">28.01</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                        <use xlink:href="#icon-stopwatch"></use>
                      </svg><span class="calendar-banner__info__text">13:00 - 15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6d85-title">
                      <title id="icon-6d85-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day">FR</span><span class="calendar__day__meta__text__date">05.02</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
                    <use xlink:href="#icon-reading"></use>
                  </svg></div>
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
                        <use xlink:href="#icon-exhibition"></use>
                      </svg><span class="calendar-banner__info__text">15:00 Uhr</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Online</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-518c-title">
                      <title id="icon-518c-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__days__loadmore-button"><button class="button button--primary" type="button"><span class="button__text">Mehr laden</span></button></div>
  </div>
</div>

{
  "filterCloseIcon": "close",
  "filterOpenIcon": "filter",
  "filterOpenBadge": "2",
  "loadmoreButton": {
    "text": "Mehr laden",
    "link": null
  },
  "tabs": null,
  "filterTag": {
    "items": [
      {
        "link": "#",
        "text": "Lesung"
      },
      {
        "link": "#",
        "text": "Theater"
      }
    ]
  },
  "list": true,
  "formListFilter": {
    "fields": [
      {
        "name": "Kategorie",
        "use": "filter--icons"
      },
      {
        "name": "Zielgruppe",
        "use": "filter",
        "settings": {
          "title": "Zielgruppe",
          "items": [
            {
              "checkbox": {
                "text": "Zielgruppe 1"
              }
            },
            {
              "checkbox": {
                "text": "Zielgruppe 2"
              }
            },
            {
              "checkbox": {
                "text": "Zielgruppe 3"
              }
            }
          ]
        }
      },
      {
        "name": "Datum",
        "use": "filter--date"
      }
    ]
  },
  "views": null,
  "items": [
    {
      "meta": {
        "day": "Mi",
        "date": "28.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "29.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "30.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "Mi",
        "date": "28.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "29.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "30.09"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "year": 2023
    },
    {
      "meta": {
        "day": "Mi",
        "date": "03.01"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "chat",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "12:00 - 14:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "performance",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "17:00 - 19:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Freiburg"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "D0",
        "date": "28.01"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "stopwatch",
                "text": "13:00 - 15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": "FR",
        "date": "05.02"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": "reading",
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "exhibition",
                "text": "15:00 Uhr"
              },
              {
                "icon": "location",
                "text": "Online"
              }
            ]
          }
        }
      ]
    }
  ]
}

Calendar-List @calendar--list-c4f

Vorschau in eignem Tab anzeigen

HTML
Context

<div class="calendar calendar--list">
  <div class="calendar__filter">
    <div class="calendar__filter__inner"><button class="calendar__filter__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <form class="form-list-filter">
        <div class="form-list-filter__fields">
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Ort</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-7c58"><input class="checkbox__input" type="checkbox" id="checkbox-7c58" name="checkbox-7c58" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ort 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-de7b"><input class="checkbox__input" type="checkbox" id="checkbox-de7b" name="checkbox-de7b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ort 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4304"><input class="checkbox__input" type="checkbox" id="checkbox-4304" name="checkbox-4304" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ort 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Art</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-0aed"><input class="checkbox__input" type="checkbox" id="checkbox-0aed" name="checkbox-0aed" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-616d"><input class="checkbox__input" type="checkbox" id="checkbox-616d" name="checkbox-616d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 2 with a verylongnamenameartname</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-c20e"><input class="checkbox__input" type="checkbox" id="checkbox-c20e" name="checkbox-c20e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 3</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3e14"><input class="checkbox__input" type="checkbox" id="checkbox-3e14" name="checkbox-3e14" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 4</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-38c1"><input class="checkbox__input" type="checkbox" id="checkbox-38c1" name="checkbox-38c1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 5 with a verylong&shy;namenameartname</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-9cce"><input class="checkbox__input" type="checkbox" id="checkbox-9cce" name="checkbox-9cce" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 6</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-485a"><input class="checkbox__input" type="checkbox" id="checkbox-485a" name="checkbox-485a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 7</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-6707"><input class="checkbox__input" type="checkbox" id="checkbox-6707" name="checkbox-6707" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 8 with a verylongnamenameartname</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-4b9b"><input class="checkbox__input" type="checkbox" id="checkbox-4b9b" name="checkbox-4b9b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Art 9</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Veranstalter</button>
                  <div class="filter__items">
                    <div class="filter__item"><label class="checkbox" for="checkbox-baeb"><input class="checkbox__input" type="checkbox" id="checkbox-baeb" name="checkbox-baeb" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Veranstalter 1</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-e613"><input class="checkbox__input" type="checkbox" id="checkbox-e613" name="checkbox-e613" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Veranstalter 2</span></label></div>
                    <div class="filter__item"><label class="checkbox" for="checkbox-3c27"><input class="checkbox__input" type="checkbox" id="checkbox-3c27" name="checkbox-3c27" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Veranstalter 3</span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-list-filter__field">
            <div class="form-group">
              <div class="form-group__input">
                <div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
                  <div class="filter__items">
                    <div class="filter__item">
                      <div class="filter__item__period">
                        <div class="period">
                          <div class="period__row">
                            <div class="period__label">Von:</div>
                            <div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
                          </div>
                          <div class="period__row">
                            <div class="period__label">Bis:</div>
                            <div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-search"></use>
            </svg><span class="button__text">Filter anwenden</span></button></div>
      </form>
      <div class="calendar__filter-tag-group">
        <div class="filter-tag-group">
          <ul class="filter-tag-group__items" aria-labelledby="filter-tag-group-a82e">
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Lesung<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
            <li class="filter-tag-group__item"><a class="filter-tag" href="#"><span class="filter-tag__text">Theater<span class="u-hidden-visually">- Filter löschen</span></span><svg class="icon icon--close filter-tag__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="calendar__nav"><button class="calendar__open-filter" type="button"><svg class="icon icon--filter" viewBox="0 0 200 200">
        <use xlink:href="#icon-filter"></use>
      </svg><span class="calendar__open-filter__badge">2</span></button></nav>
  <div class="calendar__days">
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">22.08. -<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">11.10.24</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1e32-title">
                      <title id="icon-1e32-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Tage der offenen Tür</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1896-title">
                      <title id="icon-1896-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">12.11. -<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">11.12.24</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Schnupperstudium</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-27b7-title">
                      <title id="icon-27b7-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">30.09.<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">31.09.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e40a-title">
                      <title id="icon-e40a-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">28.09<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">30.09.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3d6d-title">
                      <title id="icon-3d6d-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c087-title">
                      <title id="icon-c087-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">29.09<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">30.09.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c421-title">
                      <title id="icon-c421-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">30.09.<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">31.09.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7966-title">
                      <title id="icon-7966-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__year">
        <h2 class="headline headline--2">2023</h2>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">03.01.<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">05.01.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3d38-title">
                      <title id="icon-3d38-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Kindergarten Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9de1-title">
                      <title id="icon-9de1-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">28.01<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">29.01.</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">Grundschule Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-dd82-title">
                      <title id="icon-dd82-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__day">
      <div class="calendar__day__inner">
        <div class="calendar__day__meta">
          <div class="calendar__day__meta__text"><span class="calendar__day__meta__text__day"></span><span class="calendar__day__meta__text__date">05.02<span class="calendar__day__meta__text__hyphen">-</span></span><span class="calendar__day__meta__text__date-second">08.02</span></div>
        </div>
        <div class="calendar__day__main">
          <div class="calendar__day__list">
            <div class="calendar__day__list__item">
              <div class="calendar-banner">
                <div class="calendar-banner__main">
                  <div class="calendar-banner__info">
                    <div class="calendar-banner__info__item"><svg class="icon icon--grid-event" viewBox="0 0 200 200">
                        <use xlink:href="#icon-grid-event"></use>
                      </svg><span class="calendar-banner__info__text">Messe Stuttgart</span></div>
                    <div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
                        <use xlink:href="#icon-location"></use>
                      </svg><span class="calendar-banner__info__text">Stuttgart</span></div>
                  </div><a class="calendar-banner__a" href="#">
                    <div class="calendar-banner__headline">
                      <h4 class="headline headline--5">U3 Basis Fortbildung</h4>
                    </div>
                  </a>
                </div>
                <div class="calendar-banner__button"><a class="icon-button icon-button--secondary js-overlay-link" href="#" data-overlay-target="calendar-banner"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e62b-title">
                      <title id="icon-e62b-title">List</title>
                      <use xlink:href="#icon-arrow-right"></use>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="calendar__days__loadmore-button"><button class="button button--primary" type="button"><span class="button__text">Mehr laden</span></button></div>
  </div>
</div>

{
  "filterCloseIcon": "close",
  "filterOpenIcon": "filter",
  "filterOpenBadge": "2",
  "loadmoreButton": {
    "text": "Mehr laden",
    "link": null
  },
  "tabs": null,
  "filterTag": {
    "items": [
      {
        "link": "#",
        "text": "Lesung"
      },
      {
        "link": "#",
        "text": "Theater"
      }
    ]
  },
  "list": true,
  "formListFilter": {
    "fields": [
      {
        "name": "Ort",
        "use": "filter",
        "settings": {
          "title": "Ort",
          "items": [
            {
              "checkbox": {
                "text": "Ort 1"
              }
            },
            {
              "checkbox": {
                "text": "Ort 2"
              }
            },
            {
              "checkbox": {
                "text": "Ort 3"
              }
            }
          ]
        }
      },
      {
        "name": "Art",
        "use": "filter",
        "settings": {
          "title": "Art",
          "items": [
            {
              "checkbox": {
                "text": "Art 1"
              }
            },
            {
              "checkbox": {
                "text": "Art 2 with a verylongnamenameartname"
              }
            },
            {
              "checkbox": {
                "text": "Art 3"
              }
            },
            {
              "checkbox": {
                "text": "Art 4"
              }
            },
            {
              "checkbox": {
                "text": "Art 5 with a verylongnamenameartname"
              }
            },
            {
              "checkbox": {
                "text": "Art 6"
              }
            },
            {
              "checkbox": {
                "text": "Art 7"
              }
            },
            {
              "checkbox": {
                "text": "Art 8 with a verylongnamenameartname"
              }
            },
            {
              "checkbox": {
                "text": "Art 9"
              }
            }
          ]
        }
      },
      {
        "name": "Veranstalter",
        "use": "filter",
        "settings": {
          "title": "Veranstalter",
          "items": [
            {
              "checkbox": {
                "text": "Veranstalter 1"
              }
            },
            {
              "checkbox": {
                "text": "Veranstalter 2"
              }
            },
            {
              "checkbox": {
                "text": "Veranstalter 3"
              }
            }
          ]
        }
      },
      {
        "name": "Datum",
        "use": "filter--date-redux"
      }
    ]
  },
  "views": null,
  "items": [
    {
      "meta": {
        "day": null,
        "date": "22.08. -",
        "dateSecond": "11.10.24"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Tage der offenen Tür"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "12.11. -",
        "dateSecond": "11.12.24"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Schnupperstudium"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "30.09.",
        "dateSecond": "31.09."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "28.09",
        "dateSecond": "30.09."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "29.09",
        "dateSecond": "30.09."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "30.09.",
        "dateSecond": "31.09."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "year": 2023
    },
    {
      "meta": {
        "day": null,
        "date": "03.01.",
        "dateSecond": "05.01."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        },
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Kindergarten Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "28.01",
        "dateSecond": "29.01."
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "Grundschule Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    },
    {
      "meta": {
        "day": null,
        "date": "05.02",
        "dateSecond": "08.02"
      },
      "items": [
        {
          "use": "calendar-banner",
          "settings": {
            "icon": null,
            "linkOverlayTarget": "calendar-banner",
            "headline": {
              "size": 5,
              "text": "U3 Basis Fortbildung"
            },
            "text": null,
            "info": [
              {
                "icon": "grid-event",
                "text": "Messe Stuttgart"
              },
              {
                "icon": "location",
                "text": "Stuttgart"
              }
            ]
          }
        }
      ]
    }
  ]
}

Calendar @calendar

Variants

# Calendar-Grid @calendar--grid

# Calendar-List @calendar--list

# Calendar-List @calendar--list-dgb

# Calendar-List @calendar--list-c4f

Calendar-Grid @calendar--grid

Calendar-List @calendar--list

Calendar-List @calendar--list-dgb

Calendar-List @calendar--list-c4f