--- title: "Web component" url: "https://twistcal.com/docs/web-component" description: "The twist-cal custom element — all attributes, calendar selection, JSON event data, all-day events, and the twistcal:add callback." --- Drop `` on the page. It renders a button with a dropdown menu. All styles live in a Shadow DOM root — no bleed in either direction. ``` ``` ## Attributes | Attribute | Required | Description | | --- | --- | --- | | title | yes | Event title (calendar subject) | | start | yes | Start datetime — any value new Date() understands | | end | yes | End datetime | | description | no | Event description (calendar body) | | location | no | Event location | | url | no | Event URL (included in .ics) | | timezone | no | IANA timezone (e.g. Europe/Oslo). Naive start/end are interpreted as wall-clock in that zone, converted to UTC. DST-aware. Ignored if start/end already carry an offset. See Datetime. | | label | no | Button text. Default: auto-detected from lang or Add to Calendar | | lang | no | Language code. Auto-detected from or navigator.language if omitted. See i18n. | | variant | no | solid (default) or outline (white bg, dark border, dark text) | | show-icons | no | true (default) or false — show/hide brand icons in dropdown | | show-icon | no | true (default) or false — show/hide the calendar icon on the button | | calendars | no | Comma-separated list of calendars to show, in order: google,outlook,yahoo,ics. Default: all four. ics and ical both work. Alias: services. | | all-day | no | true or false (default). Date-only .ics and Google/Yahoo formats. | | branding | no | true (default) or false — show/hide “Powered by TwistCal” link in dropdown | ## Calendar selection Show only the calendars you want, in the order you want: ```

``` ## Rich data via JSON For long descriptions or structured data, pass the event as JSON inside the element: ``` ``` JSON overrides matching attributes. Attributes not in the JSON are still read from the element. ## All-day events Set `all-day="true"` for date-only formats: ``` ``` Produces date-only `.ics` (`VALUE:DATE`) and Google/Yahoo all-day URLs. ## `twistcal:add` callback Each click dispatches a `twistcal:add` `CustomEvent` on the `` element with `{ action, event }` detail: ``` ``` `action` is `google`, `outlook`, `yahoo`, `ics`, or a custom calendar id. The event also fires on `document` for [declarative triggers](/docs/triggers/). ## Next - [Styling](/docs/styling/) — CSS custom properties and theming - [Declarative triggers](/docs/triggers/) — use your own buttons - [API](/docs/api/) — programmatic access