DYNAMIC ADD TO CALENDAR

The Dynamic Add to Calendar widget turns any Elementor button into a provider-ready calendar link. Feed it with dynamic values from JetEngine, ACF, or post/user meta and it will craft a prefilled event for Google Calendar or Outlook/Hotmail. The widget mirrors the styling toolkit of the Dynamic Bulk Add to Cart button, so you can keep CTA buttons consistent across your site.

USAGE & SCOPE

• Placement: Works in listings, single templates, or standalone pages.
• Dynamic Content: All event fields accept Elementor Dynamic Tags (JetEngine macros, ACF fields, etc.).
• Providers: Google Calendar and Outlook/Hotmail are supported in v1. Additional providers can be added in future releases.
• Fallbacks: If the end time is empty or precedes the start time, the widget automatically adds one hour to the start.

BUTTON CONTROLS

Configure the CTA label, icon, layout, and alignment.

• Button Text: Defaults to "Add to calendar". Fully dynamic-ready.
• Icon: Choose any Elementor icon; pick left/right placement and tune the Icon Gap to keep spacing consistent.
• Alignment: Inline align left/center/right or expand to Full width. When full width is enabled, a dedicated control decides how the label and icon align inside the button (start, center, end, or space-between).
• Stretch Styling: The widget uses the shared `.dynamic-add-to-calendar` class, inheriting padding, borders, background, hover, and typography settings from the Style tab.

CALENDAR DATA

Map your event fields and provider preferences.

• Provider: Google Calendar or Outlook/Hotmail. Each builds a native compose URL with the supplied data.
• Event Name: Required. Empty titles prevent link generation.
• Description: Optional multiline text. HTML is stripped to keep provider URLs safe.
• Location: Supports plain text or dynamic URLs (e.g. video meeting links).
• Start Date & Time: Required DateTime control (24h). Accepts ISO strings from dynamic tags.
• End Date & Time: Optional. When omitted or invalid the widget auto-sets start + 1 hour.

Tip: When using JetEngine DateTime fields, enable the "Return timestamp" option and convert with a macro or use Elementor's Dynamic Tags to output an ISO string.

STYLE OPTIONS

Match the button with your brand.

• Typography & Padding: Control the label font and outer spacing; the widget uses box-sizing: border-box to keep dimensions predictable.
• Normal / Hover Tabs: Separate background (classic/gradient), border, text color, and shadow controls for each state.
• Icon Styling: Change normal and hover icon colors and define a custom icon size. SVGs and font icons are both supported.
• Transitions: Smooth hover transitions are applied automatically for color, border, radius, and shadow changes.

STEP-BY-STEP SETUP

1. Drop the widget on your Elementor canvas (listing item, single template, or static page).
2. Set the provider. Choose Google Calendar or Outlook/Hotmail depending on the audience you target.
3. Add dynamic fields. Use Elementor Dynamic Tags for title, description, location, start, and end values. At minimum a title and start date/time are required.
4. Style the button. Adjust alignment, icon placement, padding, background, and hover state to match your theme.
5. Test the link. Click the button in the frontend to verify the provider opens a prefilled event with the expected data.

BEST PRACTICES

• When sourcing times from user inputs, validate that the end time is after the start time - otherwise the automatic +1 hour fallback is used.
• Use wp_timezone()-aware values (e.g. JetEngine DateTime in site timezone) to prevent unexpected UTC shifts.
• For multi-day events, supply both start and end with the same timezone offset.
• Combine the widget with conditional visibility if the event is only available for specific users or membership tiers.
• For static events, keep the description short - providers impose URL length limits.