Keeping your website/funnel up-to-date and visually appealing is key to engaging your audience, and one of the best ways to do that is by integrating a dynamic Calendar. Whether you are showcasing upcoming events, tasks, or important updates, the Calendar element ensures your page stays fresh and relevant. But it does not stop there—customizing how your calendar looks and functions can take your website/funnel to the next level. In this guide, we will walk you through everything you need to know to make your calendar work for your audience.

Adding a Calendar Element #

To add a Calendar to your page, drag and drop the Calendar element to your preferred spot within the editor’s workspace.

After placing it, a pop-up will appear; there, you can select your Calendar from the dropdown. If you have not created one yet, simply click on the “click here” link to begin creating a Calendar. Once it is set up, you will instantly have access to view any upcoming events and tasks.

General Settings #

Element Name/Title #

The General Setting feature displays the default name/title of the Edit option you are currently working on. You have the option to either leave it as is or rename it according to your preference. This feature is especially useful when you have multiple elements on your web page and need to quickly identify and differentiate them.

Spacing Option #

The Spacing Option provides you with various options for adjusting the position of your content on your web page. The settings only apply to the specific Edit option you are working on.

• Padding Left, Right, Top, and Bottom: Four toggle bars let you move your content to the left, right, top, or bottom, depending on your design preferences, for a more visually balanced web page.
• Margin Top and Bottom: Toggle the bars to adjust the Margin Top and Bottom of your content for greater control over position and appearance.

Calendar Configuration #

• Use Group Page: Toggling on this option allows you to link your calendar to a shared group page, making it easier to manage events collaboratively. Any updates made within the group are automatically reflected on your webpage.
• Calendar: The Calendar Configure feature allows you to replace your current calendar with a new one. From the Calendar menu, you can select the calendar you prefer to be displayed on your web page so it always shows the most updated and relevant calendar.

Button Action #

Redirect Action: The Redirect Action feature lets you configure your button’s behavior by choosing between “Use action from calendar builder,” “Go to next step,” or “Go to website URL,” where you will select the specific page to link to, and you can toggle “Open in New Tab” to direct visitors to a new tab when they click.

Advanced Settings #

The Advanced Setting feature provides you with additional options to customize the elements on your web page to your preference.

Visibility #

The Visibility option allows you to choose whether an Edit option is visible on desktop, mobile, or both. By selecting the relevant icon, you can optimize your web page for your audience’s specific device.

Custom Class #

The Custom Class option enables you to assign a custom class name to your element, enabling you to apply custom styles specifically to that element. You can input your desired custom class name in the dedicated field, linking it to style definitions in a stylesheet.

CSS Selector #

You can easily copy the Custom CSS code by clicking on the Copy icon to the right of the reference code. This will simplify the process of replicating and implementing your CSS Selector code across your web page.

A well-integrated calendar keeps your audience informed and enhances their experience on your site. By customizing its settings, spacing, and appearance, you can ensure it aligns perfectly with your page’s design and functionality. Keep your events up to date, and your visitors will always stay in the loop.

Frequently Asked Questions #

How do I add a Calendar element to my page? #

Drag and drop the Calendar element into the editor’s workspace, then select your calendar from the dropdown in the pop-up that appears.

What if I have not created a calendar yet? #

In the pop-up, click the “click here” link to begin creating a calendar; once set up, it will display upcoming events and tasks.

Can I link the calendar to a shared group page? #

Yes. Toggle on Use Group Page to connect your calendar to a shared group page so group updates appear automatically.

Can I replace the calendar that is displayed? #

Yes. Use the Calendar option under Calendar Configuration to select a different calendar from the menu.

What does the Redirect Action control? #

It sets the button behavior, letting you use the calendar builder action, go to the next step, or go to a website URL, with an option to open in a new tab.

Can I show the calendar only on certain devices? #

Yes. Use the Visibility option in Advanced Settings to display the calendar on desktop, mobile, or both.