Google Calendar on Joomla Front Page

[garys314]

What extension is used to publish google calendar on the joomla.com front page?

Thanks in Advance,

Gary

[brian]

is it this
http://extensions.joomla.org/component/ ... Itemid,35/

[jomaco1]

is it this
http://extensions.joomla.org/component/ ... Itemid,35/

No, I checked that one out and it creates a list of events. I, too, would like to show a mini google calendar like the one on the Joomla! home page...can you guys let us know where to get it?

[jlkettwig]

I would also very much like to get it working. Looks very good!! Please let us know!

[jomaco1]

After posting, I went and had a look at the code. I'm not sure if there is an actual module where you can input the parameters for the calendar, but I was able to achieve the same results by pasting the iframe code into a new module.

This is the code:

Code: Select all

<iframe
src="http://www.google.com/calendar/embed?src=calendar%40joomla.org&chrome=NONE&epr=1&height=557"
style=" border-width:0 " width="200" frameborder="0" height="290"></iframe>

Just change the url to the calendar you want to display.

(replace this part: http://www.google.com/calendar/embed?sr ... joomla.org)

[brad]

^ Mark is correct We just added the Google generated code to a new module.

[jlkettwig]

Thanks a lot! I'll give it a try later today.

[guysmiley]

In case anyone else stumbles over this...  I went to insert the iframe code using the HTML button on the editor in my new module and completely forgot about the fact that you can only insert this code when all wysiwyg editors are disabled (via Global Config).

Must be my head 

Anywho, hopefully this saves someone else a few minutes...

[jomaco1]

In case anyone else stumbles over this...  I went to insert the iframe code using the HTML button on the editor in my new module and completely forgot about the fact that you can only insert this code when all wysiwyg editors are disabled (via Global Config).

Must be my head 

Anywho, hopefully this saves someone else a few minutes...

Slightly OT...but an easy way to drop something like this into a content item is to first add it to a new custom module and insert it using the {mosmodule} plugin.

Since Joomla! allows users to select their editor of choice, I always set up a second user account so I can have one with the editor and one without.

I will often create a new module position called "no editor" where I place modules containing code that must not be opened in an editor. Using {mosmodule} all you need to do is add the name of the module and it will be included in content regardless of the position it is assigned to or whether or not it is published.

This makes it pretty easy to set up a calendar module using the iframe and plugging it into any page you want. You can also publish it and assign it to a live module position if you prefer.

[jlkettwig]

Thanks a lot for the tips! I've been working with Joomla for quite some time now, but there is always something new to learn. Good idea! Thanks for sharing.

[fire2006]

Hi there, I too wanted my google agenda published on my front page, but I was unhappy with the fonts etc - that google generates for you - ... anyhow, after a bit of searching, i found that someone made a json solution...

I took their code, modified the formating, pasted it into a custom mod_html module, and then uploaded the .js file they made -

screwed around with my google calendar url a bit, and voila!  got my google events PULLED onto my homepage!

here is the script for the mod_html module: (replace my google calendar URL with yours)

Code: Select all

<script type="text/javascript" language="javascript">
<!---
var gCalFeed = '[b]http://www.google.com/calendar/feeds/[email protected][/b]/public/full';
var maxResults = 3;
var is24Hour = false;
-->
</script>
<script type="text/javascript" language="javascript" src="/javascript/gcaljson.js"></script>
<a href="http://www.google.com/calendar/render?cid=http%3A%2F%2Fwww.google.com%2Fcalendar%2Ffeeds%2Fenglishvillage.secondlife%2540gmail.com%2Fpublic%2Fbasic" target="_blank"><img src="http://www.google.com/calendar/images/ext/gc_button2.gif" border=0></a>

Here is the script you must upload to your server

Code: Select all

/**
gCalJSON
Copyright 2006 Mark Percival -  SquarePush, LLC
[email protected]
Released under GPL
A JSON implementation of gCalAjax.
**/


var today = new Date();
var startDate = today.getFullYear() + '-';
startDate += (today.getMonth()+1 < 10) ? '0'+(today.getMonth()+1) : today.getMonth()+1; 
startDate += '-';
startDate += (today.getDate() < 10) ? '0'+today.getDate() : today.getDate(); 

gCalFeed += '?alt=json-in-script&callback=jsonhandler&singleevents=true&orderby=starttime&sortorder=a';
gCalFeed += '&start-min='+startDate;
gCalFeed += '&max-results=' + maxResults;

RSSRequest(gCalFeed);


function RSSRequest(url) {
document.write("<script type='text/javascript' language='javascript' src='");
document.write(gCalFeed);
document.write("'></script>");
}

function jsonhandler(response) {
   var feed = response.feed;
   var outputHTML = "<ul>";
   var itemTimePrev = new Date();
   itemTimePrev.setTime(0);
   
   if(feed.entry) { 
      for (var i = 0 ; i < feed.entry.length; i++) {
         var entry = feed.entry[i];
         var itemTitle = entry['title'].$t;
        var itemLink = entry['link'][0].href;
        var itemTimeRaw = entry['gd$when'][0].startTime;
        // What I added - Mark
        // *****
        var itemLocation = entry['gd$where'][0].valueString;
        var itemDescr = entry['content'].$t;
        // *****
        var isAllDay = false; //init isAllDay variable
         if (itemTimeRaw.length <= 10) isAllDay = true; //just the date is only 10 digits = all day event
         var itemTime = new Date();
         itemTime.setTime (Date.UTC(itemTimeRaw.substr(0,4),(itemTimeRaw.substr(5,2)-1),itemTimeRaw.substr(8,2),itemTimeRaw.substr(11,2),itemTimeRaw.substr(14,2)));
         if ((itemTime.getUTCDate()!=itemTimePrev.getUTCDate())||(itemTime.getUTCMonth()!=itemTimePrev.getUTCMonth()))
           outputHTML += '<li>' + getMonthName(itemTime)+ ' ' + itemTime.getUTCDate() + '';
                       
         outputHTML += ' '; 
         if (!isAllDay) outputHTML += getTimeFormatted(itemTime) + ' - ';     
        //And here as well, I added the location and description to the list item.
         outputHTML += ' <a href="' + itemLink + '"></li><ul><li>' + itemTitle + '</li></ul></a>';
         itemTimePrev.setTime(itemTime); //Save the last timestamp for next iteration comparison     
       }
   outputHTML += "</ul>";
   setHTML("gcalajax", outputHTML);
   setHTML("status", "");
   }
   else {setHTML("status", "No future events.");}
}

/*
* Time Format - Month
*/
function getMonthName(dateObject) {
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");
    return(m_names[dateObject.getUTCMonth()]);
}

/*
* Time Format - Hour
*/
function getTimeFormatted(dateObject) {
    var hours = dateObject.getUTCHours();
    var minutes = dateObject.getUTCMinutes();
    var formattedTime = null;
    if (is24Hour) {
        if (minutes < 10){minutes = "0" + minutes;}
        formattedTime = hours + ':' + minutes;
        return (formattedTime);
    }
    else {
        var ampm = "AM";
        if (hours > 12){
            hours = hours - 12;
            ampm = "PM";}
        if (hours == 12){ampm = 'PM';}
        if (hours == 0) {hours = 12;}
        if (minutes < 10){minutes = "0" + minutes;}
        formattedTime = hours + ':' + minutes + ' ' + ampm;
      return (formattedTime);
    }
}

function setHTML(div, data)
{
   document.write(data);
}   

and here is the origional link i found: http://webchicanery.com/2006/12/26/gcal ... e-in-code/


now, if anyone would like to help me put this in a scrolling custom module - id muchly appreciate it!!!

VERY COOL!!! WE CAN HAVE google events, in our OWN custom modules now... formated AS WE like them....!!

Cheers

[Jonah]

Just curious, why was Google Calendar chosen over Jevents or another native Joomla component?

[fire2006]

I never excperimented with those others you mentionedi  but what I really like about google calendar - is the fact that
-I can share it with anyone
- put events in it - and have them displayed in others timezones on their calendar home
- mix multiple calendars together on my personal google calendar page
- have discussions about the events

pretty nice work by google

[brad]

Just curious, why was Google Calendar chosen over Jevents or another native Joomla component?

See above, that just above covers all the reasons

[Muller]

Hi.

Quite useful feature this one Anyway, I have managed to show it on frontpage, though the format is not the same as the one Joomla.org, there is one difference and problem: cells for different days show themselves too much high respecting the width, I mean, their height is may be 4 or 5 times the width for the calendar.

I have copied the Joomla.org format, tried to alter the height parameters but  nothing is working. Calendar shows a verical scroll bar.

Any help? I would just like to have a square calendar and not a rectangular one.

Thank you!!

[Muller]

Sorry to ask again, but nobody has any clue about it please? 

Thanks.

[jomaco1]

Maybe it would help if we could see it. 

[Muller]

Maybe it would help if we could see it. 

Hi again.

You are absolutely right. I thought description was ok but of course a single image wil clarify it. Thank you in advance

The calendar is showing these high cells and I would really like to show it the way Joomla.org does. Code does not give me a clue. As I told you, height parameter seems to do nothing.

[jomaco1]

Are you using this code...only with your own calendar?

Code: Select all

<iframe
src="http://www.google.com/calendar/embed?src=calendar%40joomla.org&chrome=NONE&epr=1&height=557"
style=" border-width:0 " width="200" frameborder="0" height="290"></iframe>

Did you paste this into a module?

If not exactly the same...can you paste here the code you used?

[Muller]

Are you using this code...only with your own calendar?

Code: Select all

<iframe
src="http://www.google.com/calendar/embed?src=calendar%40joomla.org&chrome=NONE&epr=1&height=557"
style=" border-width:0 " width="200" frameborder="0" height="290"></iframe>

Did you paste this into a module?

If not exactly the same...can you paste here the code you used?

Hi.

Thanks a lot. You knew it was the code and I knew it too, but its funny, I tried before the original code and did not work. I got an error, and now I know it was because of just leaving "calendar"where it should not be anything.

Sometimes somebody has to make you remember the basics

Thanks again

[suncook02]

Can you get a calendar on one of the content items page? I'm a rookie at Joomla!. I need to become fluent kind of fast.