It's easy to integrate CalendarWiz into your responsive Wild Apricot website.  With just one snippet of code, add a sophisticated calendar that looks great on desktop computers, tablets, and phones. Show the full calendar for desktop computers and tablets and an upcoming events list for phones.

Here's how it works..

Step 1: Go to your Wild Apricot website editor and add a new web page where you'd like to add CalendarWiz.


 

Step 2: Click to "Add Gadget" and you'll see a Gadget menu appear.

 


Step 3: Select the "Custom HTM" Gadget and Drag it to the new page.  Drop the Gadget where you want the calendar to appear.

 


Step 4: Once you've placed the Custom HTML Gadget where you want it on the page. Click on the gadget and then click the [Edit Code] button.



Next, paste this snippet of code - just be sure to replace "yourcalendaridentifier" with your unique calendar name.

<script type="text/javascript" src="//www.calendarwiz.com/cwlist/cwresponsive.js?crd=yourcalendaridentifier&calwidth=100%&calheight=1200&mobilepref=list&theme=Master%20Theme"></script>



Step 5: Click to [Save] the page.  Voila, the full calendar will appear!


Step 6: Let's optimize your Upcoming Events List for viewing on phones. Go to your CalendarWiz calendar and go to:

Admin Menu > under Website PluginsUpcoming Events List

  • Script tab: select all categories you want displayed.
  • List tab: set width to 100% and adjust colors or styles.
  • Events tab: control the number of events and days ahead and more.
  • Themes tab: use this tab if you want to create a 2nd upcoming events list.


If you need any help customizing your calendar or upcoming events list, please email support at support@calendarwiz.com