Joomla! Community, help and support.
https://sandbox-forum.joomla.org/
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?
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>
We just added the Google generated code to a new module.
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.guysmiley wrote: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...
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>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);
}
lamad wrote:Just curious, why was Google Calendar chosen over Jevents or another native Joomla component?
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. 
jomaco1 wrote:Maybe it would help if we could see it.
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>jomaco1 wrote: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?
