Calendar

Calendar & Events Lists

With our interactive calendar or events list you can publicise your ChurchSuite events.

Calendar iFrames

ChurchSuite provides a wonderfully designed church calendar that you can quickly and easily embed in your church's website.

Not only is it customisable to your church's look and feel, but it stays up to date and even lets your members sign up to your events! On the calendar below, try clicking on some of the events!

Code

<iframe frameborder="0" height="1000" allowtransparent="yes" scrolling="yes" src="https://demo.churchsuite.com/-/calendar/902efe67-4f8a-494f-9ce5-7eba9c12a640" style="border-width:0" width="100%"></iframe>

Example

Event List iFrames

It's easy to embed beautiful ChurchSuite events in your website. Check out our Support Article to see how you can do it, just by copying and pasting a single line of code to your website!

Users can search and filter events easily and with our embed configurations you can control which events show up and which can be signed up for.

Code

<iframe frameborder="0" height="800" allowtransparent="yes" scrolling="yes" src="https://demo.churchsuite.com/-/calendar/62436903-841e-4239-bc95-e6952e17430e" style="border-width:0" width="100%"></iframe>

Example

Events list JSON

For customers looking to tailor their events list to their church branding, or to do something a bit different, we also offer a JSON feed of events data. The JSON feed is still controlled by an Embed Configuration, so will need setting up in ChurchSuite before use, but can then be found at

https://<your-church-subdomain>.churchsuite.com/-/calendar/<embed-configuration-uuid>/json
To easily find this URL, preview the Embed Configuration from within ChurchSuite, and add "/json" to the end of the URL! The data is paginated: the first page of data has extra keys for related models such as Sites and Categories, and then subsequent pages (accessed with a ?page=x query) only contain extra events data.

The full OpenAPI specification for this endpoint can be found here.

While we migrate users over to the new JSON data format, you must include an "X-ChurchSuite-Version: 5.0.0" header in requests to this endpoint to receive the updated (v5) format; once migration is complete, the previous v4 format will be removed, and the v5 format will become the default.

In order to make life as easy as possible, we have written a Javascript script (based on AlpineJS) that handles all the complexity of getting multiple pages of data from the JSON endpoint, and accessing it conveniently, letting you concentrate on designing your website. Simply import AlpineJS, import our script, give it your ChurchSuite URL and Embed Configuration UUID, and get designing!

See the Pen by ChurchSuite (@churchsuite) on CodePen.

These are the properties that are available on the Event model within our Javascript package, which you can use in your website:

  • event.allDay
    • A boolean that is true if the Event lasts all day.
  • event.allSites
    • A boolean that is true if the Event belongs to all Sites.
  • event.categoryId
    • The integer ID of the Category this Event belongs to.
  • event.description
    • The full HTML description of the event - use x-html instead of x-text.
  • event.end
    • A day.js instance representing the end date/time. See https://day.js.org/ for more information about formatting.
  • event.id
    • The unique integer ID for the Event.
  • event.identifier
    • The unique string identifier for the Event.
  • event.image
    • An object containing various sized image URLs, or null for an event with no image.
    • event.image.thumbnail - The thumbnail image URL.
    • event.image.small - The small image URL.
    • event.image.medium - The medium image URL.
    • event.image.large - The large image URL.
  • event.latitude
    • The Event latitude, as a float, or null for an online event.
  • event.link
    • The URL of the ChurchSuite Event page.
  • event.location
    • The Event location name.
  • event.longitude
    • The Event longitude, as a float, or null for an online event.
  • event.meetingUrl
    • The meeting URL, or null for an in-person Event.
  • event.mergeIdentifier
    • A merge identifier generated by the strategy set on the Embed Configuration, that allows you to identify Events that would be merged.
  • event.name
    • The name of the Event.
  • event.online
    • A boolean as to whether the Event is online, as opposed to in-person.
  • event.postcode
    • The postcode of the Event.
  • event.sequenceId
    • The Event sequence identifier.
  • event.signupEnabled
    • A boolean for whether this Event has signup enabled.
  • event.siteIds
    • An array of integer Site IDs the Event belongs to. For an All Sites Event, this will contain all the Site IDs.
  • event.start
    • A day.js instance representing the start date/time. See https://day.js.org/ for more information about formatting.
  • event.status
    • The status of the Event.

Other models that are available for use are:

We have prepared a number of examples to demonstrate how this can be used, with code available:

3 Featured Events

See the Pen 3 Featured Events by ChurchSuite (@churchsuite) on CodePen.

Horizontal scrolling list

See the Pen Horizontal scrolling list by ChurchSuite (@churchsuite) on CodePen.

Dark theme list, with brand colour customisation

See the Pen Dark theme list, with brand colour customisation by ChurchSuite (@churchsuite) on CodePen.

Grid with filters and hover details

It's really easy to add a search box, category dropdown, or site dropdown - have a look at this example to see how you can use these on your site!

See the Pen Grid with filters and hover details by ChurchSuite (@churchsuite) on CodePen.

Calendar Support Articles

Create events, take online payments, subscribe to iCal feeds and manage staff leave.

Start your free trial today!

Don't just take our word for it. Try it for yourself!

We'd love you to take up this 30 day free trial so you can see how ChurchSuite will benefit you.

Free trial