Our Website Integration tool makes it easy to add your calendar to any website and look great on any device. Get started by going to: Admin Menu > under Website Plugins > Website Integration

Introduction:

The Website Integration tool lets calendar administrators create code to embed into any website or website builder such as SquareSpace, WordPress, Weebly, Wix, and more.  In each tab, set options to to create code.  Note: settings & code on this page are not saved.

Here are the 5 types of code:

  • Responsive: JavaScript snippet to show full calendar on large screens and a mobile-friendly upcoming events list or mobile calendar on phones. See how it looks.
  • IFrame: Basic HTML code to frame your full calendar on your web page
  • Text Link: Creates a text link to your calendar
  • Image Link: Creates a graphic link to your calendar
  • Plain Link: Basic link to your calendar to share on the web, by email, etc.

    Note:     If you’re logged into your calendar you will see options to edit events and other account information in the Embedded Calendar, but visitors will not.

Categories:

Select the categories you want to display on your website.  Select “Always show all categories” if you want all category events displayed.  Otherwise, “Select individual categories” to check an individual category or specific combination of categories.  If you “Select individual categories” and do not select any categories the default category setting in the options menu will be used.

 

Options:

In each code tab, you’ll notice a set of options available.   Select the options you want.  You’ll notice the code below adjusts to the changes you make.

  • Width & Height: only pertains to Responsive & IFrame code.  100% width is good for most websites,
  • Upcoming Events List Theme: upcoming events list shown when calendar viewed on a phone.  Update events list width, colors & styles via: Admin Menu > Upcoming Events List.  TIP: set list width to 100% to fit perfectly on phones.
  • Calendar View: calendar view displayed pick from a month, week, list, or day view.
  • Mobile Preference: set to upcoming events list mobilepref=list or mobile calendar mobilepref=mobile
  • Hide Login Button: This option will cause the calendar to open without the login button in the calendar navigation bar.
  • Open link in:  Select how the calendar will open for text and image links, either in the same window or a new window.
  • Enter text to display in text link: This is the text that will be used to create the code for the text link you can put on your web page.
  • Select styles for text link: For text links, set the font, style, size and whether you want the link to have an underline decoration. The program will automatically create the style code for you.
  • Enter URL of hosted image: only pertains to image link tab. The value shown when you first open this screen is the URL to a graphic on the calendarwiz.com web server. To use a different graphic, enter the full URL to a graphic on your web server to be used in the code for your image link.

Copy & Paste Code:

At the bottom of each tab, you’ll see “Paste this code on your site” section.  Copy the entire code and then paste into your web page where you want your calendar.  In many cases, you’ll want to create a new web page just for your calendar.  If you use a website builder, in many cases, they have something called an “embed block” or “custom embed module” where you can add your calendar code.  Here are some help articles with screenshots for specific website builders: