The wiz-agenda component provides agenda features in the email template as a table with the following columns:
• Time range
• Time separator
• Event description
• Speaker name
Installation
To install the wiz-agenda component, run the following command in your email project root directory:
wiz install @email/wiz-agenda
For more information, see Install components.
Usage
NOTE: As best practice, use eWizard Editor to add and edit the components.
To add the wiz-agenda component to your email and change its properties, in the App.vue file:
1) Add the wiz-agenda component to your email template.
<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-agenda
:speakers="[
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_d1c9'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_5979'),
description: $t('wiz_agenda_speakers_description_d591'),
speaker: $t('wiz_agenda_speakers_speaker_cc4a'),
__label: 'Item 1',
__id: '25-speakers-0',
},
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_4cdb'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_e372'),
description: $t('wiz_agenda_speakers_description_e138'),
speaker: $t('wiz_agenda_speakers_speaker_4cc1'),
__label: 'Item 2',
__id: '25-speakers-1',
},
{
timeFrom: $t('speakers_timeFrom_c79d'),
timeSeparator:
'<div style=\'line-height: 20px;text-align: left;\'><span style=\'font-size:14px;color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;\'>-</span></div>',
timeTill: $t('speakers_timeTill_c6ae'),
description: $t('speakers_description_ef1d'),
speaker: $t('speakers_speaker_010f'),
label: null,
},
]"
id="wiz-agenda-d26a"
:is-time="true"
></wiz-agenda>
</wiz-root>
</div>
</template>NOTE: The id attribute is required for the correct display of the component styles in eWizard Editor.
The __label attribute is required for displaying the event ITEM label in eWizard Editor.
The __id attribute is required for the correct display of the event styles in eWizard Editor.
2) Change the time range, event description, and speaker name in the <i18n></i18n> localization tag.
<!--./App.vue --><i18n>
{
"eng": {
"wiz_agenda_speakers_timeFrom_d1c9": "<div style=\"line-height:20px;text-align:left;\"><span style=\"color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\">09.00</span></div>",
"wiz_agenda_speakers_timeTill_5979": "<div style=\"line-height:20px;text-align:left;\"><span style=\"color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\">10.00</span></div>",
"wiz_agenda_speakers_description_d591": "<div style=\"line-height:20px;text-align:left;\"><span style=\"color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\"><b>My event</b></span></div>",
"wiz_agenda_speakers_speaker_cc4a": "<div style=\"line-height:20px;text-align:right;\"><span style=\"color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\">First speaker</span></div>"
}
</i18n>NOTE: For more information, see Localization.
Attributes
You can change the wiz-agenda component appearance and behavior using the following attributes within the <wiz-agenda></wiz-agenda> tag.
• is-time
Show or hide the time range by changing the is-time attribute value. To hide the time range from the agenda, set the is-time attribute value to false.
<wiz-agenda :is-time="false"></wiz-agenda>
• timeFrom
Enter the start time of the event as text.
<wiz-agenda
:speakers="[
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_d1c9')
}
]"
></wiz-agenda>• timeSeparator
Enter the time separator between the start time and the end time of the event. Use the default style and change only the separator: -, —, or :.
<wiz-agenda
:speakers="[
{
timeSeparator: '<div style=\'line-height: 20px;text-align: left;\'><span style=\'font-size:14px;color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;\'>:</span></div>',
}
]"
></wiz-agenda>• timeTill
Enter the end time of the event as text.
<wiz-agenda
:speakers="[
{
timeTill: $t('wiz_agenda_speakers_timeTill_5979')
}
]"
></wiz-agenda>• description
Enter the event description as text.
<wiz-agenda
:speakers="[
{
description: $t('wiz_agenda_speakers_description_d591')
}
]"
></wiz-agenda>• speaker
Enter the speaker name as text.
<wiz-agenda
:speakers="[
{
speaker: $t('wiz_agenda_speakers_speaker_cc4a')
}
]"
></wiz-agenda>• speakers
To change the number of rows with the time range, event description, and speaker name, add or remove objects with the timeFrom, timeSeparator, timeTill, description, and speaker fields within the speakers array.
<wiz-agenda
:speakers="[
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_d1c9'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_5979'),
description: $t('wiz_agenda_speakers_description_d591'),
speaker: $t('wiz_agenda_speakers_speaker_cc4a'),
__label: 'Item 1',
__id: '25-speakers-0',
},
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_4cdb'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_e372'),
description: $t('wiz_agenda_speakers_description_e138'),
speaker: $t('wiz_agenda_speakers_speaker_4cc1'),
__label: 'Item 2',
__id: '25-speakers-1',
},
{
timeFrom: $t('speakers_timeFrom_c79d'),
timeSeparator:
'<div style=\'line-height: 20px;text-align: left;\'><span style=\'font-size:14px;color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;\'>-</span></div>',
timeTill: $t('speakers_timeTill_c6ae'),
description: $t('speakers_description_ef1d'),
speaker: $t('speakers_speaker_010f'),
label: null,
},
]"
id="wiz-agenda-d26a"
:is-time="true"
></wiz-agenda>Properties
The wiz-agenda component has the following properties:
Property | Type | Default | Description |
| Boolean |
| Shows or hides the time range column on the agenda. |
| Array | N/A | The array of rows with the time range, event description, and speaker name. This array includes the |
| String |
| The start time of the event. |
| String |
| The symbol to visually separate the start time and the end time of the event. |
| String |
| The end time of the event. |
| String |
| The event description or the name of the presentation delivered by the speaker. This object is a part of the |
| String |
| The speaker name. This object is a part of the |
For more information, see Component properties.