Kings Hope Logo

Events

ChurchSuite Demo Church website

Photo by David Todd McCarty on Unsplash

events and calendar

Showcase your church calendar and events on your website with ChurchSuite!

For a simple copy and paste method check out the iFrames section, or for more control and better search engine optimisation, check out our JSON feed.

EMBED USING 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!

If you want complete control over how your events are styled, and are up for a little coding, skip ahead to the Embed using JSON Feeds section.

Embed a beautiful church calendar!

ChurchSuite also 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!

events with json feed

Handy with HTML and CSS? You can use our JSON feed to style your upcoming events to fit in with your website's design! Using the feed also improves your site's SEO and helps users find your site.

In this example we're using Alpine.js with a script we wrote (that you can use in your website!) to pull in our demo data from the JSON feed in a simple way, and give it a bit of custom styling using Tailwind CSS. Check out the code we used below and see how you can adapt it for your website.

We've recently updated our Calendar events JSON feed (which this script uses) to add a selection of new filtering and merging parameters, and so we've released a new version (v2) of our script to make use of them. This has included a change from only showing Featured Events to being able to see all events - if you're already using the script and want to update without any visual changes, simply add a 'featured' parameter to the x-data.

		
<head>
	<!-- In this example, we are styling using tailwind css, but you don't have to if you don't want to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/[email protected]/dist/custom-forms.min.css" rel="stylesheet">

	<!-- Alpine.js is required, though -->
	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@^3"></script>	

    <!-- You will also need to add this inline script, and update it to the right URL for your church. -->
	<script> CS.url = 'demo.churchsuite.com' </script>
</head>
<body>
	<!-- Within the body, add a div with an x-data attribute. -->
	<div x-data="CSEvents({featured: 1})" class="max-w-screen-lg mx-auto">
		<div class="gap-x-4 gap-y-4 grid grid-cols-1 sm:grid-cols-2 mb-4 mx-4 sm:mx-auto">
			<!-- Add the following input for a search bar. -->
			<input
				x-model="search"
				placeholder="Search events..."
				type="search"
				class="bg-gray-200 border-2 border-gray-200 focus:bg-white focus:outline-none font-bold px-4 py-3 rounded-lg sm:col-span-2 text-gray-700"
			/>

			<!-- Category selector -->
			<select x-model="category" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Category</option>
				<template x-for="category in categories">
					<option x-text="category"></option>
				</template>
			</select>

			<!-- Site selector -->
			<select x-model="site" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
				<option value="">Filter by Site</option>
				<template x-for="site in sites">
					<option x-text="site"></option>
				</template>
			</select>
		</div>

		<!-- This is the main event cards section -->
		<div class="bg-gray-200 justify-around overflow-scroll sm:px-4 py-8 rounded sm:flex sm:flex-wrap w-full" style="height: 730px">		
			<!-- Add a template element with this x-for attribute. This is saying 'for each event, make a copy of this template' -->
			<template x-for="event in events.slice(0,9)">
				<div class="mx-2 relative">
					<!-- If the event has a link, this anchor tag will make the card into a clickable link -->
					<a :href="event.link" class="absolute inset-0 z-10" :class="{'hidden': event.link == ''}" target="_blank"></a>
					<div class="bg-white duration-500 flex hover:-translate-y-2 mb-6 hover:shadow-xl rounded sm:flex-col sm:h-72 transform transition">
						<!-- Event Image -->
						<div>
							<img :src="event.image" :alt="event.name" class="h-20 w-56 sm:h-32 sm:w-60 object-cover rounded-l sm:rounded-l-none sm:rounded-t">
						</div>

						<!-- Event Information -->
						<div class="sm:mt-2 sm:h-full w-full sm:w-60 sm:px-3 sm:pb-3 flex flex-col justify-between ml-2 sm:ml-0">
							<!-- Use the x-text attribute to show the event information -->
							<h3 x-text="event.name" class="overflow-hidden h-6 mt-1 sm:mt-0 sm:h-full font-bold text-base sm:text-lg"></h3>
							<div class="font-light text-sm sm:text-base text-gray-700 sm:mt-2 sm:mt-auto sm:text-right">
								<p x-text="event.start.format('dddd, D MMMM')" class="hidden sm:block">></p>
								<p x-text="event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma')" class="hidden sm:block">></p>
								<p x-text="event.start.format('ddd D MMM, ') + (event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma'))" class="pb-2 sm:hidden"></p>
								<p x-text="(event.online ? 'Online - ' : '') + event.location" class="hidden sm:block"></p>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>
</body>
		
	

How it works

To add data to your site, we use Alpine.js with a script we've written to make life easy for you, to bring our ChurchSuite JSON feeds into your website in an easy to use package. Check out the example in the Code tab as we track the portions highlighted in yellow.

Script tags

The first thing you'll need are a few <script> tags within the head section of your HTML document, without which nothing will work. Tailwind is optional (but recommended - it's great!), Alpine and ChurchSuite are required.

You will also need to add the inline script at the bottom, and update the yellow text to the URL you use to log into your church's ChurchSuite account.

				
<head>
	<!-- We use Tailwind CSS for styling, because we think it's great, but you don't have to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/[email protected]/dist/custom-forms.min.css" rel="stylesheet">
	
	<!-- Alpine.js is required for the ChurchSuite script -->
	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
	
	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@^3"></script>	
	
	<!-- You will also need to add this inline script, and update it for your church. -->
	<script> CS.url = 'demo.churchsuite.com' </script>
</head>
				
			

These are best placed in the head, but if you don't have access to the head, you can also put them in the body before your code.

We cache the event data locally for a short period, so if you've recently updated an event on ChurchSuite and aren't seeing the changes in the browser, try clearing your browser's local storage!

x-data

Add an x-data attribute to the outer container (in this case, a div element) of your ChurchSuite section. This comes from Alpine, but allows you to access all of your ChurchSuite feed data in any child elements. You can also send extra URL parameters to the ChurchSuite API by passing them into CSEvents - check out our GitHub repo for available parameters. You'll notice that in our example, we're only showing Featured events, but you may also want to explore merge strategies or other filters.

				
<body>
	<!-- Within the body, add a div with an x-data attribute. -->
	<div x-data="CSEvents({featured: 1})">
		<!-- Any elements you put in here can now access your ChurchSuite feed data! -->
	</div>
</body>
				
			
You can use multiple x-data sections on one page if you like - perhaps you want to have a separate section for events in a certain category.

Adding a search box

We use Alpine's x-model to link an input element into your events data as a search parameter. Simply create an input element, drop in the yellow x-model attribute, and whatever you type in the searchbox will automatically filter your events!

				
<input
	x-model="search"
	placeholder="Search events..."
	type="search"
/>
				
			

Note that with no API parameters or filters, events will default to merging with the signup_to_sequence strategy, so that you see a selection of different events. If filters are used (such as a search box or category dropdown), though, all events will show with no merging.

For example, a single Alpha Course might show by default, but by searching for Alpha, the whole sequence of events appears. See our API docs for more information, or alternative merge strategies.

Adding dropdown filters

In a similar way, we can use x-model to create dropdown filters to filter by category or site. The example below is filtering by category, but you can change each instance of 'category' to 'site' if you would like. If your ChurchSuite account is multisite and your events belong to one site, you may want to use the site filter - if an event is All Sites, it will always show.

				
<select x-model="category" class="border-2 border-gray-200 form-select p-4 rounded-lg text-gray-700">
	<option value="">Filter by Category</option>
	<template x-for="category in categories">
		<option x-text="category"></option>
	</template>
</select>
				
			
Want to only show events from one category or site, without showing a dropdown? Simply add an API parameter to your x-data!
					
<div x-data="CSEvents({category: 12})">
					
				
For example, to only show the next event with Alpha in its name, your container would look like this:
					
<div x-data="CSEvents({num_results: 1, q: 'alpha'})">
					
				

Styling each event

The final piece of the puzzle is styling each event to match your website design. This works using Alpine and templates.

Templating

Create a template element containing the styled HTML for a single element card - in our example, we have the event image with details below, all wrapped in an anchor element so that it becomes a clickable link to the signup page. Add the Alpine x-for attribute (shown below in yellow) to the template, and when the page loads it will repeat the template for each event (or each event matching the search or category filters, if you are using them!).

Wherever you want text information about the event, such as name or location, simply create a text element (such as a <p> or <span>) and give it an x-text attribute - when the template runs, it will fill in the information for each event. For the event link, create an anchor element (<a>) with an :href="event.link" attribute - note the colon! Similarly for images, create an <img> element and add a :src="event.image" attribute. For a full list of information keys you can use, see below.

Dates and Times

Our script comes bundled with Day.js for fully flexible styling of dates and times. Simply use the format function on an event.start or event.end property to format it however you would like - check out the Day.js docs for a list of format options. Any of the options listed, including preset localised formats (see localisation for more information) are available for your use.

