Display public web calendar via your website using CCB’s API

Today’s tutorial is quite simple in nature (so says he writing the tutorial). 🙂

From time to time, I’ve encounter a question about how to create a customized list of CCB calendar events.

There are a number of ways to achieve listing your church’s calendar of events on your website.

You are able to use the CCB out-of-box feature that allows for you to place the CCB Event Calendar or Calendar of Events into your external web page.

In addition, there are other services that allow this same functionality such as:

The options above may save you time should you want a generic or bland view of the calendar events.

But what if you wanted to customize and brand your events calendar to look and feel much like your website?

Instead of the traditional calendar view, let’s say you wanted to display events in a list with their respective dates and the event name or registration link to an event.

Well, that’s what I hope to help you solve in today’s tutorial about utilizing the CCB Calendar of Events.

So, let’s get started.

What events information am I able to access and share via the CCB API?

This is probably the best place to start before you venture down the path of creating your customized calendar of events.

Using the CCB API to access the public_calendar_listing web service, you’re able to access the following attributes about events:

  • date – the event date (datetime format of YYYY-MM-DD)
  • event_name – the event name
  • event ccb_id – the event id
  • event_description – the event description
  • start_time – the event start time (00:00:00 military format)
  • end_time – the event end time (00:00:00 military format)
  • event_duration – the event duration in minutes
  • location – the event location
  • group_name – the group name associated with event
  • group ccb_id – the group id associated with event
  • group_type – the type of group
  • grouping_name – the designated group name to be shown
  • leader_name – the leader name
  • leader ccb_id = the leader id
  • leader_phone = the leader phone number
  • leader_email = the leader email address

If you desire additional event information, then you’ll have to use the event id and pass it to the event_profile web service.

If the event has a registration form that you’re wanting to post a link to, then simply append the event’s id or place the correct form link with the appropriate form id attached.

https://mosaicchurchaustin.ccbchurch.com/form_response.php?id=FormIDHere

Time to get started coding…

To begin this tutorial, open the text editor of your choice, and name and save the file whatever you would like.

For this example, I’m naming my file public-calendar.php.

As we’ve performed in previous tutorials, include the necessary comments and file inclusions in this file.

Using the Church Community Builder’s API documentation, find the public_calendar_listing web service.

This will be the service we’ll use to retrieve a list of calendar events.

I won’t dive into all the details.  Review the initial tutorials for further explanation.

Using the PHP code below, set the following variables and their respective values:

  • apiService – set this tutorial to use the public_calendar_listing.
  • dateStart – Set the date in which the oldest event should be visible (YYYY-MM-DD).
  • dateEnd – Set the date in which the newest event should be visible (YYYY-MM-DD).

Don’t forget to set and bind the urlData variable’s array value with the correct labels and variable values respectively.

As for the the XPATH Query expression, you’ll want to use the following: //items/item.

Afterwards, all you have to do is identify the necessary event elements you’re wanting to display.

Embed those elements within HTML and CSS, and you’re ready to save your file and view it via a web browser (see example below).

Church Community Builder Public Web Calendar using CCB's API

One last thought…

If you don’t use one of the services mentioned at the beginning of this tutorial and choose to use this tutorial’s method for displaying calendar events, then you’re likely wondering how to include this code into your WordPress website or an external page.

If you’re using WordPress, then you can use the Insert PHP plugin or create your own WordPress plugin.

It’s time to test this puppy…

That’s it for today’s tutorial. The code is below in it’s entirety. Save your file and execute it via a web browser.

I’ll see you back here next week with a tutorial that you’ll certainly find great value in.

 


Please comment if this tutorial has helped you.