How to add the Event Calendar to Any Web Page

Once Summit Events is installed many organizations want to display their event calendar on their website so the public can see the events they are offering. Here is an example of what the event calendar looks like on a web page - you can accomplish the same thing by following the instructions below.

Salesforce Administrator Steps:

1. Create a CORS record in Salesforce. This allows the calendar code running in the web browser to communicate with Salesforce on your web domain.

• Go to Setup -> Security ->CORS
• Click “New”
• Enter the "Original URL Pattern" value for your domain - for example "https://*.crown.edu"

2. Get the "Feed URL" for your Salesforce org. You can get the Feed URL by going to any Summit Events record and looking at the "Event Instance Feed URL" field. Select everything before the "?" field (so in the example below the Feed URL is http://crown.force.com/services/apexrest/summit/summiteventsfeed)

3. Send the Feed URL and a link to this instruction page to the person who edits your web pages, as they will need this information to complete their setup steps.

Web Page Editor Steps:

1. Open your web page you want to add the Summit Events calendar to in a web editing tool

2. Open the Summit Events calendar page code.

3. You will be copying 4 sections of code from the Summit Events calendar page code into your web page:

a) Lines 15-29 of the code include the Styles and Scripts that make the calendar

• We recommend this code be added to the head of your web page

b) Lines 42-44 of the code provide the functionality to Select an Audience on the calendar

• This code can go anyplace on the page after the the section above

c) Lines 50-54 of the code provide a 'hook' for Javascript to build the calendar on your web page

• Place this code where you want the calendar to display on your web page (and after the code section above)

d) Lines 58-304 of the code provide the styles and Javascript that connect the Summit Events information in your Salesforce org to the calendar

• Place this code on your web page after the code section above

• Replace the {!feedURL} on line 116 with the Summit Events "Feed URL" value that your Salesforce Administrator sent to you (see step #2 in the Salesforce Administrator section above for details).

• Make sure you place the Feed URL between the single quotes and remove the brackets.

Optional Settings:

• You can now hide the Calendar until the Audience value is selected - change the "hideCalendarUntilAudience" value to True on line 120 of the code
• You can now hide the 'Instance Title' field from displaying for events on the calendar. Change the "hideInstanceTitle" value to True on line 121 of the code.

4. Save and publish your web page after completing the steps listed above, and view to verify the page is now displaying your Summit Events calendar and any events you have created in Summit Events.

---

Summit Events uses the "Full Calendar" tool (https://fullcalendar.io/), the most popular full-sized JavaScript Calendar, to display event feeds on web pages. Full Calendar is open-source and developer friendly, which provides organizations the ability to customize how their events are viewed - the view of event calendars, filtering events that display on the calendar, even viewing events in formats other than a calendar! (see the "event cards" example at https://business.stthomas.edu/)