1

I'm working on creating a community events calendar for a local website I run, and I'm considering using an embedded Google Calendar to power it. I plan to have several different "calendars" within the Google Calendar (i.e. Music, Kids, etc.). However, I'd like people viewing the calendar embedded on my site to be able to toggle those different calendars on and off to fit their interests. I don't mind if they have to re-toggle their preferred calendars on each visit - it doesn't need to remember their preferences. However, I would like the option to make some calendars always visible, and now allow them to be toggled off.

Does such functionality for Google Calendar exist?

Edit: Ideally, I'd like to have a checkbox for each calendar, with them all checked by default, so that multiple calendars are viewable together, rather than just one at a time. Obviously that's just my ideal situation - I'm open to other solutions/suggestions.

Edit the 2nd: Incredibly, not 30 minutes after creating the bounty for this question, I noticed that there is an option when generating the embed code (using Google's "Google Embeddable Calendar Helper") to show/hide "Calendar List". This creates a drop-down of all the different calendars and allows toggling them on-off.

This takes care of most of the desired functionality, but does not allow me to set one calendar to always be displayed (i.e. not allow it to be turned off). Any suggestions for that?

Improve this question

4 Answers 4

Reset to default
2

You could do something like this:

<html>
<body>

<a href="#" onMouseDown="changeToCal1()">Calendar 1</a> 
<a href="#" onMouseDown="changeToCal2()">Calendar 2</a> 

<iframe id="cal" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

<script type="text/javascript">
function changeToCal1()
{
    document.getElementById('cal').src = "http://www.google.com/calendar/embed?src=mycal1url%40gmail.com&ctz=America/New_York";
}

function changeToCal2()
{
    document.getElementById('cal').src = "http://www.google.com/calendar/embed?src=mycal2url&ctz=America/New_York";
}
</script>


</body>
</html>

Clicking the links will change the source of the iframe, so you could just create links for a few of your calendars, using the Google Calendar embedded links as the src value.

Improve this answer
4
  • Interesting. I tried that, but ran into a couple of problems. First, it ends up just showing a blank calendar when I click either of the links. If I "pre-load", so to speak, the iframe with the same src url that I put in the js function, it displays the correct calendar (with the correct title), but upon clicking the link (which should in theory display what is already being displayed), it shows instead a blank calendar with "Google Calendar" as the title. Any ideas? The other issue is that with this method users could only see one calendar at a time. Any way to combine multiples?
    – Travis Northcutt
    Oct 21, 2010 at 19:23
  • Hmmm. It should work if the scr values are correct. I quickly wrote this when I saw your question and got it to work. The only thing I changed before posting were my calendar links. Did you make sure that you had the correct embedded calendar link? Also, make sure that the link isn't the entire link that Google provides (which includes its own iframe stuff). My only other guess would be that the javascript function names are incorrect (in either the script or the mousedown event). Or the browser has javascript disabled.
    – user5821
    Oct 21, 2010 at 19:43
  • I did check the src link, by copy/pasting it to the iframe code and checking that it displayed the right calendar. I'll check the other stuff, though. What you posted makes sense, so I should be able to get it functioning. Any ideas on how to display mult. calendars at once? I suppose I could hack that by creating embed code for different combinations of calendars, but that's pretty cludgy and not user friendly, really.
    – Travis Northcutt
    Oct 21, 2010 at 21:32
  • Sorry. Couldn't find any way to embed a single calendar container that contains events from multiple calendars. I agree that it should be an option. Good luck.
    – user5821
    Oct 22, 2010 at 0:02
0

Ok. Here's what you can do: Take my answer (and sample javascript) above and modify the .src values once you have done the following:

  • go into your google calendar settings and identify the textbox that contains the embedded calendar iframe text.
  • right above that, click the "Customize the color, size, and other options" link.
  • here, you can select combinations of calendars (on the left) and it will update the iframe html embed stuff.

If you have 3 calendars (A, B, C), you'll probably want to have some combos, like this: - show A, hide B & C - show B, hide A & C - show C, hide A & B - show A & B, hide C - show B & C, hide A - etc.

Each one of these combos will have a unique HTML embed value. Just copy the src values from each one and work into the javascript above. Of course, you'll have to have to make it bigger. Also, You'll probably want to change the controls that trigger the javascript from a simple link to checkboxes.

Let me know if you need any help with this.

Improve this answer
4
  • See my newest edit above - found a partial solution, but not total.
    – Travis Northcutt
    Oct 28, 2010 at 20:54
  • I'm stumped again. I think your best option is to implement the option I described above. It will involve expanding that javascript and getting them hooked up with some textboxes, but I don't think there is another option. NOTE: Make sure you uncheck "calendar list" when designing your embedded code, so your users don't have the ability to use that drop-down. PS. Not looking for bounty - seriously. just trying to help. sorry i couldn't get it to work for you the way you'd hoped.
    – user5821
    Oct 28, 2010 at 21:15
  • forget it. My javascript appears to only work if you take the embedded links for each individual calendar. If you try the embedded src link for multiple calendars, I can't get it to work. Oh well. Man, this is way tougher than it should be.
    – user5821
    Oct 28, 2010 at 22:31
  • I certainly appreciate the effort! I agree, would be nice to see more granular control in the calendar embed options.
    – Travis Northcutt
    Oct 29, 2010 at 14:51
0

The following example can switch calendars and supports multiple calendars in each view. The key is to wrap your iframe in a div container and change the innerHTML of the div container. When the innerHTML is changed, the iframe automatically loads the src link (which is the new link to the embedded calendars) and updates the innerHTML of the iframe as it should. This is the best approach I could come up with to solve this problem and it works for me.

<html>
<body>
<script type="text/javascript">
var iframes = new Array(
    "<iframe id=\"cal\" src=\"http://www.google.com/calendar/embed?src=mycal1url%40gmail.com&ctz=America/New_York\" style=\"border: 0\" width=\"800\" height=\"600\" frameborder=\"0\" scrolling=\"no\"></iframe>",
    "<iframe id=\"cal\" src=\"http://www.google.com/calendar/embed?src=mycal2url&ctz=America/New_York\" style=\"border: 0\" width=\"800\" height=\"600\" frameborder=\"0\" scrolling=\"no\"></iframe>");
function changeToCal1()
{
    document.getElementById('calContainer').innerHTML = iframes[0];
}

function changeToCal2()
{
    document.getElementById('calContainer').innerHTML = iframes[1];
}
</script>

<a href="#" onMouseDown="changeToCal1()">Calendar 1</a> 
<a href="#" onMouseDown="changeToCal2()">Calendar 2</a> 

<div id="calContainer">
    <iframe id="cal" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

</body>
</html>

Also, don't forget to escape your quote characters in your strings!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.