All the classes you see in our code with strange names like w-60 or font-bold - that's Tailwind CSS. It doesn't do anything functionally, so you could remove it and use standard CSS if you like!

				
<template x-for="event in events">
	<div class="mx-2 relative">
		<!-- If the event has a link, this anchor tag will make the card into a clickable link -->
		<a :href="event.link" class="absolute inset-0 z-10" :class="{'hidden': event.link == ''}" target="_blank"></a>
		<div class="bg-white duration-500 flex hover:-translate-y-2 mb-6 hover:shadow-xl rounded sm:flex-col sm:h-72 transform transition">
			<!-- Event Image -->
			<div>
				<img :src="event.image" :alt="event.name" class="h-20 w-56 sm:h-32 sm:w-60 object-cover rounded-l sm:rounded-l-none sm:rounded-t">
			</div>

			<!-- Event Information -->
			<div class="sm:mt-2 sm:h-full w-full sm:w-60 sm:px-3 sm:pb-3 flex flex-col justify-between ml-2 sm:ml-0">
				<!-- Use the x-text attribute to show the event information -->
				<h3 x-text="event.name" class="overflow-hidden h-6 mt-1 sm:mt-0 sm:h-full font-bold text-base sm:text-lg"></h3>
				<div class="font-light text-sm sm:text-base text-gray-700 sm:mt-2 sm:mt-auto sm:text-right">
					<p x-text="event.start.format('dddd, D MMMM')" class="hidden sm:block">></p>
					<p x-text="event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma')" class="hidden sm:block">></p>
					<p x-text="event.start.format('ddd D MMM, ') + (event.allDay ? 'All Day' : event.start.format('h:mma') + ' - ' + event.end.format('h:mma'))" class="pb-2 sm:hidden"></p>
					<p x-text="(event.online ? 'Online - ' : '') + event.location" class="hidden sm:block"></p>
				</div>
			</div>
		</div>
	</div>
</template>
				
			

Localisation

ChurchSuite supports a number of languages, and so does our Embed script. Almost all of the data comes straight from your ChurchSuite account, so will already be in whichever language you use, but any dates or times can also be localised.

To set your ChurchSuite embedded sections to use a particular locale, add an extra command in your <head> next to where you defined your ChurchSuite URL - the default locale is 'en', but other locales available are 'da', 'de', 'es', 'fr', 'it', 'nl', 'pl', 'sk' and 'sv'.

					
<head>
	<!-- We use Tailwind CSS for styling, because we think it's great, but you don't have to. -->
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@tailwindcss/[email protected]/dist/custom-forms.min.css" rel="stylesheet">
	
	<!-- Alpine.js is required for the ChurchSuite script -->
	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
	
	<!-- This is our ChurchSuite script, to make your life easy! -->
	<script src="https://unpkg.com/@churchsuite/embed@^3"></script>	
	
	<!-- You will also need to add this inline script, and update it for your church. -->
	<script> CS.url = 'demo.churchsuite.com'; CS.locale = 'de'; </script>
</head>
					
				

Available Event Data

This is a list of data keys you can use for each event.

  • event.allDay

    A boolean variable as to whether an event lasts all day - you may want to style it differently, like in our example!
  • event.brandEmblem

    This is the URL of your church branding emblem image - it will be the same on every event, but you can incorporate it into your design if you would like.
  • event.category

    The category of the event.
  • event.description

    The event description, in HTML format, ready to drop into a text element. Use this with an x-html attribute instead of x-text.
  • event.end

    The event end date and time, as a Day.js object. Try event.end.format('LL') to get the date, or event.end.format('LT') to get the time.
  • event.image

    The event image URL - set it as the :src attribute on an <img> element to display your event image. If there is no image available, the brand emblem will display. Note that there are more size options in _original, below, if required.
  • event.link

    The URL to the event page on ChurchSuite - set it as the :href attribute on an <a> element to link to it. If an event has 'Sign up through Embed' enabled, or does not have signup enabled at all, event.link will provide a link to the event page, otherwise it will return an empty string. See our example for how we removed the link for events with no link.
  • event.location

    The event location, for example, 'Kings Hope Church'.
  • event.name

    The event name.
  • event.online

    A boolean true or false as to whether a event is online or in person - if true, the event is online.
  • event.postcode

    The event location postcode.
  • event.site

    The name of the ChurchSuite site the event belongs to.
  • event.start

    The event start date and time, as a Day.js object. Try event.start.format('LL') to get the date, or event.start.format('LT') to get the time.

Finally, there is one more key you could use, should you need more information still.

  • event._original

    This is an object containing the original JSON response. There is other information in here such as the site and other sizes of image - have a look and see, or check out our ChurchSuite JSON feeds.

ChurchSuite Calendar

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.