Looking for some personalised seasonal, christmas or new year gifts?

Use your ical calendars (google or other (others by importing into google)) and your own photo’s to generate a A4 year calendar.  Print to PDF and send to your local print shop for bindin.  Viola! instant personal presents.

Test it out on the demo site.
See how the examples work, then add your own ics url to the query.

Restyle embedded google calendars

I have developed a script for personal use, however added additional coding in the hope that others may use it as well.   The idea for this year calendar was prompted by a post by lindenlan back in 2006.

The css could also be used to simply restyle your google calendar.

Firefox only, although IE also possible if you adjust the IE stylesheet yourself

Note that this has only been tested on firefox on vista and styling may depend on your default font sizes etc and may require tweaking.  I made minimum changes to the main style sheet get what i wanted happening and did not change the IE sheet.

Inputs:

I may develop an html form later, but for now it is url query string driven, so maybe start a text file with your parameters:

src=some google calendar name

Under the calendar settings when you click on the html tag, you get a url – we need the piece that says something like :src=0bajvp6gevochc6mtodvqcg9o0%40group.calendar.google.com.

These could be private calendars – such as your families birthday’s and special anniversaries, or public ones such as,

• public holidays,
• eccentric days,
• moon phases,
• Earth seasons,
• United nations events,

If you have multiple calendars,use src[0]=xxxxx, src[1]=xxxx etc

Coloured calendars

For multi-calendars, colours are a good idea.  We are limited to those that google allows – else we just get the default blue.  Use the embed helper to see the colour options (need to login to google).

• red and one color only for first calendar:  color=#CC3333
• pink:  color[0] = #DD4477
• purple:  color[1] = #994499
• etc

Months & start date

• Specify the number of months to return &months=n
• Specify the start month &start=YYYMMDD

Images

Images can be switched on or off:

• imagesfile=none
• or imagesfile=someurl.txt, where the text file contains as many images+1 as months you would like
  • imagesfile=file:///C:/temp/test.txt for your local file or
  • imagesfile=http://webdesign.anmari.com/calendar/image_file.txt for a file on a server.
• The image file is a text file that looks like this

2009zebra.jpg

http://farm2.static.flickr.com/1004/580865496_d15b16308d_o.jpg

file:///C:/temp/test.jpg
etc

Styles or Stylesheets

My default is aimed at a monthly print view, developed for firefox for my font-size etc.  The times are switched off – they appear just as a note on that day.
I struggled to find some halfway decent other interesting examples of calendar restyling – you could look at using their ideas to create your own stylesheet.

• http://wildweek.com/calendar.html
• http://wildweek.com/calendar.html
• http://fatfish.info/images/mygooglecal/newcal.html
• http://www.ipolynesia.com/kahuku/calendar-main.htm

Demos or Examples

Test it Out:

• Restyled google calendars with images -The default demo option – 2 months, 3 images only (1 cover, plus 2 months):
• non google css for google calendars. Default calendars, No images, just- Use imagesfile=none
• Google calendar with an alternate start date Starting at January 2010 -Use ?imagesfile=none&start=20100101
• multiple different google calendars – this example uses the Swedish name days and the best primary school’s online calendar ?src[0]=xxxx&src[1]=xxxx
• a different style sheet with thanks to kahuku, ?style=http://….css

Resources:

• The adjusted main stylesheet: am-cal-css.css
• Unadjusted IE style: mygooglecal3ie.css
• sample image_file.txt
• a 2009 cover image

You can also get more information by trolling through linden lan’s posts and comments.  Note that google changes it’s method now and then, so be wary about using any old advice:

• http://www.lindenlan.net/2008/01/10/calendar-casting-call/
• http://www.lindenlan.net/2007/06/18/restyle-google-calendar-gadget/
• http://www.lindenlan.net/2007/10/14/restyle-google-calendar-2/
• http://www.lindenlan.net/2006/10/08/restyle-google-calendar/

If you enjoy messing around with ical files, you could also have a look at ical-events-list, which is about styling a better agenda or list based table of upcoming events.

Related posts:

1. Comparison of Event Calendar Plug-ins We are thinking of converting the school’s website from typo3 to wordpress to make it easier for staff and parents...
2. Search Engine Optimisation with Google This checklist is  based on Google’s Search Engine Optimization Starter Guide. This is what they think is important.    One might...
3. Rental Property Availability A site that I help wanted to display property availability.  The clearskys availablity plugin seemed the best but was not...
4. Timezones, Wordpress, Ical, Php…. What a lot of fun this can be (not!) Your Ical file may have a timezone specified, the event may...
5. Getting the urls and only the urls with ereg Trying to match any weird and wonderful url or hyperlink in a piece of text is fun – I found...