resize google calendar

Update: try Google Calendar Simplified userstyle instead!

I use paper for my personal calendar, but at work, I use Google Calendar. Despite being a web app, and not a rich client, it’s really nice…even if I am a little biased. :P

However, as much as other people complained about Oracle Calendar, our old calendar, it still beat Google Calendar in one regard.

Google Calendar resizes itself automatically to the browser window. That’s nice, but it means you can’t have a window showing just your calendar, without the navigation widgets on the left.

I keep my calendar open all the time, in a small window off to the side, and I usually only want to see my agenda for the day. For all its flaws, Oracle Calendar did let me do that.

So, I set out to make Google Calendar do it too. Luckily, I use Firefox. After some quality time with the DOM Inspector, I ended up with these CSS rules in my userContent.css file:

div#mainbody {
  width: 450px !important;
}

div#gridcontainer {
  height: 370px !important;  
}

Add them to yours, restart Firefox, load up your calendar, and you should be able to resize and scroll the window so that only your actual calendar is visible. Tweak the width and height to your liking.

If you’re happy with that, try out these CSS rules to further resize and customize the layout:

/* date picker, upper left hand */
div#dp_0 {
  display: none !important;
}

/* "Next 4 Days" and "Agenda" tabs */
td#mode_link4, td#mode_link5 {
  display: none !important;
}

/* "Calendars" picker */
div#calendars {
  min-height: 335px !important;
}

body {
  max-width: 600px !important;
  max-height: 480px !important;
}

Tweak as necessary!

Leave a Reply

Your email address will not be published. Required fields are marked *