List Events

List Events

Welcome to the “Calendar Events” documentation. Looking to integrate calendar into your website? Our widget enables you to craft beautiful event listings that captivate your visitors. In this guide, we'll show you how to use the editor to customize your calendar events widget.

Step 1 : Open The Editor
Step 2 :  Add And Customize Events
Step 3 : Adjust The Layout 
Step 4 : Configure Settings
Step 5 : Choose Colors
Step 6 : Preview





Step 1: Open the Editor
1. Go to List Events template.
2. Click on "Edit" after choosing your template.





Step 2: Add and customize events

1. In this panel, you can easily add and remove events as needed.





2. Customize each event by entering its name and tag, uploading an image, specifying the event location and date, writing the button label, and adjusting colors.






Step 3: Adjust the Layout

1. In the layout panel, you can choose your preferred layout style, whether it's in grids or as a list.
     2. Additionally, you can specify the gap between event cards and set the maximum number of grids.



           


Step 4 : Configure settings

1. In this section, you'll manage the event settings, giving you the ability to show or hide old events, the title, filter, and adjust the padding and margin of the container.





2. In this section, you will customize event cards :

  •  You can select the action that occurs when a post is clicked, adjust card roundness, borders, and shadow. You can also specify the image height for grids layout, select the date display for list layout, and choose to use a 12-hour format.





  •  Additionally, you can choose whether to show or hide all card content, such as the image, tag, date, time, and location.




    • 3. For the popup, you can adjust its width, roundness, and button roundness.
    You also have the option to show or hide elements like the image, button, date, and location.





    4. Finally, you can select the icons for time and location.






    Step 5 : Choose Colors 

    1. Within this panel, you can select colors that match your website's design.






    Step 6 : Preview

    Lastly, you can click on “Preview” to see how your calendar events widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



    Related Articles:
    Calendar Events Number Counter