With our interactive calendar or events list you can publicise your ChurchSuite events.
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
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
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>/jsonTo 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:
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:
See the Pen 3 Featured Events by ChurchSuite (@churchsuite) on CodePen.
See the Pen Horizontal scrolling list by ChurchSuite (@churchsuite) on CodePen.
See the Pen Dark theme list, with brand colour customisation by ChurchSuite (@churchsuite) on CodePen.
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.
Create events, take online payments, subscribe to iCal feeds and manage staff leave.
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.