Calendar Embed Options
In this article, we will cover the options for integrating your calendar into your website.
In this Article:
Embed Website
My Church Events includes an iframe-based embedding system. An iframe creates a window within your website to open another webpage. An iframe can be used to load your My Church Events calendar within your own website.
Navigate to the "Embed Website" shortcut from the Dashboard. Once there, you can use the configurator to select your iframe options for your calendar view.
The "Display Options" dialog box, shown above, allows you to select the interest groups you would like to display, as well as if you would like the header to show. Once you have selected those options use the "Copy" button at the end of the iFrame URL at the top of the page.
Example:
<iframe src="https://s/www.mychurchevents.com/calendar/73905413?showCalendarHeader=false" frameborder="0" style="border:none; width:100%; height:850px;"></iframe>
Once you have copied the link you can add it to your website. iFrames need a width and height set. We strongly recommended setting the width to 100%, so the Calendar fills the space available for it on the webpage. A pixel height must be set. Our default is 850px but you may find a better height using alternative values.
If you want to embed a list view of events, then use our
website plug-in widget.
The Issues with the iFrame
Due to the nature of the iFrame, there are two issues that can cause some frustration when trying to embed the calendars.
1. They rarely fit perfectly and will create scrollbars in most cases. Since we have to define the pixel height of an iframe and your calendar will events may vary your iframe will mostly be too big or too small for the iframe window. This means either your user will have to scroll or have a lot of white space around the calendar.
2. The style of the calendar probably won't match the style of your website. Since an iframe is just creating a window for the calendar to load, the styles, colors, typography, and spacing will be off and may look out of place on your website.
If you're looking for a perfect website match, investigate our iFrame alternatives below.
Tips and tricks for iFrames
Use conditional logic for mobile vs. desktop views.
Many website builders offer an option to show content based on the device that is loading the site. Consider creating a calendar grid view for desktop viewers and list view for mobile users.
iframe Parameters
Add a Border:
If you add the code style="border:2px solid black;" in place of the "border:0;" in the iframe code, you can create a border around the outside of your calendar. You can adjust the px size and color to suit your website
Example:
<iframe src="https://firstanychurch.view-events.com/calendar/2259678/list/week" title="First Any Church Calendar" width="100%" height=1600" style="border:2px solid black;"></iframe>
Remove scroll bars:
You can add the code scrolling="no" to your iframe and it will not load scroll bars. This can create a really integrated look. Be warned, if you use this code on your iframe and there is a busy month, part of the data will be cut off.
Example:
<iframe src="https://firstanychurch.view-events.com/calendar/2259678/list/day" style="border:none;" title="First Any Church Calendar" width="100%" height="600" scrolling="no"></iframe>
Alternatives
If you want to natively load your calendar into your website, then MyChurchEvents offers the iCal feed.
iCal Feed:
The iCal feed is our recommended method for emending your calendar. This eliminates all of the issues with iframes because your website will read the iCal events and then generate the code to embed your calendar nativity into the website.
You can find the iCal feed details at the top of the calendar view, look for the megaphone icon. There you can customize the parameters of the iCal feed and generate a custom feed URL. Depending on the platform your site is built on there may be multiple options for adding an iCal feed into your website. If your website is built on WordPress you can use this free plugin (no affiliation)
https://wordpress.org/plugins/ics-calendar/