Embeding Google Calendar (version 2.4.5)

Started by kebintn, October 10, 2013, 09:41:14 PM

Previous topic - Next topic

kebintn

I am a newbie who agreed to set up my first forum for a youth sports team.
The coaches use Goggle Calendar so they can sync multiple calendars which makes their life easy, and want it in our new forum.

I have SMF 2.4.5 and I believe I'm also on the latest and greatest versions of MySQL and PHP.  I can check those versions if needed.  The theme is "Pure" (no user themes allowed) and I installed the security mod "Bad Behavior."
PHP is new to me but I think I can manage to tweak a template file with some instruction. Ideally I'd like to edit the calendar template and have it appear on the SMF calendar menu tab.

Starting with something I understood I tried to just embed it in a topic using HTML that works in a web page. But not in a SMF post.
I tried bracketing with allowable "advanced" tags i.e. <code>*</code> but that failed.

I found a related post in this forum for SMF 1.x.  That had a tweaked index.template.php which was attempting to do it in a popup which I don't really want.
Below is what seemed to me the pertinent bit of that file. 
Is this what I need for our version, and if so exactly where do I put it? And does the src string above simply replace the href?

===============================
// The [calendar]!
   if ($context['allow_calendar'])
      echo ($current_action=='calendar' || $context['browser']['is_ie4']) ? '' : '' , '
      <li class="' , $current_action == 'calendar' ? 'current' : '' , '"><a href="http *breaklink* :[url="//www.google.com/calendar/embed?src=ttu92ro3r27ck3dpv4m9t3qq3o%40group.calendar.google.com&ctz=America/Los_Angeles";onclick="window.open('%5Chttp://www.google.com/calendar/embed?src=ttu92ro3r27ck3dpv4m9t3qq3o%40group.calendar.google.com&ctz=America/Los_Angeles'%5C,'%5Cpopup'%5C,'%5Cwidth=600,height=700,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0'%5C"]//www.google.com/calendar/embed?src=ttu92ro3r27ck3dpv4m9t3qq3o%40group.calendar.google.com&ctz=America/Los_Angeles";onclick="window.open('\http://www.google.com/calendar/embed?src=ttu92ro3r27ck3dpv4m9t3qq3o%40group.calendar.google.com&ctz=America/Los_Angeles'\,'\popup'\,'\width=600,height=700,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0'\[/url]); return false">CALENDAR</a></li>';
===============================

Thanks in advance.

margarett

From that piece of code, it should work with small changes (as a popup). But I have absolutely no idea how Google Calendar works :P
Anyway, it will not be an "embbedable" :P code...

If you can find some code to embbed the calendar to a web page, we can help you to add that to SMF ;) This:
I tried to just embed it in a topic using HTML that works in a web page. But not in a SMF post.
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

kebintn

#2
To try and display the calendar in a topic I used the code in the attached text file.  It uses an inline frame which works to embed one web page inside another web page.  I also tried replacing the <iframe> tags with <embed> which also works in a web page, but I can't get it to display in a forum topic.  I bracketed my html between "code" "/code" (square brackets replaced with quotes) but it simply displays the html as text.  I tried replacing the pointy bracket tags in my html with square brackets but that also fails.
Thanks for the assistance.

kebintn

But again, what I would really like to do is edit the file Calendar.php in the sources folder to simply display the google calendar via the SMF menu.  Naturally I realize that it wouldn't integrate with topic events, birthdays from the forum user profile, etc. 

If that just isn't possible then the in-topic solution will do.  And actually, there are some additional google documents the coaches have been using to track the player's quota points which I will embed in sticky topics once I learn the trick.

Many thanks

margarett

I suggest you to open your index.template.php and find:
// Custom banners and shoutboxes should be placed here, before the linktree.
Add after:


echo '
<div style="align:center;">
<iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;height=500&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=nashvillejrd%40gmail.com&amp;color=%23A32929&amp;src=en.usa%23holiday%40group.v.calendar.google.com&amp;color=%232952A3&amp;ctz=America%2FChicago" style="border-width:0" width="630" height="500" frameborder="0" scrolling="no"></iframe>
</div>';

This should bring your iframe inside, below your menu.

