Monday, January 14, 2013

New Google Calendar wall like column year view


The blog has moved to syngron.com


I am a happy Google Calendar user, however I was always annoyed by two things. One of those things was the missing year view which I fixed now by programming a new Google Calendar Gadget which you can find on my Github page. It creates a year view with each month in one row and all the events from your selected calendars:
https://raw.github.com/syngron/misc/master/SyngronYearView.html

Column year view with events in red (German public holidays)
To add the Gadget to your calendar just follow the link below while you are logged in to your Google account:
https://www.google.com/calendar/render?gadgeturl=https://raw.github.com/syngron/misc/master/SyngronYearView.html

The other annoying thing is not being able to smoothly scroll between months in the Google Calendar. At the end of the month I am not interested in the last four weeks before but more in the coming 4 weeks but in the online view there is only the static monthly view available at the moment. That annoyance I could not fix yet.

When I searched for a year view I found out that it was available through Google Labs as a gadget. Unfortunately I was very disappointed by it. I was expecting a typical wall calendar like we have it in German offices many times. These calendars have just 12 columns where each columns is one month. Each day of the months has a little field to the right to fill in simple informations or write the important office or holiday days. The Google Labs year view on the other hand is composed of a grid with four columns and three rows and each grid cell has the information of one month with no space for information of events. The next problem was that not even the days with events were marked specially. I know already how a year calendar looks, what I do never remember is where on that calendar I have appointments!

After googling a while I did find at least a version of this year view calendar with days with events being marked in a different color. However the event marking did not work properly when I last checked (found on the webbricks blog).

In the end I did not find any solution which resembled my view of a year view. After studying both codes, the one of the original Google Labs calendar gadget and the one from webbricks I thought however that I could try to build my own Gadget with my very rusty Javascript, HTML and CSS skills and the two templates. You can see the not quite perfect result in the picture above.

The Gadget works quite good and shows each month in one columns with all the events of the selected calendars in a separate row of the day just as I wanted it. But I was still not able to fix the height of the calendar table columns to an equal size. So months with more days or more events will be longer than others. Another issue is that if the screen is too small, months are cut off at the bottom (decreasing the font size with e.g. CTRL+MINUS can fix that). Another problem that came up with my real events was, that all events from the first five months were shown, but sometimes not all of the later months. I poll the calendar API monthwise and correctly check for events which last over the time of two different months, maybe the API does not allow too many polls in a row. I also found out that one single poll for the whole year does not work. I experimented with window lengths of days and weeks for polling but they were slower than the month wise polling and resulted in the same missing events sometimes. If somebody knows why that happens please tell me.

To sum it up I can say that the Google Calendar Gadgets are a great option and they can be programmed quite easily if you know web design a bit. The only problem is the annoying debugging procedure which involves reinstalling the Gadget after each code change so that the Google cache is not loading the cached version again. The cache is caching Gadgets for one hour and for me also the option ?nocache did not help. So it is best to pre-test Gadgets on your own server before trying them with the Google Calendar API.

11 comments:

lemutty said...

Danke schoen for this feature! The other year-view gidget didn't work for me either, unfortunately. Yours works very well (100% just as I'd expect from a German :-D)

It would be even better if the events were color-coded to match the calendar they belong to. Is this something you would consider doing?

Thanks again!

Yael

Diane said...

Great gadget.

Can't see all the dates for the end of each month. Tried adjusting zoom and going fullscreen. No option to scroll down or across the page.

Running Chrome on Windows 7.

Thanks

Tr€g0r said...

Great gadget! Thanks I dreamt about it, you did it ;-)

I'm using Windows 7 and Chrome, I can see only 5 monthes (March to July today 3rd of April)

I suggest also to see evant color used by calendar.

Thanks!

michi friedrichshain said...

Very useful gadget. Thank you.
Can't believe that google had not thought of implementing this before.

I do see all months, and all dates that have an event are marked in a colour, but the events themselves don't appear. Is there something I have to change?

I'm using Windows 7 and Firefox 19.0.2

Thanks

Gladfin said...

Hello.. this is the gadget I had been searching for, but unfortunately it seems very unreliable on my mac: for the events to display in eery month in your year view I need to go back and forth from calendar to year view several times. Also the display is cut off at the bottom and does not show the last ten days of each month. Very frustrating. What am I doing wrong?

geiger said...

This is a SUPERB idea and I cannot understand why it's not available in the normal google calendar settings

Andrew Carmichael said...

Great app - thanks a lot - cannot believe that someone has not developed this as an app and sold it - with a few more tweaks I would happily pay for it - thanks again for developing and sharing

Joan Bell said...

Year ago my partner and I both owned a Nokia 9210 and it was the most efficient 'gadget' we have owned.

It had a color coded yearly calendar with an at-a-glance view which my partner needs for his biz and I would like to have.

I will keep looking for a calendar that offers this and I'm amazed that it isn't available with every calendar.

Thank you for offering this 'fix' and I think it's sad that a company like google hasn't done this.

ben303 said...

only works on default calendar and tasks....not my other calendars...

Bouquetin said...

Great.

How did you display the event title below the date?
(Such as the German public holidays in your example)

sicktrip said...

Thanks for all the comments! I didn't check back here for some time which is why I did not comment.

The color coding was mentioned multiple times, I will look into that.

I knew of the problem with the size and no scrollbar. The trick is to decrease the font size with CTRL+MINUS BEFORE you open the year view.

To display the German holidays I first added a new calendar to my normal calendars with the holidays. Then I only select that one to show and after that I open the year view.