Componentes / CalendarButton
CalendarButton
estableBotón con desplegable de opciones para añadir un evento a distintos calendarios (Google, Outlook, etc.).
Los archivos ICS funcionan con la mayoría de aplicaciones de calendario
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>