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.
Here’s what a default installation of the Calendar app looks like.
The settings panel is divided in the following sections:
- Style Propagation
We’ll go over each of them below.
The first item is the “Google Calendar Feed URL”. Here is where you’ll paste your Google Calendar’s XML URL.
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.
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.
This view can be changed via the buttons above the calendar.
On this section we have a few check boxes and drop down menus.
- 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.
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.
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
Note that these colors won’t be affected by the design shuffler.
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”.
Click on the “Calendars” tab on the top left of the settings that open.
Then look for the “Sharing” column of “My Calendars” section and click on “Share this calendar”.
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.
Then click on “Calendar Details”.
Scroll below to the orange button labeled “XML” on the “Calendar Address” row (not to be confused with the Private Address).
Clicking it will reveal the URL that you need to paste in Calendar app to show your events.
Please let us know if this article was helpful, or if you have any doubts.