Best Online Calendar

Support

Knowledge Base

Browse knowledge base categories or search with keyword related to your question.

Email Support

Can't find your answer?

Contact Support or Contact Sales
Search:     Advanced search
Browse by category:

Optimize upcoming events list for a responsive website

Article ID: 185
Last updated: 12 Mar, 2018

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.  

Others in this category
document Create a Mobile-Friendly List of Events for Mobile Website or Smartphone:
document Add mobile version of your calendar to mobile site
document Remove Login Nav Bar From Mobile Calendar App
document Add full calendar to a responsive website