<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>

{
  "prevIcon": "chevron-left",
  "nextIcon": "chevron-right",
  "tabs": [
    {
      "text": "April",
      "link": "#",
      "active": true
    },
    {
      "text": "Mai",
      "link": "#"
    },
    {
      "text": "Juni",
      "link": "#"
    },
    {
      "text": "Juli",
      "link": "#"
    },
    {
      "text": "August",
      "link": "#"
    },
    {
      "text": "September",
      "link": "#"
    },
    {
      "text": "Oktober",
      "link": "#"
    }
  ]
}