How to embed a Planning Center calendar on your Churchly site

Want your church's events to show up right on your website? If you use Planning Center Calendar, you can embed your Church Center calendar on any Churchly page in just a few minutes. Here's how.

Before you start: Your calendar must be set up in Church Center first. Only events that are visible in Church Center will show on the embedded calendar.

Step 1: Get your embed code from Planning Center

1. In Planning Center Calendar, select Events from the top navigation.
2. Click Actions in the top right of the calendar.
3. Choose Share events from the dropdown.
4. Choose Embed, then click Continue.
5. Pick a style for your calendar:
   • Month: a traditional monthly calendar.
   • List: a chronological list of upcoming events.
   • Gallery: event thumbnails; recurring events show only their next date.
6. (Optional) Use Custom Filters to narrow things down:
   • Campus: show events from one campus, or all campuses.
   • Category: show events from one Church Center category, or all categories.
   • Check Include filter bar if you'd like visitors to filter events themselves.
7. Choose your embed code type: Script, URL, or iFrame.
8. Click Copy code.

Tip: Filters you applied on the Events page before clicking Embed won't carry over. Use the Custom Filters in the embed window instead.

Step 2: Add a Code widget to your Churchly page

1. Log in to your Churchly website editor.
2. Navigate to the page where you want your calendar (for example, an Events page).
3. Click Add a new block to create an empty section.
4. In the widgets menu, scroll down to the Code widget and drag it into the new block.

Important: Use the Code widget, not the Embed widget. The Embed widget is built for links like YouTube and Vimeo videos, and Planning Center's calendar code won't work there.

Step 3: Paste your calendar code

1. Paste the code you copied from Planning Center into the Code widget.
2. Make sure Execute code is checked. If it's unchecked, your code will show as plain text instead of a calendar.
3. Adjust the widget's spacing and size so the calendar fits nicely on your page.
4. Click Save, then preview your page to make sure everything looks right.

How it looks on mobile

Planning Center controls how the calendar displays, so a few things work differently on phones:

• Month view only shows on wider screens. On any screen or container narrower than 720 pixels (including phones), the calendar always switches to List view, even if you chose Month.
• There's no setting to limit the list to one month or a set number of events.
• Want a shorter list on mobile? Try one of these:
  • Gallery view: recurring events show only their next date, which keeps the list much shorter.
  • Category filter: in Custom Filters, choose one category (like main events) so fewer events show.
• Just create the new embed code in Planning Center and paste it into the same Code widget.

For anything beyond these options, Planning Center's support team is the best place to ask, since it's their calendar tool: Planning Center Help.

Need Further Assistance?

If you have any questions or need further assistance, click on the "Need Some Help" button on your dashboard to reach out to our support team.

We're here to help you make the most out of your Churchly website and ensure you can effectively reach your community.