Helvetical pimping up Google Calendar.

tags

• Fluid
• Helvetical
• Helvetireader
• userstyle

Comments

If you have any feelings on this subject then please make a comment and I shall be sure to reply to you. Only rules are; don't be an arse.
You can follow any responses to this entry through the RSS 2.0 feed.

• Joen

  01/09/2009

  This is gorgeous work, and classic Helvetica aesthetics. 11 thumbs up.

• Grant Stavely

  01/09/2009

  That looks great!

  I took a similar route with my Wikipedia userscript, Simplepedia, and I had the same inline css problem. I threw together a perl build script to merge CSS into the userscript as one long line for each css file I wanted to add. One advantage of building it in is that users shouldn’t get errors pulling your CSS over http when they are browsing gcal over https about mixed SSL.

  I like using userscripts.org for hosting. I also found the GM functions handy – see the sourcecode of my script for details.

  The build process and script

  Create a dev copy of the userscript, but replace your cssNode DOM work with GM_addStyle(%CSS%), or something like this, which is what GM_addStyle does anyway:

  
var oStyle = document.createElement("style");
oStyle.setAttribute("type", "text\/css");
oStyle.appendChild(document.createTextNode(%CSS%));
document.getElementsByTagName("head")[0].appendChild(oStyle);


  The %CSS% is not javascript, it’s just junk that the perl script will be able to search and replace with raw CSS. This has the effect of adding your entire block of CSS in a style block instead of in a link href.

  Save that file somewhere.

  Then save this perl script somewhere.

  
#!/usr/bin/perl -w
use warnings;
use diagnostics;
use POSIX qw(strftime);

  my $css =`cat ./googleCal.dev.css | tr -d "\n"`; #put it all on one line
  my $file = shift; #accept the filename on the command line
  my $backup = `cp $file ./backup/$file.$timestamp`;
  my $output = 'googleCal.user.js';

  open(USERSCRIPT, $file)
  or die ("Failed to open $file");
  open(OUTFILE, ">$output")
  or die ("Can't open $output");

  my @original = ;

  foreach (@original) {
$_ =~ s/%CSS%/\"$css\"/g;
print OUTFILE $_;
}


  Assuming you called that perl script ‘make.pl’ and your development userscript with the %CSS% in it ‘helvetical.dev.user.js’, you could now run “make.pl ./helvetical.dev.user.js’ and the script will save a backup copy of the existing release version of helvetical if one exists, and create a new one with the full css file merged into it.

• Andy Butterworth

  02/09/2009

  Quick question, i am a complete numpty when it comes to knowing how to style other peoples stuff. where would i amend the code in google calendar to look at these styles/images if i host them myself?

• Asbjørn Ulsberg

  02/09/2009

  Excellent theme! A solution to getting the CSS locally could be to embed the entire CSS in the JavaScript (as an inline string) and then changing the JavaScript to set the CSS as the nodeValue of a style element instead of the current URI referencing link element?

  A second option is to translate the CSS into JavaScript and set all CSS properties via script instead. Requires the CSS to be doubly maintained, but it’s possible.

  A third option is to reference the CSS file locally somehow; has that been attempted? Perhaps if the CSS file is placed in the same directory as the Userscript file?

• Richard Tape

  02/09/2009

  I’m a complete novice to this also and this may be the single most obvious thing ever stated (apologies if so), but if people are using FireFox’s GreaseMonkey, then all they need to do is right click on the monkey head -> manage user scripts -> Helvetical -> Edit

  And then remove the if(window.fluid){ (and the closing parentheses obviously) and it’ll work like a charm.

  Awesome work turning something so horribly painful to look at into something beautiful! Thank you so much

• Ad Taylor

  02/09/2009

  @Grant Stavely : Wow, Simplepedia is awesome. Just downloaded Stand in the hope I can get it working on Safari. I shall have a play with your recommendations later on tonight and see if I am smart enough to understand them — I fear I’m not. Cheers for the help.

  @Andy Butterworth: Just change the line in helvetical.user.js;
  
cssNode.href = 'http://www.iamadtaylor.com/userscripts/helveticalRELEASE/googleCal.css';

  to
  
cssNode.href = 'http://yourDomain.com/path/to/googleCal.css';

  Make sure the ‘images’ folder is in the same directory as ‘googleCal.css’ .

  @Asbjørn Ulsberg: Yeah I did try to reference it locally but I couldn’t get it working. Im a fan of the second option, will give it a go. Thanks!

  @Richard Tape: Cheers Richard, Not obvious to me at all, I shall add it to the meagre ‘Usage’ instructions.

• Jason

  02/09/2009

  Nice work!

  I wanted to use this in Google Chrome, so I modified your userstyle file a bit to make it usable in Chrome:

  http://www.jasondettbarn.com/2009/09/02/helvetical-for-google-chrome/

  Hope you don’t mind!
  Jason

• jz

  02/09/2009

  nice work! google calendar looks so clean now :)

