How to show calendar on external site using iFrame
July 10, 2014
EventON do not have an API that allow dropping a calendar on external sites. However you can do this using an iFrame approach. Please follow the steps below.
From your FTP client location the theme folder for the current theme you are using. eg. …/wp-content/themes/twentysixteen/
Once you are in the correct theme folder in your FTP client, create a new file and call it eventon-iframe.php and open this file from a text editor.
Copy the below code and paste it in the newly created PHP file. — So that the file will only have the below code nothing else.
// Include WordPress
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<meta name="viewport" content="width=device-width">
<?php wp_head(); ?>
<body <?php body_class(); ?>>
$eventon_shortcode = '[add_eventon]';
<?php wp_footer(); ?>
in the line 3 location for wp-load.php may change if you are using child theme. Or if you have moved theme folders of wordpress folders than that of default set up. In which case you have to make sure you correctly go back to correct folder. The wp-load.php file we need is in the main wordpress directory.
The eventON shortcode can be further customized to match your desired results for the calendar. You will just have to change the below line in your page code.
[code]$eventon_shortcode = ‘[add_eventon]’;[/code]
Now go to your home page and add the below text to URL that represent the correct location for that file we created above.
So your URL will look like this
Click enter and you should see eventON calendar show 100% width on this page.
If you see eventON calendar and it works great you are good to go to next step. If not, you may see some errors on the page. Try to address those and resolve those issues. Or you can start over in case you missed or didnt do a step correct.
Now go to your external site where you want to show your eventON calendar. Find the page you want to show the calendar and add the below HTML code into the page.
Make sure you are entering this into HTML side of the page and not just as text in a visual mode in wysiwig editor – which would not do anything.
[code]<iframe src=’http://www.awesome-evo-customer.com/wp-content/themes/twentysixteen/eventon-iframe.php’ height=’500px’ width=’100%’ scrolling=’yes’></iframe>[/code]
NOTE: You can use height, width values to control the size of the iframe you want to show. And EventON calendar will conform to that size. Make sure scrolling is set to yes because if calendar event is slide down it will increase calendar height.
GET MORE CREATIVE:
You can get even more creative with the iFrames by using styles in there such as the below code.
[code]<iframe src=’http://www.awesome-evo-customer.com/wp-content/themes/twentysixteen/eventon-iframe.php’ height=’500px’ width=’100%’ scrolling=’yes’ style=’border:none;background-color:#3d3d3d;padding:10px 15px’></iframe>[/code]
Once you publish that page or save changes the eventON calendar should work perfect inside an iFrame in your external website.