Phoenix function component that renders a calendar-provider dropdown.
Uses a native <details>/<summary> element — no JavaScript required.
Usage
<AddToCalendar.Component.calendar_button
name={@event.title}
start_date={@event.starts_on}
start_time={@event.start_time}
end_date={@event.ends_on}
end_time={@event.end_time}
timezone={@event.timezone}
location={@full_address}
description={@event.description}
/>Providers
The :providers attr controls which options appear (order matters):
"google"— Google (opens in new tab)"outlook"— Outlook.com (opens in new tab)"apple"— iCal download labelled "Apple""ical"— iCal download labelled "iCal / Other"
Tailwind content path
If using Tailwind CSS, add this package to the content paths in tailwind.config.js
so its class names are included in your build:
content: ["../deps/add_to_calendar/lib/**/*.ex"]Summary
Functions
@spec calendar_button(map()) :: Phoenix.LiveView.Rendered.t()
Attributes
name(:string) (required)start_date(:any) (required) - Date.t().start_time(:any) (required) - Time.t().end_date(:any) (required) - Date.t().end_time(:any) (required) - Time.t().timezone(:string) (required)location(:string) - Defaults tonil.description(:string) - Defaults tonil.label(:string) - Defaults to"Add to Calendar".providers(:list) - Defaults to["google", "apple", "ical", "outlook"].icon(:boolean) - Defaults totrue.class(:string) - Defaults tonil.button_class(:string) - Defaults to"rounded px-2.5 py-1 text-sm font-medium ring-1 ring-inset ring-current hover:bg-black/5".