• Anders Thoresson

  02/09/2009

  I’m trying to get this going in Fluid.app, following the instructions by Josef Richter (copied the content right into where that comment is). I’ve got the js-file created as a userscript, and it is activated. But all I see is the same old Google Calendar. What can I be missing?

• Philipe Mongeau

  02/09/2009

  Cool, this is great.
  If some people want to have it in Firefox without editing the script, here’s a modified version: http://bit.ly/D0fbH

  It should work in all browsers supporting greasmonkey.
  The source is also on github: http://github.com/phmongeau/Helvetical/tree/master

• PeterVk

  03/09/2009

  Is there any way to get this working on GreaseKit for Safari 4?

• Vitor

  03/09/2009

  Thank you for providing us this beautiful peace of artwork, I just love how it is clean. And it is working for me!

  However, I think that the “Other calendars” features was, somewhat, forgotten. This other calendars button on the left menu should also be rendered as in “My calendars” showing the colors defined for each calendar and the edit option.

  Is there an easy way to bring this back?

  Thanks a lot,
  Vitor

• Adam

  03/09/2009

  Wow, this is really very cool. I installed the greacemonkey script linked to by Philipe Mongeau above and it works beautifully in Firefox 3.5.

  It does need to show the colours you have chosen for ‘Other Calendars’, but other than that it’s great.

  Thanks.

• Ad Taylor

  03/09/2009

  Thanks so much for helping with this. Have adapted the user-style to Philipe Mongeau and Jason’s recommendations (much appreciated) and seems to be going great guns on Firefox and Safari.
  David DeSandro has kindly offered to help clean up the mess I have made of this, so all should be good soon.
  Will get the ‘Other Calendars’ colours up and running in a day or so.

• Brady

  04/09/2009

  SIMPLY FABULOUS! Thank you so much for this.

  Do you happen to know if there is a matching Gmail style? I would love to have a matching style since I use both Gmail and GCal daily.

  Thank you!

• Ben

  04/09/2009

  Not sure if you are still taking comments/requests on this, but as for editing the CSS I have two requests:
  – how can I darken the yellow used to highlight the current date?
  – is it possible to implement the different calendar colors in the text color of a non-all day event?

  Thanks for the awesome work; install was painless and it works flawlessly with greasemonkey and FF 3.5.

• Paul

  04/09/2009

  A minor but crucial improvement for people on 13 inch screens – the date in bold at the top is so large it pushes the actual calender down significantly, which makes a difference with only 800 pixels of height to play with. It would be great if a better balance could be struck!

• Ad Taylor

  04/09/2009

  @Paul : I just had a look at it on a 13″ Macbook and your right, not great for everyday use. However I just checked and 60% of people on this site in the past few days have been at 1680×1050 and bigger. Here is how you can edit the user-script (or style) to suit your needs. Using the find and replace function in your editor of choice (could be something as simple as textEdit) change:
  #chrome_main1 td h2 span{font-size :42px !important;}
  to something like
  #chrome_main1 td h2 span{font-size :22px !important;}
  then change:
  #sropt{margin-top :70px;}
  to
  #sropt{margin-top :20px;}
  then change:
  #topBar{margin-top :-30px;margin-bottom:50px;}
  to
  #topBar{margin-top :-30px;margin-bottom:35px;}

  This way your only losing a little screen estate. Hope it helps.

• Ad Taylor

  04/09/2009

  @Ben: I am going to make changes but not until next week. I just created a twitter account so that I can let people know when it does get updated, best bet is to add that so I can let you know. http://twitter.com/HelveticalNews

  @Brady: Not that I know of. Agreed, it would be great though.

• Gatorbrit

  05/09/2009

  Looks great. Only thing is that on a lap top, the large font for the date across the top means that you can’t see as much of the actual calendar. Can you make that font smaller?

  Thks

• Joe Kohli

  05/09/2009

  Looks good. Sounds good. I still have no idea how to actually do it. It seems like 3 steps are listed for something like a 7 step process.

