It's easy to add your CalendarWiz calendar or upcoming events list to an eCatholic website.  These instructions will make your calendar "responsive" to the desktop, tablet, or phone that's viewing it.  


Let's start by logging into your CalendarWiz calendar and your eCatholic website.

Here's how it looks...

responsive calendar on dektop and phone image


Here's how it works...


Step 1: Open eCatholic and login.  We need to add new webpage to eCatholic where your calendar will reside.  

You can do this via the "Pages and Navigation" section. Simply, drag a new page to where you want it listed in your website.  Label it "parish-calendar" or something similar. 

 


Step 2:  Let's add CalendarWiz to that new "parish-calendar" web page. Go to the new webpage and click [Add Content] in the lower left of eCatholic screen.

Next, click on the Social Media menu and then select the "Custom Embed" module.


Step 3: Drag the "Custom Embed" module over to your new calendar web page. Here you'll paste the following code when prompted.

Important:  insert your calendar name where is says "yourcalendaridentifier" in code below. 

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


If you want your full calendar open to a specific category or view, use the Website Integration tool:

Admin Menu > under Website Plugins > Website Integration

The Website Integration tool lets you set options and it automatically generates the code for you.  When you're ready, just copy and paste the code into your website.

Here's the complete list of parameters that can be adjusted:

crd= calendar identifier name
calwidth= sets full calendar iframe width
calheight= sets full calendar iframe height
theme= upcoming events list theme displayed on phones
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
cid[]= category id can be set to all or specific category ids
view= by default it's set to month view but may also be set to week, list, or day view.
skiptitle=1 to hide headline area with title and logos.  Recommended for embedded calendars.

Step 4:   The coding is all done:-) Save and publish the calendar web page in eCatholic.   

Go to your calendar page on your phone to view the display of the upcoming events list.  


Step 5: Customize and optimize your Upcoming Events List to match your site. This is fun:-)

Go to Admin Menu > under Website Plugins > Upcoming Events List

  • Script tab: select all categories you want to be displayed.
  • List tab: set the 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.


Note: If you find that your calendar page is narrow with a bunch of links on the right side, these links can easily be removed with a quick email to your fabulous eCatholic support team.  Kindly request that your eCatholic support person make your new calendar page a "full-width" page.  If you have any questions at all, email our support team at support@calendarwiz.com