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
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 notsaved.
Here are the 5 types of code:
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.
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.
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:
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.
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:
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.
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.
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.
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.
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.