• Jason Karns

  05/09/2009

  It would be nice if you could also add support for Google Cal on SSL. (A simple matter of adding http://www.google.com/calendar/ to the moz-document url-prefix line).

• Matthew M. Boedicker

  05/09/2009

  Looks great. You might want to make the hosted include http*:// because I access my hosted Google Calendar using https.

• Burt Lo

  05/09/2009

  Ad, ahhhh, your reface is beautiful! Thanks.

  I needed to add another entry in the “Included Pages” dialog of GreaseMonkey in order to make this work for me. It was simply duplicating the “http://*.google.com/calendar/hosted/*” line and modifying it for “https”. That may be more common than you realized since I’m not a heavy modder for things like this.

  Anyhoo, thanks again! I’m loving the feel of it and you’ve inspired me to become more familiar with scripts of this nature!

• Craig

  05/09/2009

  I have tried installing this on firefox with both greasemonkey and stylish with no luck… am I missing something?

• Davide

  05/09/2009

  Thanks for your work! Tried to install this into stylish, only to find nothing happen. The calendar display is the same with or without the code. I went to the “add-ons” window in Firefox and attempted to “preview” the effect of the code and saw the following error prompt:

  6:1179 Error in parsing value for “background”. Declaration dropped.

  Not sure what it means, but perhaps it will be of some help to you. Let me know if you need further info on my FF setup.

• AJ

  05/09/2009

  brilliant userscript…. def makes me want to use my gcal more! earlier it was such an eyesore!!

  my next wish…use this look of interface on gmail as well..then there would be a consistency between all the products of google i use :)

• Lane

  05/09/2009

  The script causes the headings to be printed twice, slightly offset. Linux Switftfox 3.5.2.

• Dan

  05/09/2009

  Hi Ad, great template.

  I have a thick grey bar running across the bottom of the theme, right underneath the gcal area (the bit with a scroll bar). Wondering if there’s a parameter to make it thinner?

  I followed your instructions to reduce the size of the date at the top and it worked wonderfully. Makes it a lot easier to read the calendar for me even with this 17″ 1920×1200 screen.

  Thanks for the great style. I’m following you on twitter for news of updates.

• Craig

  05/09/2009

  Why does Helvetica (the .TTF I have is v1.3 by HP, 1992-1997) render so horribly with ClearType on Windows XP?

  See Arial vs Helvetica.

• Cecil Remmler

  05/09/2009

  Love, love, love the design! However, one little thing, there is no way to change the colour of any of my public calendars… Is it planned that this gets incorporated.
  Thanks!

• mike Houston

  05/09/2009

  i love helvetical. would love it if you could make google docs (writely) more pretty?

• Jim

  06/09/2009

  dude,
  nice work…i used it for my goocalendar and will be blogging about it and giving u props this week

• Max

  06/09/2009

  Great work – Makes everything so much easier to read an navigate. Any plans to do this for gmail?
  Awesome.

• Ben

  06/09/2009

  Not sure if you get @ replies, but on the latest release had to change the default address to https://*.google.*/calendar/render* (or http://*.google.*/calendar/render*). Just a heads up, but otherwise the colors for different calendars are all the same for non-all day events. Not sure about that either. Keep it up and thanks for the script.

• Josef Richter

  07/09/2009

  Nice work! You may also like my Helvetwitter. See http://www.josefrichter.com/helvetwitter

• Chris J. Bates 

  07/09/2009

  I am also a novice with userscripts. Can you tell me how to install Helvetical using IE7Pro, so that it works with Google Calendar? Thanks !

• xxdesmus

  07/09/2009

  Looks nice, but it breaks when you use the topbar and sidebar hiding included in Better gCal — the date overlaps instead of being hidden like it should. If you could make this work nicely with Better gCal’s hiding I’d love to use this theme. Great work, it looks gorgeous.

• residuetiger

  07/09/2009

  I love the look of the Helveticalized Google Cal, but I’m wondering if there is a way to change the range of hours displayed on day or week views? Currently the cal is only displaying about a 6 hour range of time, forcing you to scroll for the rest of your day, is there a way to change this?

  This is great work btw!!

• Nathaniel

  08/09/2009

  For those curious to get this working in Safari 4 (on Snow Leopard 64bit) try this. It worked for me.
  http://groups.google.com/group/greasekit-users/browse_thread/thread/18784a8d049ccc15

• dnarepairman

  08/09/2009

  Very clean looking… simply beautiful! Sadly, I am having issues getting the script to work properly with Tasks.

