Optimize upcoming events list for a responsive website

If you are looking to add an upcoming events list to your responsive site, you've come to the right place. The goal of a responsive website is to provide an optimal viewing experience, whether the visitor is on phone, tablet or desktop device.

Here's how it works:

  1. Go to Admin Menu > Upcoming Events List > Script tab > Select the categories of events you wish to display in your upcoming events list.  If you have future events in your category, you'll see them in the preview to the left.  Save.
     
  2. Go to List tab:  Start by setting your list width to 100% -  Save.

    Here you can also customize the list colors and style to match your site.  Let us know if we can help you get an exact match of your colors.
     
  3. Script tab: Copy your upcoming events list code.  You're going to paste this into your responsive website in a second.
     
  4. Create a new "block" or "div" in your website.  Paste your upcoming events list code into this new block or div element.  Save this change to your web page.  If you are using a website builder, you may need to navigate to the page while NOT in "edit" mode to view the upcoming event list.
     
  5. Test and make adjustments. Test how the block containing the upcoming events list behaves on different device widths. Make adjustments to the upcomign events list height or % width as necessary.  

If you have questions or need to troubleshoot, email us at support@calendarwiz.com We're happy to help you integrate CalendarWiz into your responsive website.  



Article ID: 185
Last updated: 12 Mar, 2018
Revision: 26
Mobile Website Integration -> Optimize upcoming events list for a responsive website
https://www.calendarwiz.com/knowledgebase/entry/185/