31 Comments

Summary:

Don’t you wish there were an easier way to quickly view upcoming appointments and your task list?  If you’re a fan of Google products, then follow these steps for an easy-to-use solution.  In the end you will have two new items in your menu bar: one […]

google_calendar_tasksDon’t you wish there were an easier way to quickly view upcoming appointments and your task list?  If you’re a fan of Google products, then follow these steps for an easy-to-use solution.  In the end you will have two new items in your menu bar: one for Google Calendar and one for Google Tasks.

What You Need

1. Fluid — This allows you to create applications from web sites. In our case we will be creating a Google Calendar application, and a Google Tasks application.

2. Calendar icon

3. Tasks icon

4. 10 minutes

The Steps

1. Download Fluid.

2. Open Fluid.app.

3. The first app we’ll create is for Google Calendar.  Let’s use “Calendar” for the name.

4. The URL for Google Calendar is google.com/calendar/m.

Note: For Google Apps users it’s google.com/calendar/hosted/[your domain name]/m.

5. The dock or menu bar icon for this application can either be Google Calendar’s favicon, the tiny icon that appears in the address bar of your browser when you visit the site, or something a little fancier, like what I suggested above.  To use the fancy icon select “Other” from the Icon menu, and locate the newly downloaded icon on your hard drive.

step1

6. Click Create.

7. After a few seconds you’ll have the option to Launch. Go ahead. Don’t be afraid.

step2

8. The window that appears is a web browser that will automatically open to Google Calendar.  Log in (if necessary).

9. Go to the Calendar menu and hover over User Agent.  Select “Mobile Safari 1.1.3 – iPhone”.

10. Go to the File menu and select Close Window.

11. Go to the File menu and select New Window.

12. Go to the Calendar menu and select “Convert to MenuExtra SSB…”  Click OK in the warning window and you’ll have a new item in the menu bar: a tiny calendar icon.  Click on it to see the mobile version of your Google Calendar.  You can drag the lower-left corner to resize the window.

Repeat for Google Tasks

For Google Tasks, follow the same steps (you obviously don’t have to download Fluid again).  The URL you will use is gmail.com/tasks.

Note: For Google Apps users it’s mail.google.com/tasks/a/[your domain name].

Tasks will not properly load until you perform step 9 and set the User Agent to “Other”.  Enter the following text into the window:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5H11 Safari/525.20

You’re done! Now you can quickly and easily view upcoming appointments and manage your tasks list.

menubar

If you have any questions leave a comment.  Good luck getting organized!

  1. I’ve been playing with calendars and subscriptions a lot lately, with the intent of publishing one online for members of an organization I work with. Why did you choose Google Calender for yourself (and doing all this work to make an easy access app), when you have iCal already? What were your pros/cons?

    Share
  2. I’m sorry if I’m missing something, but doesn’t the google notifier already do this for Mail and Calendar? To the best of my knowledge tasks are not included in the notifier, but it does work for Calendar….

    Share
  3. I’ve been playing around a lot too. I settled on MobileMe for a long time, and it worked pretty well with over-the-air synchronization of contacts and calendar information. My issue was the MobileMe’s calendar site. It was extremely buggy and limited in functionality.

    I read about Google Sync, and learned that (for free) I could have all of my contacts and calendar information synchronized between my iPhone and computer(s) automatically over-the-air. I don’t even need to use iCal anymore (although it is automatically synced because of CalDAV). I use Fluid (obviously!) instead.

    Share
  4. Hey CP Stanley. Yes, Google Notifier does accomplish the same goal for calendar. Fluid just has a different way of going about it by using the mobile calendar site. Try it out! If you don’t like it just delete the app. :)

    Also, Fluid has a ton of cool customization options if you really want to dig in.

    Share
  5. Has anyone actually gotten this to work with a Google Apps hosted calendar? It prompts me to login but when I enter my username and pw it opens a “login error” page in my main browser. Even entering username and pw on that page fails.

    Share
  6. Hey Eric. Try this:
    Go to Preferences.
    Click on Advanced.
    Click “Allow browsing to any URL”.
    Try logging in again.

    Share
  7. Thanks, David – that did it.

    Share
  8. Been using this as an iCal replacement for a while. It’s a great alternative. My only grip is that I can’t see today’s date at a glance like I could when I had iCal in my dock.

    I have istat set up in the menu, but it’s not the same.

    Any ideas?

    Share
    1. You should be able to adjust you data time settings in the menu bar to give the date (at least as of 10.6)

      Share
  9. I use the combination of Google Calender (multiple Calendars for various groupings with most shared with my wife) and Spanning Sync to sync these (and my contacts) to iCal. These then get to my iPhone via iTunes syncing (bi-Directional syncing). Its been working beautifully.

    Share
  10. In fact you don’t even have to change the user agent… I use the iGoogle URL to serve a more compact and computer-friendly (as opposed to touch) interface.
    https://mail.google.com/tasks/a/%5Bdomain.com%5D/ig
    https://mail.google.com/tasks/ig

    You can also replace ‘ig’ with ‘android’ for the Android’s interface, or ‘iphone’ for the iPhone’s (though it may display a message that it’s not compatible with your browser).

    I would also suggest assigning a shortcut key (mine is Alt-T) to make access lightning-quick.

    Share
  11. Thanks David you helped me!

    Share
  12. Philip Johnson Thursday, April 23, 2009

    How does one undo this?

    Share
  13. You can right-click on one of the new menu bar items and convert back to a standard application. Then it won’t be in your menu bar.

    Share
  14. For a standalone Google Tasks app for your PC that provides Google Tasks inside an application window, check out taskalone at http://code.google.com/p/taskalone/

    Share
  15. “taskalone” is also for mac?I believe that it’s only for windows.

    Share
  16. David & crew:
    I LOVE the idea of doing this – I’ve gotten everything lined up, but can’t for teh life of me locate the “Allow browsing to any URL” in firefox > preferences > advanced.

    (I’m running Firefox 3.5.5)

    What am I missing?

    Share
    1. You should actually be using Fluid.app to do this. Not Firefox. See step 1. :)

      http://www.fluidapp.com

      Share
    2. Got it.
      Not in Firefox’s preferences.
      Not in Fluid’s preferences.
      But in Tasks’ preferences.
      Right click the “tasks” icon in menu bar. Then goto preferences, etc.

      Share
  17. I found the following URL better for Google Calendar:

    http://www.google.com/calendar/gp?source=mog&gl=us#~calendar:view=m

    Share
  18. I want to be this smart … lol, you guys rock. I’ve been dying to get tasks on my desktop. Good job and keep up the good work!

    Share
  19. I am stumped on getting the Google Apps calendar to work with this. I got my personal Google Calendar working fine but not my apps. I guess i am very confused as to where you are doing these steps:

    “Go to Preferences.
    Click on Advanced.
    Click “Allow browsing to any URL”.
    Try logging in again.”

    What preferences??

    Share
  20. @Leah

    The preferences for the new SSB you created. To summarize:
    1. Open fluid
    2. Enter the Url, etc. to create the SSB e.g. Google Calendar
    3. Launch the SSB (Google Calendar), if its a hosted app, you get a login prompt.
    4. Now go to preferences (for the SSB). In my case, I called it Google Calendar, so I click on the word “Google Calendar” in the menu bar at the top of my mac.
    5. Click on the Advanced icon (little blue gear thing)
    6. Click Allow Browsing to Any Url
    7. Close the preferences box.

    Now try logging in.

    Hope that helps!

    Share
  21. pardon my ignorance, but what is step 9? Can’t seem to follow where that is and I am getting lost.

    Share
  22. user agent update for ios4

    Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

    Share
  23. Wow, great ! thanks you so much !

    Share
  24. I love this and set both calendar and tasks up without a problem. But the minute I rebooted, both were gone from my Mac’s menu bar. Anyone have any idea what I did wrong? Thanks!

    Share
  25. Jonathan Dranoff Thursday, December 2, 2010

    Dear Om,

    My wife has been on me for some time about moving my calendar to Google so that she can subscribe. This created a headache as well – my to-do/tasks list was unable to sync from iCal to Google Tasks. Now that I have a menu-embedded calendar and task display, I am more than happy to have made the change.

    Thanks!

    Share
  26. Hey !
    I am very happy to find your tutorial. I successfully created an task and calendar menu bar app. But after few weeks, the calendar app stop working. When I click the icon, nothing appears. When I convert it back to a normal app, I have my calendar in iphone format as it is supposed to be. But when I turned it back to menuextra SSB, a click on the icon is useless. I try to change the user agent to the ones I found on this page.
    Any idea ?

    Thank you

    Share

Comments have been disabled for this post