• sheryl

  08/09/2009

  THANKS!
  so easy to install and use AND it looks great!
  you’re the best!

• Glennboy

  08/09/2009

  This is fantasic. A thing of beauty. And I love the big date font. Very well done indeed.

• ldt747

  08/09/2009

  Thanks for these wonderful script tools. I got all three;Helvetical, Helvetireader and Hevvitwitter all to work with little trouble and am really pleased with the changes, especially the Swiss Watch Red, my favorite color.

• Phil Poccia

  09/09/2009

  I have MobileMe. Is there any way for me to use this?

• Brian Dusablon

  09/09/2009

  I installed the userscript in Fluid, via Josef’s instructions. But it’s not looking quite right. Is it because I need the images? You have no instructions for the Fluid install here (for us novices).

• bryan

  09/09/2009

  i’m going to just quote Ander Thoresson’s quote from way up there, since he didn’t get answered and i’m having the exact same problem, after the exact same process:

  “I’m trying to get this going in Fluid.app, following the instructions by Josef Richter (copied the content right into where that comment is). I’ve got the js-file created as a userscript, and it is activated. But all I see is the same old Google Calendar. What can I be missing?”

  ditto. emptying cache/etc. hasn’t helped a thing. anyone else having the same issue?

• xizdaqrian

  09/09/2009

  Great work! Just found it. Very well done.

• sw

  09/09/2009

  okay, I’m an idiot. And a novice. And somehow I loaded the code twice, and now I’m getting two sets of text, almost in a shadow fashion. Is there any way I can, er, undo this code, start over, and load it again? Or is there a reset button on my cal default settings? Sorry to trouble you with this…

• Me

  09/09/2009

  Now if you could just do a script for Gmail, I can imagine that more people will use it. Right now, people are getting bling from the so-called “Gmail UI”. :-)

• Ad Taylor

  09/09/2009

  @ Brian Dusablon, bryan and anyone else : Ok so I am going to assume you have fluid.app up and running with your gCal. To get the them working:

  In fluid menu bar click on the ’scripts’ icon and select ‘New Userscript”,
  Name it Helvetical,
  A script will pop up (in Dashcode.app), replace all text with the contents of helvetical.userscript.js,
  Ensure it is selected in the scripts menu !important,
  Refresh or restart.

  @sw: What are you using the script in? Greasemonkey? Fluid? Also, what OS and browser are you in?

  @Me: I agree that it would be nice to have a userscript for mail but at this point I am not convinced much could be done with it, other than making it black, white and red. The point of helvetical was to simplify gCal, I am not sure that it would be a smart idea to simplify something as powerful as gMail as functionality could be lost. I plan to look into it at some point but now I am pretty happy with how well it integrates with Mail.app.

  @Chris J. Bates : Sorry, I have no idea how to get it working on IE7 as I work on a Mac. The userscript might also look a bit wonky on IE7 as it uses a lot of CSS3.

  @xxdesmus : I don’t quite get you. Could you send me a screen shot so I can try and fix it?

• Moltas

  09/09/2009

  Great work! Really helps my eyes :)

  Just so you all know. If you have Opera you can just download the files and point opera to them. No need to download Greasemonkey or anything. It works just fine out of the box!

• Jarik

  09/09/2009

  Very cool style, one quick question though :

  I would like to make the todays date stand out a bit more, a sligthly stronger colour tone. How would I go about accomplishing this ?

• Becky

  09/09/2009

  For some reason, my events with specific times is showing up in black instead of the color of the calendar it is assigned to.

  Any idea what I’m doing wrong?

• sean

  10/09/2009

  Hi!
  Great work, but I have one question: where do I put the images? I’m guessing maybe somewhere in Application Support. But I really have no idea. It looks great but none of the images have been changed.

  Thanks!

• Matias

  16/09/2009

  HI, nice work!!! I was using helvetreader in opera 9 but now in opera 10 the fonts are modificated for some ugly bold italy font. I don’t know how to fix that.

• Martin

  17/09/2009

  Hey thanks for a great script! However I think there’s some problems regarding the readability for the small fonts in the events. Don’t think it’s me, still young…but that Verdana renders better for really small pixels especially when the background is a bit yellowish and the text white. As for the time of the events maybe a bold would do better and some spacing between the letters.

  M

• George d’Adhemar

  17/09/2009

  Amazing style. Has anyone come across a way to extend this style to an embedded calendar set up using Google’s iframe coding? For that matter, is any customization of an embedded calendar possible beyond the basics that Google provides? Thanks!

• matt

  21/09/2009

  I’d also like to second Becky and Jarik’s comments. The style is, overall, beautiful but those suggestions would make it much better.
  Jarik is right – the current day does fall a bit too much into the background. It would be great for it to stand out a bit more.
  As for Becky’s comment, the colours appear correct in week view (coloured blocks) but in month view (my default), all events appear in black text. If they could appear in such a way as to designate their calendar, it would be helpful.
  Thanks again for the great theme!

• Troy Howard

  01/10/2009

  Hey, this works great!

  Only problem is that the search bar is blocking the helvatical title. Fix?

• Ben Krasnow

  02/10/2009

  I like it! The only thing that I changed was removing the

  * font-family color :#333 !important style

  The problem is that I have multiple calendars displayed, and the events are color-coded automatically by google. So, events from my personal calendar are a reddish-salmon color, and the events from by band’s calendar are baby blue. I don’t like these colors that much, but it’s necessary to have some visual separation. Keep up the great work!

• Ad Taylor

  03/10/2009

  @Troy Howard: What are browser are you using helvetical on? What platform are you on? Not had this problem on OS X FF, Chrome or safari, would like to know more.

  @Ben Krasnow: See update. Your right that line was making the month events dark but completely removing it removes the text colouring from the entire style.

  @Martin: I agree that Helvetica does get a little hard to read when smaller but changing the font on a style called Helvetical would be … odd. Though if that’s your bag you would want to add #maincell * {font-family:verdana !important;} to the end of the css variable.

• Stephen

  04/10/2009

  I’m new to this but would love some help! I downloaded the files from github, but have no idea what to do with them, or where to put them? Could someone please help me with this?

• housetier

  05/10/2009

  this is love at first sight! :)

• Augure

  05/10/2009

  I think every designer agrees: this is the best stylescript ever.

  But it’s a shame I don’t use Gcalendar, it could be great if this theme was ported to Gmail, Gdocs or Greader.

  Any idea where to find similar scripts or what to change and these ?

• Holger

  07/10/2009

  Awesome work dude,
  I love the helvetical style. Google Cal finally makes more fun :)
  regards, holger

• Phil

  09/10/2009

  Hi,

  Today is not easily visible. ?Brighter color for “Today”.

• Adam

  16/10/2009

  I love this style. I ran into an issue though. When I activate it, embeded google calendars have a small padding on the left and the top, inside the iframe.

• Sean

  19/10/2009

  Hey Ad,

  Any chance you could darken the current (today’s) date? It’s quite difficult to see at the moment.

  Thanks!

• Mel

  18/11/2009

  Brilliant. Thanks I will now put my eyes back in :)

• AJ

  07/12/2009

  Is there any way we could get the text in the calendar listing on the left as well as the names of all-day events changed to white? It’s rather hard to read at the moment.

  That being said, this is fantastic work. Thank you!

• Me, David

  14/12/2009

  Hi,

  I’ve been using your style for quite a while now and at home on a Mac the today color is better visible then at work while on a Windows machine.

  I opened up the helvetical_-_google_cale.user.js file but can’t find any reference the today color.

  Could you help me out here ?

  Thanks,
  D.

• Sowju

  13/01/2010

  Hey!

  Brilliant Design! Helivetical is the only reason I have started to use a Calendar application and already I am getting more things done!

  Just one thing bugging me though. I am using it in Firefox 3.5.7 with greasemonkey and the date at the top is not showing as the big bold text like in your screenshots. All I get is an empty banner and the date is displayed in the default google calendar style(in small text, between “Today” and “Refresh”).

  I tried changing the ‘#chrome_main1 td h2 span{font-size’ , ’sropt margin’ and ‘top bar margin’ values but it doesn’t make any difference. Am I missing something? Is there any way I can fix it?

  Without the beautiful bold text on top, my calendar looks like its missing a LOT. Could you please help me fix it?

  Thank you!

• Christopher Barth

  20/01/2010

  Thanks for offering this … really enjoy the style. Any chance you could add styling on meeting attendees? Default Google style uses strikeout (not attending) and shading (haven’t responded) to show the status of meeting attendees in the popup window. Your own RSVP is also more difficult to ascertain in Helvetical.

  Thanks again!

Your comment

• hi@iamadtaylor.com
• Ad Taylor
• mobile : 07595 300 841
• Contact me through Jabber

Curriculum vitae

My CV can be viewed and printed from here.

Flickr