Use the wiz-event-invitation component to create a button that lets you download an ICS file. You can add the generated ICS file with the event details to the calendar. For more information, see Event.

Installation

To install the wiz-event-invitation component, run the following command in the root directory of your email project:

wiz install @email/wiz-event-invitation

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To add the wiz-event-invitation component to your email and change its properties in the App.vue file:

1) Add the wiz-event-invitation component to your email template.

<!--./App.vue --><template>
<wiz-wrapper>
<wiz-root>
<wiz-event-invitation 
:text="$t('wiz_event_invitation_46d2')"
id="wiz-event-invitation-b0df"
:ics-calendar="{
'name': 'My event',
'date': '2022-11-26',
'time': {'from': '01:30', 'to': '03:30'},
'timezone': 60,
'location': 'Alaska',
'description': 'My event description',
'link': 'https://api.ewizard.io/editor/api/v1/public/export-ics?name=My%20event&from=Sat%20Nov%2026%202022%2000:30:00%20GMT+0200%20(Eastern%20European%20Standard%20Time)&to=Sat%20Nov%2026%202022%2002:30:00%20GMT+0200%20(Eastern%20European%20Standard%20Time)&location=Alaska&description=My%20event%20description&token=0f3115561125ce5b13d76a13816b3f15'
}"
></wiz-event-invitation>
</wiz-root>
</wiz-wrapper>
</template>

TIP: The id attribute is required for the correct display of the component styles in eWizard Editor.

2) Change the component button text in the <i18n></i18n> localization tag.

<!--./App.vue --><i18n>
{
"eng": {
"wiz_event_invitation_46d2": "ADD TO MY CALENDAR"
}
{
</i18n>

For more information, see Localization.

Attributes

You can change the wiz-event-invitation component appearance and behavior using the following attributes within the <wiz-event-invitation></wiz-event-invitation> tag.

• :text

Modify the component button text by changing the :text attribute value. To hide the time range from the agenda, set the is-time attribute value to false.

<wiz-event-invitation :text="$t('wiz_event_invitation_46d2')"></wiz-event-invitation>

Use this attribute to define the key, such as wiz_event_invitation_46d2 for the key-value pair in the i18n tag.

You can use the :text attribute value as a string without the localization key. For example:

<wiz-event-invitation :text="'This is my text'"></wiz-event-invitation>

You can edit the text when you archive and upload the email project to eWizard. eWizard.js adds the localization key automatically in Editor. When you download the email project with the edited text, you can see the localization key added instead of the actual text.

• line-height

Set the hight of the button text in pixels in the attribute value.

<wiz-event-invitation :line-height="30"></wiz-event-invitation>

• full-width

Set the attribute value to true to make a full width button on the page. Use the text-align property in this mode.

<wiz-event-invitation :text-align="'center'" :full-width="true"></wiz-event-invitation>

• text-align

Set the attribute value to left, center, right, or justify to change the alignment of the button text. To see the button text alignment, set the full-width attribute to true.

<wiz-event-invitation :text-align="'left'" :full-width="true"></wiz-event-invitation>

• align

Set the attribute value to left, center, or right to change the button alignment on the page. Use this attribute only if the full-width attribute value is false.

<wiz-event-invitation align="center" :full-width="false"></wiz-event-invitation>

• name

Enter the name of the event as text.

<wiz-event-invitation
:ics-calendar="
{
'name': 'My event'
}"
></wiz-event-invitation>

• date

Enter the date of the event in the YYYY/MM/DD format.

<wiz-event-invitation :ics-calendar="{'date': '2022-11-26'}"></wiz-event-invitation>

• time

Enter the time of the event using the from and to fields.

<wiz-event-invitation :ics-calendar="{'time': {'from': '01:30', 'to': '03:30'}}"></wiz-event-invitation>

from is the start time of the event.

to is the end time of the event.

• timezone

Enter the timezone of the event.

<wiz-event-invitation :ics-calendar="{'timezone': 60}"></wiz-event-invitation>

The timezone is dynamically generated based on the city of the event.

• location

Enter the location of the event as text.

<wiz-event-invitation :ics-calendar="{'location': 'Vancouver, Canada'}"></wiz-event-invitation>

• description

Enter the description of the event as text.

<wiz-event-invitation :ics-calendar="{'description': 'My event description'}"></wiz-event-invitation>

• link

A link to the .ics file with the event details. The link is generated automatically after you add, upload, and modify the component in eWizard Editor.

<wiz-event-invitation :ics-calendar="{'link': 'https://api.ewizard.io'}"></wiz-event-invitation>

Properties

The wiz-event-invitation component has the following properties:

Property	Type	Default	Description
`icsCalendar`	Boolean	N/A	The object with that includes the `timezone`, `location`, `description`, and `link` to the event
`text`	String	`<strong><span style='color:#ffffff;` `font-size: 13px;font-family:arial,helvetica neue,helvetica,sans-serif;'>` `ADD TO MY CALENDAR</span></strong>`	The button text of the component
`lineHeight`	Number	`14`	The height of the button text
`textAlign`	String	`center`	The alignment of the button text. The possible values are `left`, `right`, and `center`
`fullWidth`	Boolean	`false`	Makes the button full width of the page
`align`	String	`center`	Defines the button alignment on the page

For more information, see Component properties and List of component properties.