Danny Iachini’s Weblog

My Nerdy Stuff

Google Calendar Bookmarklet

A bookmarklet is a piece of JavaScript which you bookmark in order to add a little piece of additional functionality to your browser and make it easily accessible.  Bookmarklets can be used to do things like change the font size or style on a website, or they can help make a task simpler.

Just the other day, I found that RememberTheMilk (I blogged about the greatness of RTM back in August) has a task creation bookmarklet (they call it a “QuickAdd“).  Using that the past couple days, I realized how handy bookmarklets could be!

When I wanted to add the Penguins remaining schedule to my Google Calendar, I figured a bookmarklet could make the task easier.  After some Googling, however, I couldn’t find exactly what I wanted.  This article‘s #4 was close, so I took it and modified it with some additional JavaScripting.

Without further ado, here is my first ever bookmarklet!

<edit>All right — WordPress won’t let me play nicely sharing a bookmarklet IN a link.  So copy the code add the bottom of this post and paste it as the location in a new bookmark in whatever is your favorite web browser. </edit>

Whenever you want to add something to your Google Calendar, click that bookmark and you’ll be at the New Event page.  If you have text selected before clicking that link, the selected text will get put in as the “What”, otherwise, a prompt comes up in which you can type a “Quick Add” such as “Dinner with Mike at 7pm tomorrow”.

