Solved: linking Google Apps calendar and gmail.com calendar on your Android device

Yesterday I got my brand new android phone. At the very first startup of the device you’re asked to submit your Google account credentials and then it magically sets up your mail, calendar and contacts. I used my personal Google (gmail) account as default account for this.

At my studio we use Google Apps for all our work related stuff. So beside my personal Google account I have an Google Apps account.

The problem with the default phone setup is that your Google Apps calendar is not automatically synced with your phone (also read this blogpost that explains the issue). There’s no option on android devices to change the google account the calendar syncs with. You’re stuck with the Google account you entered at the very start.

The fist thing you think of is to share you Google Apps calendar with your regular Google account. Because if you regular Google account has access to that calendar your phone should too. Should take you more than 5 minutes. Right? Well not quite…

The good news it that it is possible to get this setup working in a way that doesn’t require any nasty hacks or tricks. The bad news is that it took me half a day to get this setup to work.

The first thing you need to do is to login into your Google Apps management dashboard and change / check your calendar sharing options. They must be set to “Share all information, and outsiders can change calendars”. If you don’t select this option you won’t be able to edit the events, just view them.

Google Apps

Now you need to go to your Google Apps calendar you want to share with your personal Google account. This is one of tricky parts in getting this setup to work. Sometimes the option to set a calendar to “make changes AND manage sharing” (see below) won’t be available. Even if you’ve selected the right option in your Google Apps dashboard. I don’t know if this has to do with a time delay or just a glitch in the system. All I can say is if you don’t see the option to “make changes AND manage sharing” just keep trying. Eventually it will show up.

31Volts - Calendar

After you’ve shared your Google Apps calendar it will show up in your “My calendars” personal Google calendar account (see below).

Google Calendar

You should think that the only thing left to do is to select the calendar on your phone. Easy does it right…
Well while fiddeling with this setup I noticed that even though the Google Apps calendar is in “My calendars” it won’t show up on my lovely android phone. Again I have no clue why but I just kept playing with the setting on the Google Apps dashboard and “share this calendar” in my Google Apps account and eventually it showed up on my phone.

To check if your setup works, open up calendar on your phone. Go into the calendars selection option.

Cam

If everything went according to plan you should see the shared calendar in the list. If it works the calendar should show up immediately (no need to wait for 5min or something). Don’t forget to check it so that it syncs.

Cam

If you follow all the steps it’s a pretty straightforward procedure which you can do in under 5 minutes. The thing that messes it all up is that it sometimes just doesn’t work…

Limitations
One limitation in this setup is that when you edit an event created by the Google App user on your phone it won’t update that event. Rather it will create an edited copy of the event and add it to the calendar. Update: I’ve noticed that this is not always the case. Keeps getting more and more confusing…

Another limitation is that you can’t set the privacy a new event on your phone.

Pure HTML ioBridge Proxy example (no javascript)

I described earlier how you can use the ioBridge proxy as an easy API to control your ioBridge module with anything that can make a http call. The examples I in that post and also in the one on how to control your Serial LCD both utilize Javascript. There might be situations where you can’t (or don’t want to) use Javascript, for instance on an phone with an outdated browser. The good thing about the ioBridge proxy is that you don’t have to use javascript at all, just create correctly formed urls to control the ioBridge module.

There are just 3 url’s that let you control everything:

  • Execute widget / get value: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx
  • Set the digital output state of a widget: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=[0|1]
  • Set the value of a serial widget: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=somevalue

I’ve created an example that uses only plain HTML. The examples uses an iFrame as target for the links, this prevents the browser from navigating away from the current page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>ioBridge Proxy API example</title>
  </head>
  <body>
    <div id="container">
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx" target="placeholder">execute</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx" target="placeholder">getValue</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=1" target="placeholder">setState(on)</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=0" target="placeholder">setState(off)</a>      
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=abcd" target="placeholder">setValue</a>
    </div>
    <iframe id="placeholder" name="placeholder">Your browser does not support iframes. Too bad for you.</iframe> 
  </body>
</html>

And here’s a example on how to control the LCD just by using HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>ioBridge Serial LCD control</title>
    <style>
      textarea {
        color: #8DF; 
        background-color: #023; 
        padding: 0.25em;
        margin: 0em;
        line-height: 1.2em;
        border: 1px solid #000; 
        font-size: 36px; 
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div>
        <form action="http://yourserver.com/iobridge-proxy.php" method="get" target="placeholder">
          <textarea row="2" cols="16" id="message" name="value"></textarea>
          <input type="hidden" name="widgetID" value="xxxxxxxxxxxx" />          
          <input type="submit" value="Submit" />          
        </form>
      </div>
      <div class="pane">
        <h2>General</h2>
        <ul>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%FE%01" target="placeholder">clear screen</a></li>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%7C%9D%FE%0C" target="placeholder">LCD on</a></li>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%7C%80%FE%08" target="placeholder">LCD off</a></li>
        </ul>
      </div>
      <iframe id="placeholder" name="placeholder">Your browser does not support iframes. Too bad for you.</iframe> 
    </div>
  </body>
</html>

Flickr.com