Responsive Calendar & Upcoming Events List

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 an upcoming events list 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 SquareSpaceWeeblyWordPress, 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:

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 = list (only the upcoming events list view is available at this time. Mini Calendar option coming soon:)

nolog=1 to hide the login button on full calendar.  Insert &nolog=1 into script URL

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

If you need any help, you can always email support at

Article ID: 220
Last updated: 19 Oct, 2017
Revision: 14
Website Integration -> Responsive Calendar & Upcoming Events List