We're excited to share a new responsive calendar option that makes it even easier to add CalendarWiz to your responsive website. With just one snippet of code, you'll be able to optimize your calendar display for desktops, tablets, and phones. Show the full calendar for desktop and tablets and the upcoming events list or mobile calendar for phones.
 

Here's How it Looks...
 

 


Here's how it works...
 

Step 1: Go to your website builder and login so that you can edit your calendar web page. If you don't have a calendar page, create a new web page!  


Step 2: Here's the JavaScript code snippet to add to your calendar page.

For many website builder's, like SquareSpace, Weebly, WordPress, or Wix you might need to use an "Embed Block" to add JavaScript.  Click the links above for specific instructions for your website builder.  Once you've added an embed block to your web page, you need to add the below code:


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


Tip: In some cases you'll need to click a </> icon or button to add the above code.

Important:  be sure to replace "yourcalendaridentifier" with your unique calendar identifier name.
If you want to make any adjustments, here are the values you can tweak.

crd = calendar identifier name
calwidth= sets full calendar iframe width
calheight = sets full calendar iframe height
theme = upcoming events list theme
mobilepref= value may be set to list or mobile

  • mobilepref=list displays the upcoming events list on phones.  
  • mobilepref=mobile displays our mobile calendar on phones.

nolog=1 to hide the login button on full calendar.  Insert &nolog=1 into script URL
skiptitle=1 to hide headline area with title and logos.  Recommended for embedded calendars.


Step 3:  The coding is all done!  Now, go to your website while NOT in edit mode.

You should see the full calendar on your desktop computer. 


Step 4: Let's optimize your Upcoming Events List via:

Admin Menu > under Website Plugins > Upcoming 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, you can always email support at support@calendarwiz.com