Embed Your Calendar into Weebly

It's easy to add your CalendarWiz calendar or upcoming events list to a Weebly website.  These instructions will make your Calendarwiz calendar "responsive" to the desktop, tablet, or phone device that is viewing it.  Let's start by logging into your CalendarWiz calendar and your Weebly site.

1. Click to edit the Weebly webpage where you want to insert your full calendar. 

Quick Tip: If you need to add a new "Calendar" or "Events" page, simply click "Pages" and the + button.  If you're adding a new page, we'd suggest picking a "Standard Page" with "No Header."

2.  Go to the Build tab and drag an "Embed Code" block to Calendar Webpage

3. Now we'll add your full calendar to the web page.  Copy and paste the code below.  Be sure to insert your unique calendar identifier name.  You'll see you calendar appear.  Publish changes if you like.

4. Next, we're going to make your calendar page "responsive" so that the full calendar shows on desktop devices and the upcoming events list shows on phones. 

Drag another embed block </> directly underneath your full calendar.  Like this

Here's the code to paste for the upcoming events list.  Again, insert your unique calendar identifier name.  You will need to navigate to your calendar page outside "Edit" mode to view the upcoming events list.

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

5.  Great work!  Next, we are going to add a little code to the header of the page.  Go to "Settings" then SEO section.

6. In the "Header Code" section, paste the following and Save.

7.  Next, navigate to your calendar page while NOT in edit mode.
Adjust your browser to a narrow width to see the upcoming events list appear.  Test and make any adjustments necessary.

We welcome you to contact us with any questions at  support@calendarwiz.com  We are here to help.

Article ID: 216
Last updated: 10 Jun, 2016
Revision: 11
Website Integration -> Embed Your Calendar into Weebly