Embed your Groupable|Connect Calendar on another website: Instructions

Embed your OLP Calendar on another website: Instructions

Embed your Group's Groupable|Connect Calendar on a separate website - don't maintain multiple calendars!

You can embed your entire Parent Organization Calendar, an individual district, or your local group's calendar. 

Here's how:

For the Groupable|Connect websites, we use a Javascript calendar called fullcalendar. You can see it here:

https://<Your Groupable|Connect Domain Name Here>/calendar

For example:

The parent organization's calendar: https://ny.moriapp.com/connect/connect_groups/c925741b61d63cbc6f2025a4c56969f6/calendars 

A region or district calendar: https://ny.moriapp.com/connect/connect_groups/19f1a077a2b09a33af44a8b1e704c86d/calendars 

A local group calendar: https://ny.moriapp.com/connect/connect_groups/1b30f78ec3373ee1c51e56333171cf66/calendars 

To embed this calendar on your site, do the following (note jquery is required):

1. Place this empty div where you want it to appear:

<div class='calendar'></div>

2. Download the version of fullcalendar.min.js we are using from here:

https://<Your Groupable|Connect Domain Name Here>/js/fullcalendar.min.js

For example https://ny.moriapp.com/connect/connect_groups/1b30f78ec3373ee1c51e56333171cf66/fullcalendar.min.js

3. Include this script in the page, which customizes full calendar and tells it where to get the data (you may need to convert the $'s to "jQuery" as it appears your site has it aliased: 

$(document).ready(function() {
  $('.calendar').fullCalendar({
    defaultView: 'list',
    header: {
      left: 'prev, next',
      center: 'title',
      right: 'today, list, month'
    },
    views: {
      list: {
        duration: { days: 90 },
        listDayAltFormat: 'dddd'
      }
    },
    events: 'https://<Your Groupable|Connect Domain Name Here>/event_feed',
    timezone: false,
    eventRender: function(event, element) {
      if ($('.calendar').fullCalendar('getView').name === 'listYear') {
        title = element.find(".fc-list-item-title");
        title.append("<br />" + event.description);
      }
    }
  });
});

Be sure to replace the generic <Your Groupable|Connect Domain Name Here> with your actual Groupable|Connect Domain Name.