Quote from: kebintn on October 14, 2013, 03:29:36 AM
But again, what I would really like to do is edit the file Calendar.php in the sources folder to simply display the google calendar via the SMF menu.
Well, there was this:
http://custom.simplemachines.org/mods/index.php?mod=2598
But it was for version 1.1.x and there is nothing in sight for 2.0...
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

kebintn

QuoteThis should bring your iframe inside, below your menu.

Pretty slick.  I followed the instruction and it inserts the calendar between the main menu and the message boards.  But I don't want to place it on the main index page. 
Is there a way to do the exact same, except make it visible on the calendar page only, with Google calendar above the SMF calendar? 

Otherwise, can you help me to just display it embedded inside a Topic?

Many thanks

margarett

But of course, just put that same code in Display.template.php, just after:

global $context, $settings, $options, $txt, $scripturl, $modSettings;


That woud put it in topic display. I have *never* used SMF's Calendar, so I have no idea how the page looks :P
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

kebintn

Quote from: margarett on October 15, 2013, 05:07:24 PM
But of course, just put that same code in Display.template.php, just after:

global $context, $settings, $options, $txt, $scripturl, $modSettings;


That woud put it in topic display. I have *never* used SMF's Calendar, so I have no idea how the page looks :P

That did put it in topic display, but rather than having it in a sticky topic, that put it at the top of EVERY topic on the forum.  Not really what I'd had in mind.  LOL
But learning from your example, I examined the calendar.template.php and found the exact same string (global ~ modSettings;) there.  Placing my code behind that worked perfectly, placing our google calendar at the top above the forum calendar.
That is perfect for my calendar.

But if I might follow up with one more question on this thread, can you tell me how to embed any similar web document (i.e. a google document) into a post? (inside a single topic, rather than display on every topic)
In attempting to post the calendar I tried using the SMF "Insert Code" tool to bracket my html as shown below.

<embed src="https://www. *break link* google.com/calendar/embed?showTitle=0&amp;height=500&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=nashvillejrd%40gmail.com&amp;color=%23A32929&amp;src=en.usa%23holiday%40group.v.calendar.google.com&amp;color=%232952A3&amp;ctz=America%2FChicago" style=" border-width:0 " width="630" height="500" frameborder="0" scrolling="no"></iframe>


margarett

Nicely done ;)

The "embed" HTML tag is meant to embed media content in a page.
The "iframe" tag creates a kind of "page-inside-page" mechanism that allows you to insert just that: a page inside another page.

If that works better or worse, it depends mostly on the page you're trying to insert...
From the code you posted, there is a malformed link because of that break link think. Just put in an iframe and test ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

kebintn

I added the break-link thing because previously I got an error posting here that said "Links not allowed."  Perhaps because I have so few posts?

Anyway, I have tried the iframe with no success.  It must be something dumb and really simple I'm doing wrong.  I attached an image of the post before and after submitting.

margarett

I don't know if you can put an iframe inside a post. It's not part of the supported HTML:
Administration Center » Posts and Topics » Bulletin Board Code » Enable basic HTML in posts
Quote
This will allow the posting of some basic HTML tags:
    <b>, <u>, <i>, <s>, <em>, <ins>, <del>
    <a href="">
    <img src="" alt="" />
    <br />, <hr />
    <pre>, <blockquote>
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Arantor

Allowing people to randomly put iframes into a page is a very dangerous idea.

Admins can use the html bbcode to add raw code. Regular users don't have that option for security reasons.

kebintn

QuoteAdmins can use the html bbcode to add raw code. Regular users don't have that option for security reasons.

THAT'S IT... thanks for the hint...!  I am the admin of our forum, and replacing the "code" tag with the "html" tag works perfectly to add an iframe.  I guessed it would be something simple.  I don't see anything in the online manual regarding bbcode and special permissions of the admin, if it's there and you can point it out I'd appreciate it, I'm trying to learn all I can.  I can see how allowing regular users on large forum to insert web pages could result in a lot of eyesores. 

I currently allow our team members to use all available tags including flash, which I notice the manual warns may pose a security risk.  Is this something I should be concerned about?  I wanted to allow it for embedding youtubes of our games but if embedding from another possibly infected or malicious site has potential to corrupt the database or something, then I might think better of it.  We do require admin approval of new members on this forum (a sports league message board) so I don't anticipate intentional malicious hacking by members.

