Componentes / CalendarButton

CalendarButton

estable

Botón con desplegable de opciones para añadir un evento a distintos calendarios (Google, Outlook, etc.).

Controls

HTML

<div class="dropdown-calendar">
<button type="button" class="button-link button-link--primary dropdown-trigger" style="--icon-url: url(/icons/ico-calendar.svg);">
  Agregar al calendario
  <span class="button-link__icon is-custom" aria-hidden="true"></span>
</button>
  <div class="dropdown-wrapper">
    <div class="dropdown-content">
<button id="calendar-google" type="button" class="button-link button-link--underline dropdown-item" style="--icon-url: url(/icons/ico-arrow.svg);">
  Google calendar
  <span class="button-link__icon" aria-hidden="true"></span>
</button>
<button id="calendar-outlook" type="button" class="button-link button-link--underline dropdown-item" style="--icon-url: url(/icons/ico-arrow.svg);">
  Outlook calendar
  <span class="button-link__icon" aria-hidden="true"></span>
</button>
<button id="calendar-yahoo" type="button" class="button-link button-link--underline dropdown-item" style="--icon-url: url(/icons/ico-arrow.svg);">
  Yahoo calendar
  <span class="button-link__icon" aria-hidden="true"></span>
</button>
<button id="calendar-apple" type="button" class="button-link button-link--underline dropdown-item" style="--icon-url: url(/icons/ico-arrow.svg);">
  Apple calendar
  <span class="button-link__icon" aria-hidden="true"></span>
</button>
<button id="calendar-ics" type="button" class="button-link button-link--underline dropdown-item" style="--icon-url: url(/icons/ico-arrow.svg);">
  Descargar ICS
  <span class="button-link__icon" aria-hidden="true"></span>
</button>
    <p class="dropdown-content__info">Los archivos ICS funcionan con la mayoría de aplicaciones de calendario</p>
    </div>
  </div>
</div>