Embed your OLP Calendar on another website: Instructions

Embed your OLP Calendar on another website: Instructions

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

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

Here's how:

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

https://<Your OLP Domain Name Here>.ourlodgepage.com/calendar

For example:

The parent organization's calendar: https://ny.ourlodgepage.com/calendar

A region or district calendar: https://district-31-ny.ourlodgepage.com/calendar

A local group calendar: https://5-ny.ourlodgepage.com/calendar

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 OLP Domain Name Here>.ourlodgepage.com/js/fullcalendar.min.js

For example https://ny.ourlodgepage.com/fullcalendar.min.js or https://5-ny.ourlodgepage.com/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 OLP Domain Name Here>.ourlodgepage.com/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 OLP Domain Name Here> with your actual OLP Domain Name.