Ask a Question ?
Design & Publish Websites Faster

Show your Google Calendar Events with the Calendar App

With the Calendar app you can show off your Google Calendar events in your site!

How to Use it

Drag and drop the Calendar app “Install New” button from the App Store.

We’ll go over the options and what you can do with it below.

Preview

Here’s what a default installation of the Calendar app looks like.

Preview of the Calendar app

Preview of the Calendar app

Settings

The settings panel is divided in the following sections:

  • General
  • Header
  • Format
  • Skin
  • Style Propagation

We’ll go over each of them below.

General

The first item is the “Google Calendar Feed URL”. Here is where you’ll paste your Google Calendar’s XML URL.

Paste your Google Calendar URL here

Paste your Google Calendar URL here

If you want to find how to get this URL from Google Calendar, scroll down below to “Get your Google Calendar Link”.

“Week Starts” let’s you select any day of the week (including weekend days) as the first day of the week. Most calendars use Sunday, but you can choose another day.

Select a day of the week as the "first day of the week"

Select a day of the week as the “first day of the week”

Following there’s a check box to enable/disable the display of weekends.

Lastly the default calendar view. It let’s you choose which is the kind of view that is shown when your visitors first see it.

Default Calendar View: choose month, week, or day

Default Calendar View: choose month, week, or day

This view can be changed via the buttons above the calendar.

Click on each of these buttons to change the calendar view

Click on each of these buttons to change the calendar view

Header

On this section we have a few check boxes and drop down menus.

All the header settings are shown here

All the header settings are shown here

  • Display Time Frame: if you deselect this box, the date at the top of the calendar won’t be shown. This date reflects the data of the view, for example: current month.
  • Navigation Controls: these controls let you browse to the next/previous period. It depends on which view is currently on: if it’s the month view, clicking the navigation arrows will advance/go back a month at a time.
  • Navigation Controls Position: choose between left, center and right.
  • Today Shortcut Button: this button takes you to the current date (if you’ve browsed back or ahead of time).
  • Shortcut Position: choose between left, center and right.
  • Views Switch: here you can enable/disable the buttons to change the view (month/day/week).
  • Switch Position: choose between left, center and right.

Format

Here you can select the date (year/month/day) formatting options.

  • Date Format: choose between year first, then month and day last (MDY), day first, then month and lastly year (DMY) and month first, then day and last year (MDY).
  • Year Format: choose between 2 or 4 digits for years.
  • Month Format: choose between “Full Name”, “Short Name”, “2 Digits” and “1 Digit”.
  • Day Format: choose between full name, short name or digits.
  • Day Column Format: choose between full or short name.

Skin

The skin section of the calendar settings contains a set of color pickers for the following items:

  • Header Active Buttons
  • Calendar Day Title
  • Calendar Day Background
  • Calendar Cell Background
  • Calendar Cell Number
  • Highlighted Cell Background
  • Highlighted Cell Number
  • Event Text
  • Event Background
Choose a color for each of these items to match your site's theme

Choose a color for each of these items to match your site’s theme

Note that these colors won’t be affected by the design shuffler.

Style Propagation

A check box for enabling style propagation is found in this section.

Learn more about style propagation in the link above.

Get your Google Calendar Link

If you’re wondering how to get your XML URL to paste in the Calendar app, here’s how.

Go to your Google Calendar (http://google.com/calendar) and locate the engine icon on the top right. Click it and select “Settings”.

Open Google Calendar's Settings

Open Google Calendar’s Settings

Click on the “Calendars” tab on the top left of the settings that open.

Select "Calendars" tab (second from left to right)

Select “Calendars” tab (second from left to right)

Then look for the “Sharing” column of “My Calendars” section and click on “Share this calendar”.

Click on this link to reveal the sharing options

Click on this link to reveal the sharing options

On this section, you’ll need to enable the check box for making “this calendar” public. If you don’t want your personal calendar events to be public, you can create another calendar for this purpose.

You'll need to make your calendar public

You’ll need to make your calendar public

Then click on “Calendar Details”.

Click on this link to see the calendar details (and XML URL)

Click on this link to see the calendar details (and XML URL)

Scroll below to the orange button labeled “XML” on the “Calendar Address” row (not to be confused with the Private Address).

This button will reveal the URL address that you need to paste in Breezi

This button will reveal the URL address that you need to paste in our web tool.

Clicking it will reveal the URL that you need to paste in Calendar app to show your events.

That’s it

Please let us know if this article was helpful, or if you have any doubts.

Menu