Thank you both so much for all the assistance.

Arantor

No, it's not in the manual.

But here's the thing... it's not just about inserting 'web pages'. Adding raw HTML allows raw JavaScript which can be used in exciting ways like stealing your cookies and allowing them to steal your account.

Ditto, incidentally, for Flash which is why it's disabled by default.

If you're interested in embedding YouTube videos, there are multiple solutions that don't require using the Flash bbcode and make it easier to use by just posting the link to the video.

Illori


kebintn

Quote from: Arantor on October 18, 2013, 07:16:10 PM

Ditto, incidentally, for Flash which is why it's disabled by default.

I think I'll disable flash, nobody has tried to use it yet anyway.


Quote from: Illori on October 18, 2013, 07:41:40 PM

there is http://wiki.simplemachines.org/smf/HTML but it does not note the admin only permission

Based on your previous post I searched the online manual for the word "raw" and found that exact page on HTML, and it helped clarify your post.

Many thanks for all the help...!

crimpson

Answer:
Here's how I embedded extra calendars on the main smf calendar page.
The file you want to edit is /themes/default/calendar.template.php (unless the theme you are using has its own calendar.template.php)

It'll be somewhere in the top 100 lines. Here's your code:

<div style="align:center;">
<iframe width="100%" height="800" src="http://www.link-to-the-calendar-you-want-to-use.com" scrolling="no" frameborder="0"></iframe>
</div>


if you want it above the smf calendar, insert the code directly after the first "echo", like this:

// The main calendar - January, for example.
function template_main()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings;

echo '

<div style="align:center;">
<iframe width="100%" height="800" src="http://www.link-to-the-calendar-you-want-to-use.com" frameborder="0"></iframe>
</div>

<div style="align:center;">
<iframe width="100%" height="900" src="http://link-to-the-calendar-you-want-to-use.com" scrolling="no" frameborder="0"></iframe>
</div>

<div id="calendar">
<div id="month_grid">
', template_show_month_grid('prev'), '
', template_show_month_grid('current'), '
', template_show_month_grid('next'), '
</div>


If you want your calendar to be after the smf calendar, insert your code after the 7th echo, looks like this:

<div style="align:center;">
<iframe width="100%" height="800" src="http://www.link-to-the-calendar-you-want-to-use.com" scrolling="no" frameborder="0"></iframe>
</div>



</div>';
}

// Template for posting a calendar event.
function template_event_post()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings;

// Start the javascript for drop down boxes...


crimpson

So I added three different local calendars directly underneath the SMF calendar. It looks good.
Here's my site if you want to peak at it http://www.trinitycountycommunity.com/forum/index.php?action=calendar

Here's the coding I used. Starting at line 63 on calendar.template.php (see previous post)
I give you a few lines above and below so you can see how I inserted it.

echo '
</form>
<br class="clear" />
</div>


<div style="align: center; height: 600px; border: solid 2px #555;">
<iframe width="100%" height="600" src="http://www.localendar.com/public/gregcal" frameborder="0"></iframe>
</div><br/><br/>


<div style="align: center; width: 100%; height: 500px; overflow: hidden; border: solid 2px #555; ">
<div style="align: center; height: 800px; overflow: hidden; margin-top: -280px; ">
<iframe height="1150px" width="100%" src="http://trinitycounty.com/calendar#ai1ec-calendar" frameborder="0"></iframe>
</div> </div> <br/><br/>


<div style="align: center; width: 100%; height: 750px; border: solid 2px #555; ">
<p style="text-align: center;"><a href="http://www.trinitycounty.org/index.aspx?page=22#ctl00_TableDiv2">Direct Link </a></p>
<iframe width="100%" height="750px" src="http://www.trinitycounty.org/index.aspx?page=22#ctl00_TableDiv2" scrolling="no" frameborder="0"> </iframe>
</div> <br/><br/>
<br/><br/>



</div>';
}

// Template for posting a calendar event.

Irisado

Thanks for the information.  As this topic is four years old and is marked as solved though, I'm locking it.  Please feel free to post similar information in the Tips and Tricks board or to start a new topic in this board in the future, rather than to revive such an old topic.
Soñando con una playa donde brilla el sol, un arco iris ilumina el cielo, y el mar espejea iridescentemente

Advertisement: