Embed Church Center calendar
Display events on your website by embedding the Church Center Calendar. Choose a month, list, or gallery view to display event details.
Important
You must publish your Calendar in Church Center before embedding it on another website. Only events published in Church Center are visible to the public.
If you are not using Publishing, an organization administrator can go to account settings and select the Church Center tab to ensure that Calendar appears in the Navigation section.
If you are using Publishing, an administrator can go to the Customize page and ensure that Calendar is included in the navigation.
Get an embed code for your calendar
Select the Events page in the top navigation.
Select the Share icon in the top right.
Choose the Embed option from the popup, and then select Continue.
Tip
If you applied filters before selecting the Embed option, they will not be reflected in the embedded calendar. To embed a filtered list of events, try sharing an iCal feed instead!
Choose a style: Month, List, or Gallery.
Gallery view gives people an overview of upcoming events using event thumbnails. For recurring events, only the closest upcoming instance is listed.
List view is a chronological view of your events. People associate the event with its name. List view is always enabled.
Month view shows the breakdown of events based on a typical monthly calendar view, which helps people associate an event based on its date.
Important
Only devices wider than 720 pixels can show the Month view, so phones will default to List view even if you choose Month.
Select a specific campus from the dropdown to only display events from that campus, or select All Campuses to show events from all campuses.
Select a category from the dropdown to only display events from that Church Center category, or select All Categories to show all your events.
Select the Include filter bar checkbox to allow people to filter for specific events.
Choose the type of Embed Code you'd like to use: Script, URL, or iFrame.
Select Copy code and paste the embed code anywhere inside your webpage's <body> tag.
Embed examples
Here are examples of the different styles for the embedded calendar.
