add-to-calendar-button

The button is implemented as a Web Component using the <add-to-calendar-button> custom element. You configure its behavior by adding options as attributes directly to the HTML tag.

Attribute Rules:

• Boolean values can be set as optionName="true" or simply by adding the attribute name (e.g., inline).
• If an attribute is not set, it defaults to false.

Minimal Configuration

For a basic event, you must provide a name and startDate. While not required, providing options (calendar types) and timeZone is recommended.

<add-to-calendar-button
  name="Add the title of your event"
  startDate="2022-02-21"
  options="['Google']"
  timeZone="America/Los_Angeles"
/>

Advanced Configuration

You can specify detailed event information, preferred calendar services, display styles, and more:

<add-to-calendar-button
  name="Add the title of your event"
  description="A nice description does not hurt"
  startDate="2022-02-21"
  endDate="2022-03-24"
  startTime="10:13"
  endTime="17:57"
  location="Somewhere over the rainbow"
  options="['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']"
  timeZone="Europe/Berlin"
  trigger="click"
  inline
  listStyle="modal"
  iCalFileName="Reminder-Event"
/>

PRO Configuration

If using the PRO version, you can use a proKey to link to a specific event structure:

<add-to-calendar-button proKey="prokey-of-your-event" />

The add-to-calendar-button is a custom HTML element (<add-to-calendar-button>) that renders an interactive calendar button. It can be configured via HTML attributes or by providing a JSON object within its inner HTML.

Configuration Methods

1. Attributes: Pass configuration directly as attributes on the element (e.g., name, dates, options).
2. JSON Inner HTML: Provide a JSON string inside the element tags. This is useful for complex nested objects.
3. PRO Configuration: If using the PRO version, provide a proKey attribute to fetch configuration from the server.

Example: Basic Usage (Attributes)

<add-to-calendar-button
  name="Conference"
  description="A great conference"
  startDate="2023-10-01"
  startTime="10:00"
  endTime="12:00"
  timeZone="America/New_York"
  options="['Google', 'Apple', 'Outlook.com']"
></add-to-calendar-button>

Example: JSON Inner HTML

<add-to-calendar-button>
{
  "name": "Conference",
  "description": "A great conference",
  "dates": [
    {
      "startDate": "2023-10-01",
      "startTime": "10:00",
      "endTime": "12:00",
      "timeZone": "America/New_York"
    }
  ],
  "options": ["Google", "Apple", "Outlook.com"]
}
</add-to-calendar-button>

The defineI18nConfig function is used to configure internationalization (i18n) settings, including locales, fallback behavior, and formatting for dates, times, and numbers. This configuration defines how localized strings and formats are presented across different languages like English (en) and German (de).

export default defineI18nConfig(() => ({
  locale: 'en',
  fallbackLocale: 'en',
  legacy: false,
  globalInjection: true,
  datetimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      },
      long: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
      },
    },
    de: {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      },
      long: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
      },
    },
  },
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: 'USD',
        useGrouping: true,
        currencyDisplay: 'symbol',
        notation: 'standard',
      },
      decimal: {
        style: 'decimal',
        minimumFractionDigits: 0,
        maximumFractionDigits: 2,
      },
    },
    de: {
      currency: {
        style: 'currency',
        currency: 'EUR',
        useGrouping: true,
        currencyDisplay: 'symbol',
        notation: 'standard',
      },
      decimal: {
        style: 'decimal',
        minimumFractionDigits: 0,
        maximumFractionDigits: 2,
      },
    },
  },
}));