Add Your Church Calendar to CloverSites Website

It's easy to add CalendarWiz to your church's CloverSites website.  These instructions will make your CalendarWiz calendar "responsive" on desktop, tablet, and phones, which just means that it looks good on all screen widths.  Let's start by logging into your CloverSites website.
 

Step ‚Äč1.  Go to the CloverSites webpage where you want to insert your calendar. 
You may also add a new page, in which case a basic "Text/Photo" with "List" layout is best.
 

Step 2.  It's a cinch to add insert code into your CloverSites web page.  Simply paste code directly into the text section of the page.
 


 

Here's the code to add the full calendar.
Be sure to insert your unique calendar name where is says yourcalendaridentifer in the code.






Step 3. You will see your full calendar appear.  Now, let's have some fun making your calendar page responsive. 
Click in the text section just underneath your full calendar. 
 



Paste this code into the text section.  Again, insert your unique calendar name where is says yourcalendaridentifer in the code.

 



Step 4.  You will not see the upcoming events list yet - don't worry the "edit mode" doesn't show JavaScript. 

Important Note: Be sure that you've selected the event categories that you want to display in your upcoming events list as well as set your events list to 100% width.  Click here for tips on how to optimize your upcoming events list on phones.

 

Step 5.  Click the [Close] button to exit the calendar page.

Step 6.  Click on "Design Settings" and go to  "Custom <Head> Code" section.  You are going to paste a little code in here to make your upcoming events list appear on narrow width devices, such as iPhones, Androids, Windows phones, etc.  Don't be scared, it's easier that it looks!


 

Here's the code to Copy and Paste into the "Custom <Head> Code" field.  Save.




Step 7.  You're done!  Navigate to your calendar page while NOT in edit mode to see the full calendar.  Adjust your browser width to see the upcoming events list appear when the browser is narrow.  Test and make any adjustments the upcoming events list to get the look you want.
 

If you run into any questions at all we are hapyp to help.  Email us at  support@calendarwiz.com



Article ID: 218
Last updated: 27 Jun, 2016
Revision: 26
Website Integration -> Add Your Church Calendar to CloverSites Website
https://www.calendarwiz.com/knowledgebase/entry/218/