Calendars are great tools to keep your members informed as to what is going on in the church. We’ve chosen to use Google Calendars as the recommended calendar platform for your church website because it is simple to use and people can add the calendar events to their personal Gmail accounts.

Reasons for Using Google Calendar

  • Google Calendar makes it easy to edit and create events. Most people already know how to use Google Calendar’s numerous editing features, repeating events, and multiple calendars views at once.
  • It can be shared and integrated into other people’s calendar. Members can easily add your church calendar to their personal Google calendar.
  • Google does not charge for using their calendars on your website (no hidden costs).
  • Google constantly improves and updates their Calendar, giving you a cutting-edge tool for your church events.

Create a Google Calendar Account

If you do not have a Google Calendar then you can create one by going to Google Calendar > clicking on the red Create an Account button in the upper-right corner of the screen > and entering your information. After you’ve confirmed your account (they’ll send you an email confirmation), you can log in and add your first event. (If you aren’t familiar with Google Calendar, we recommend reading Google’s getting started guide.)

If you have a Google Calendar through Google Apps (for domains), you’ll need to setup a regular Google Calendar account as the Google Apps calendar does not allow you to display event details publicly.

Add an Event

  1. Open up your Google Calendar and click on the day you want to add an event.
  2. You’ll see a pop-up appear where you can add the event and time in the What field:
    google-calendar-add-event
  3. If you do not need to add more information, click Create Event. Your event has been successfully added! However…
  4. If you do want to add more information about this event such as the meeting location, details, or to make this a recurring event, click Edit Event in the event pop-up. You’ll then see the following options:
    google-calendar-add-location-details
  5. To make a recurring or repeating event, click the Repeat check box > choose your settings > and click Done:
    google-calendar-repeat
  6. Once finished, click the red Save button at the top of your page.

Add the Calendar to Your Website

Now that you’ve added at least one event to your church calendar, we can add the Google Calendar to your church website.

  1. In the left column of your Google Calendar, under My Calendars, select Calendar Settings from the calendar drop down arrow:
    google-calendar-settings
  2. Choose the Share this Calendar link:
    google-calendar-share-this-calendar
  3. Select the Make this calendar public check box:
    google-calendar-make-public
  4. Click Save and then click Yes in the warning pop-up that appears:
    google-calendar-make-public-yes
  5. You will be brought back to the default calendar view. Select your calendar > Calendar Settings in the drop down menu (as described in step 1 above).
  6. Under the Calendar Details tab, click the Customize the color, size, and other options link:
    google-calendar-customize
  7. We recommend the following settings:
    google-calendar-customize-show

    If you would like to have sidebar widgets display on the same page as your calendar, then change the width to 530 pixels and the height to 500 pixels.

  8. On the same page, select and copy the HTML code:
    google-calendar-code
  9. Log in to your website control panel and go to Appearance > SF Theme Options:
  10. Look for the text field labeled Google Calendar code and paste the calendar code.
  11. Click Save Changes at the bottom of the page.

Add the Calendar to a Page

Now that you’ve added the calendar code in the SF Theme Options section, you can easily add a calendar to any page.

  1. Edit the page you want to add the calendar to.
  2. Type [calendar] (including the square brackets) like you see here:
  3. Click the Publish/Update button.
  4. View the page on the front end of your site that you added the[calendar] short code to. It will now be replaced with a calendar that looks like this:
    google-calendar

Troubleshooting

Sidebars are Covering the Calendar

If you have sidebars visible on the page you added the[calendar] short code to, the Google Calendar is likely being covered up by those sidebar widgets. To resolve this issue, go to your dashboard > Appearance > Widgets and Change the Visibility for any of the widgets that are showing on that page. Learn more about how to change the visibility of a widget. If you would like to have

Calendar is too Wide

If your calendar is hanging off the side of your website, then the width is most likely more than 860 pixels wide. Starting with step 6 under “Add the Calendar to Your Website”, make sure the width setting is 860 pixels wide. Then copy the code and paste it into the Google Calendar Code field under Appearance > SF Theme Options.