Easy Website Calendar Integration

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 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.

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 month, week, list, or day view.
  • 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:

Link Your Shared Calendar to Dropbox

If your team or group uses Dropbox to share files, it may make sense to include a link to your CalendarWiz shared calendar in Dropbox.  This article provides the steps to link your Dropbox to your CalendarWiz calendar:

Step 1:  Go to https://www.dropbox.com in a browser like Chrome or Internet Explorer and Login.
Please note that going to your local computer’s Dropbox will not work.  Once you’ve logged in, navigate to the Dropbox folder where you want to put your calendar link.

login-dropbox2

 

Step 2: Next, open a new window in your browser, not a new tab.  This is important.  Click the settings menu in upper right of browser and select New Window.

Go to your CalendarWiz calendar, using your standard calendar link, in this format:

https://www.calendarwiz.com/yourcalendaridentifier

Step 3: Here’s the trick, you’re going to “drag” your CalendarWiz calendar link from one window and “drop” it into your Dropbox folder that’s in the 2nd window.  Ok, start dragging.

 

drag-shared-calendar-link

Step 4: Drag the link over to your Dropbox and drop it where you want it.

drop-calendar-link

Step 5:  You’re done!  Your team or group will now see the link appear in their Dropbox on their computer.  Just a double click will launch your shared calendar.

link-calendarwiz-dropbox

 

Multi-Day Banner Events

A multi-day event is an individual event that spans more than one day, for example a vacation, seminar, project, travel schedule or fundraiser.   These events appear as a banner from the event start day to the event end day.

If you’d like this feature turned on in your calendar, email us at support@calendarwiz.com

multi-day-event-saved

Here’s how it works…

 

STEP 1:  Select event start date and start time.  The start time is simply the time the event begins on the start date.  In this example “Annie to Ireland” starts at 1:00PM on January 3rd.  You may also select the “All Day Event” option so you don’t have to select a start time or end time.

multi-day-event-start

STEP 2: Select event end date and end time.  The end time is when the event ends on the event end date.  In this example, “Annie to Ireland” ends on January 9th at 3:00PM.  You may also select “No End Time” so that no end time appears for this event.

multi-day-event-end

 

STEP 3: Voila! You’ve got a multi-day banner event.
For more info on adding events, check out these help articles on our Quick Event and Full Event editors.

multi-day-event-saved

 

Quick Tips:

  • Converting repeating event to multi-day? If you are editing an existing daily repeating event and want to convert it to a multi-day event, you must click “Never” under the repeating section.  Instead select a start date for the event and an end date on the left-hand side of the editor.
  • An event’s banner color will inherit it’s category legend color.  To change a category legend color, go to Admin Menu > Categories > Edit > Pick a new legend color > Save
  • Saturday to Sunday multi-day event titles not fitting the complete event title? Here are a couple solutions.
    1) Make the event title shorter.
    2) Start your calendar weeks with Monday to give more space for your Sat to Sun event title. Go to Admin Menu > Calendar Options > Advanced > check  > Save
    3) Add event as daily repeating event instead of multi-day event.
  • Multi-day events vs. repeating events – multi-day events last more than one day where as repeating events are single events that repeat in a specific pattern.  It is possible to add multi-day events that repeat as well.  Learn more about repeating events.

We welcome your questions and feedback!  Email us any time at support@calendarwiz.com