Code (modified from #4 at http://googlesystem.blogspot.com/2007/07/useful-google-bookmarklets.html):

javascript: var s;
/*Figure out the selected text*/
if ( window.getSelection ) {
    s = window.getSelection();
} else if ( document.getSelection ) {
    s = document.getSelection();
} else {
    s = document.selection.createRange().text;
}
/*If there isn't any text selected, get user input*/
if ( s == '' ) {
    s = prompt('QuickAdd');
}
var re = RegExp( '[AaPp][Mm]' );
if ( encodeURIComponent(s).match(re) ) {
} else {
    s = s + ' 1pm'; /*if there isn't an AM or PM in the text, add the default 1pm time*/
}
void(
/*open a new window with this information in the Google Calendar event creation page.*/
    window.open(
        encodeURI('http://www.google.com/calendar/event?ctext='+s+'&action=TEMPLATE&pprop=HowCreated:QUICKADD'),
        'addwindow',
        'status=no,toolbar=no,width=520,height=470,resizable=yes'
    )
);
Advertisements

March 11, 2009 - Posted by | Uncategorized

14 Comments »

  1. I’m sorry about the ugliness of this post…

    The bookmarklet is pretty sweet though…

    Comment by dannyiachini | March 11, 2009

  2. Hi Danny,
    I can’t seem to get this bookmarket to work in FF. I created a new bookmark and added your code but nothing happens.
    Thanks

    Comment by andy | June 11, 2010

  3. Hey Andy,

    I believe I’ve fixed up the bookmarklet to work now (had copied over the source-code directly before, and it didn’t like the single-line comments (//) since it puts it all into 1 line (so the first comment was commenting out all the rest of the code).

    Thanks for pointing this out for me!

    -Danny

    Comment by dannyiachini | June 11, 2010

  4. Nice bookmarklet — I’m looking for a Google Calendar bookmarklet that will use the page title as the event ‘title’ and the selected text+URL as the event ‘Description’. Can you advise on how to do that?

    Comment by Art | July 7, 2010

  5. Hey Art — the way the bookmarklet works is by hitting the QuickAdd page that Google Calendar has (in the upper left-hand corner). With that, I can’t figure out a way to set the Description field, unfortunately. If you by any chance know of a way (or can find a way — I didn’t have any luck) to set a description from QuickAdd, then I’d definitely be able to do the rest!

    (Otherwise, I’m thinking a GreaseMonkey script might be the best bet — I’d be willing to learn how to make a GreaseMonkey script if you want me to! That could be a fun weekend project sometime this summer.)

    Comment by dannyiachini | July 12, 2010

  6. Danny, every ‘Create Event’ bookmarklet I’ve found uses the QuickAdd page. I also don’t know a way to set the Description field and judging by the non-response to my Google Forums question, nobody does.

    If you’d enjoy it, then by all means work on a GreaseMonkey script.

    Comment by Art | July 13, 2010

  7. Here’s a version that the text selection (if any) and the URL in the event title. You can easily cut and paste it to the description field. Works for me.

    javascript:
    var title=document.title;
    var url=’http://www.google.com/calendar/event’;
    var space=’ ‘;
    var body, popw;
    if(document.selection) {
    body=space+document.selection.createRange().txt;
    } else if (window.getSelection) {
    body=space+window.getSelection(); }
    else if (document.getSelection) {
    body=space+document.getSelection();
    } else {
    body=”;
    }
    title=escape(title)+escape(body)+’ ‘+escape(location.href);
    popw = window.open(url+’?ctext=’+title+’&action=TEMPLATE&pprop=HowCreated?QUICKADD’,’gcal’,’scrollbars=yes,width=1200,height=800,top=175,left=75,status=no,resizable=yes’);
    if (!document.all) T = (setTimeout(‘popw.focus()’,50));
    void(0);

    To use this with Google Apps, replace ‘http://www.google.com/calendar/event’ with ‘http://www.google.com/calendar/hosted/yourdomain_here/event’

    For example, if your domain is temp.com, substitute ‘temp.com’ for ‘yourdomain_here’.

    Comment by Art | July 14, 2010

  8. Danny, Thanks for this. I copied the text to [EditPlus] my favorite little editor, replaced \n with ‘ ‘, pasted to a new bookmark in SeaMonkey, and it worked first time. That is excellent craftsmanship! I’m fooling with URL variables to see if I can get it log in to various ID/PWs

    Comment by Vane Lashua | February 1, 2011

  9. This is great! Thanks for your contribution to making the Web even better!

    Comment by Z | September 23, 2011

  10. Thank you for making this. I couldn’t see a way to createiPad calendar entries direct from a webpage. With this bookmarklet in Safari I can create them on my google calendar and sync the iPad calendar so i have them available offline as well, works great :)

    Comment by Liz | May 5, 2012

  11. Thanks for all the positive feedback everyone! Glad this bookmarklet could be so useful and adaptable to work for everyone!

    Comment by dannyiachini | May 7, 2012

  12. I just switched to new google calendar layout is anyone else finding bookmarklet is not working?

    Comment by Scott_au | November 8, 2017

  13. The new calendar layout became available in October 2017. I just switched back to the old “classic” version and bookmarklet works fine. The new layout is much nicer but I really need a working bookmarklet hopefully someone knows how to fix it. I have just posted a question in Calendar Help Forum – https://goo.gl/QXayAb

    Comment by Scott_au | November 8, 2017

  14. @Scott_au — in dabbling quickly with it, I was able to get the “You select text and it populates that into the title field” functionality working:

    javascript:var s; if(window.getSelection){s=window.getSelection();} else if(document.getSelection){s=document.getSelection();} else{s=document.selection.createRange().text;} if ( s == ” ) { s=prompt(‘QuickAdd’); } var re = RegExp( ‘[AaPp][Mm]’ ); if ( encodeURIComponent(s).match(re) ) { } else { s = s + ‘ 1pm’; } void(window.open(encodeURI(‘https://calendar.google.com/calendar/r/eventedit?text=’+s+’&action=TEMPLATE&pprop=HowCreated%3AQUICKADD’),’addwindow’,’status=no,toolbar=no,width=520,height=470,resizable=yes’));

    javascript: var s;
    /*Figure out the selected text*/
    if ( window.getSelection ) {
    s = window.getSelection();
    } else if ( document.getSelection ) {
    s = document.getSelection();
    } else {
    s = document.selection.createRange().text;
    }
    /*If there isn’t any text selected, get user input*/
    if ( s == ” ) {
    s = prompt(‘QuickAdd’);
    }
    /*
    var re = RegExp( ‘[AaPp][Mm]’ );
    if ( encodeURIComponent(s).match(re) ) {
    } else {
    s = s + ‘ 1pm’; / *if there isn’t an AM or PM in the text, add the default 1pm time * /
    }
    */
    void(
    /*open a new window with this information in the Google Calendar event creation page.*/
    window.open(
    encodeURI(‘https://calendar.google.com/calendar/r/eventedit?text=’+s+’&action=TEMPLATE&pprop=HowCreated:QUICKADD’),
    ‘addwindow’,
    ‘status=no,toolbar=no,width=520,height=470,resizable=yes’
    )
    );

    The two things I changed:

    1) replacing the URL:
    http://www.google.com/calendar/event?ctext=
    with:
    https://calendar.google.com/calendar/r/eventedit?text=

    2) commenting out the time parsing / 1pm defaulting (because the new format doesn’t actually work with “QuickAdd”)

    Lemme know if this works enough for your needs or if I can help out with it further!

    Comment by dannyiachini | November 8, 2017


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: