wiz-calendar

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.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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>

   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 following properties are available:

Property	Type	Default value	Description
day	string	<div style='text-align: center;line-height: 50px'><span style='color:#434345; font-size:50px;font-family:arial,helvetica neue,helvetica,sans-serif; white-space: nowrap;'>25</span></div>	The day name displayed in the calendar.
link	string	N/A	A URL or link target for the calendar.
month	string	<div style='text-align: center;line-height: 26px'><strong><span style='font-size:26px; color:#0084c4;font-family:arial,helvetica neue,helvetica,sans-serif;'>JAN</span></strong></div>	The month name displayed in the calendar.