Google-calendar – Limit Displayed Hours on Embedded Google Calendar

google-calendar

Is there a way to limit the hours displayed on Google Calendar that will also limit those hours when you embed that calendar on my web site page?

I am using the Labs Hide Morning and Night extension which seems to hide the hours when I view my calendar within the Google Calendar site. When I view the embedded calendar posted to my external web site, the hours are NOT hidden.

Best Answer

This is how far I have come.

Using a CSS to restructure what is visible.

https://www.quora.com/How-can-I-select-the-hours-to-display-in-Google-calendar-widget/answer/Kim-Nilsson

Related Solutions

Google-calendar – Google Calendar: How to show or hide multiple calendars with one click

I realize that you are specifically asking for one click, still I'd like to offer a (mostly) three click solution as likely helpful as well (for anyone not aware of it already at least ;)

Within the left sidebar, under Other calendars, click Settings.
Within the second column, under SHOW IN LIST, click all/none as appropriate.
At the bottom left, click Back to calendar.

Obviously, depending on your calendar distribution between the upper and lower section, you might need to click all/none another time in the other section as well eventually.

In case this really doesn't serve your needs, it should indeed be possible to extend Google calendar via the Calendar APIs and Tools (the calendar class has a hidden property) and/or a Calendar Sidebar Gadget - I'm not aware of an existing solution offering the desired functionality, so you'll need to roll your own in case.

Google-calendar – How to allow toggling of different calendars within an embedded Google Calendar

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.

Best Answer

Related Solutions

Google-calendar – Google Calendar: How to show or hide multiple calendars with one click

Google-calendar – How to allow toggling of different calendars within an embedded Google Calendar

Related Topic