Embedding Events Around the Field Calendar Instructions

Thank you for your interest in adding the Events Around the Field Calendar to your website. If you have any questions, please do not hesitate to contact Stacey Moore.

Full Calendar

To embed the full calendar view with the list view, copy and paste this code into the HTML source of the webpage you would like the calendar on:

<iframe frameborder="0" height="10000px" scrolling="no" src="https://www.cof.org/calendar/cal.php" style="overflow-x:hidden;" width="100%"></iframe>

List View

To embed only the list view of the calendar, copy and paste this code into the HTML source of the webpage you would like the calendar on:

<iframe frameborder="0" height="10000px" scrolling="no" src="https://www.cof.org/calendar/cal.php?listview=1" style="overflow-x:hidden;" width="100%"></iframe>

Customizing the Calendar

Currently, there are two customization options for the calendar. You have the ability to change the link color and the header color in the list view by adding query strings to the embed URL.

Link Color

To change the color of the links in the list view, add ?linkColor=[hex color code] to the end of the embed URL. For example, if you would like to change your link color to green, your embed URL would look like this: https://www.cof.org/calendar/cal.php?linkColor=00FF00.

Header Color

To change the color of the header in the list view, add ?h3=[hex color code] to the end of the embed URL. For example, if you would like to change your header color to green, your embed URL would look like this: https://www.cof.org/calendar/cal.php?h3=00FF00.

Both Options

To change the both the color of links and the color of the header in the list view, add ?linkColor=[hex color code]&h3=[hex color code] to the end of the embed URL. For example, if you would like to change both your link color and your header color to green, your embed URL would look like this: https://www.cof.org/calendar/cal.php?linkcolor=00FF00&h3=00FF00.

Questions?

Connect with Council Staff