The wiz-calendar component is a boxed calendar showing the month and day that you can edit manually in eWizard Editor. You can add the link to this component. For more information, see Calendar.
Installation
To install the wiz-calendar component, run the following command in your email project root directory:
wiz install @email/wiz-calendar
For more information, see Install components.
Usage
NOTE: As best practice, use eWizard Editor to add and edit the components.
To add the wiz-calendar component to your email and change its properties, in the App.vue file:
1) Add the wiz-calendar component to your email template.
<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-calendar :month="$t('wiz_calendar_4f97')" :day="$t('wiz_calendar_1292')" id="wiz-calendar-258c" :link="''"></wiz-calendar>
</wiz-root>
</div>
</template>NOTE: The id attribute is required for correct display of the component styles in eWizard Editor.
2) Add the month and day text to the <i18n></i18n> localization tag.
<!--./App.vue --><i18n>
{
"eng": {
"wiz_calendar_4f97": "<div style=\"line-height:26px;text-align:center;\"><span style=\"color:#0084c4;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:26px;\"><b>DEC</b></span></div>",
"wiz_calendar_1292": "<div style=\"line-height:50px;text-align:center;\"><span style=\"white-space:nowrap;\"><span style=\"color:#434345;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:50px;\">16</span></span></div>"
}
}
</i18n>For more information, see Localization.
3) Add a custom link as the link attribute value.
<wiz-calendar :link="'https://viseven.com/'"></wiz-calendar>
Properties
The wiz-calendar component has the following properties:
Property | Type | Default | Description |
| String |
| The text of the calendar month. |
| String |
| The text of the calendar day. |
| String | N/A | The link that opens when you click the calendar. |
For more information, see Component properties.