Tutorial - create your own google calendar widget without programming

While external widgets functionality is a bit limited, they are also very simple to make. I'm going to show you how to create a BumpTop external widget without any programming skills required. I hope this will inspire someone to write their own widget. And share it with others, of course :).

This widget will create a screenshot from Google calendar and create a wall type calendar.
I heve used Siteshooter for getting the image and ImageMagick for converting it.
You have to log in to your Google Calendar in Internet Explorer, so Siteshooter can take a screenshot.

1. Download ImageMagick and siteshooter After installing Imagemagick rename convert.exe to imconvert.exe as explained here.

2. BumpTop Widgets are stored in
C:\Users\Userame\AppData\Roaming\Bump Technologies, Inc\BumpTop\Widgets (Vista) or
C:\Documents and Settings\Userame\Application Data\Bump Technologies, Inc\BumpTop\Widgets (XP).
Navigate to this location and create a new folder - name it calendar.widget (must have .widget extension). Then copy siteshooter.exe to this folder.

3. Create two more folders and name them data and images, then copy background image (i used size 800x600 in this example) to images dir and name it calendar-back.jpg.

4. Create a copy of widget.json from another widget or create a new file (check this how-to for more info about widget.json).

5. Replace application name with calendar.cmd:
"startupApplication" : { "path" : "calendar.cmd", "args" : "-run"},

6. Replace icon image with calendar.png and label with "calendar"
"icons" : [{"filename" : "calendar.png","label" : "calendar","launchApplication" : {...

7. Replace application to be launched when callendar image is double clicked with firefox and google calendar's url as parameter. Make sure to include real path of firefox. Note that backslashes are doubled.
"path" : "C:\\Program files\\Mozilla Firefox\\firefox.exe","args" : "
http://www.google.com/calendar/render"}}]}

8. create a new text file and name it calendar.cmd:
cd ..
SiteShoter.exe /URL http://www.google.com/calendar/render /Filename ' + '.\images\calendar-google.png
imconvert .\images\calendar-google.png -crop 175x150+10+155 .\images\calendar-google-s.png
imconvert .\images\calendar-google-s.png -resize 200% .\images\calendar-google-m.png
composite -gravity east -geometry +100+0 .\images\calendar-google-m.png .\images\calendar-back.jpg .\data\calendar.png
This script will take the screenshot, crop it, resize it and join it with background image.
That's it. Restart BumpTop to test the widget.
Or skip all that and get it here :).

9. To create an installer, right click on calendar.widget folder and select add to archive... from winrar's menu. Select sfx archive, advanced, sfx options and enter "%AppData%\Bump Technologies, Inc\BumpTop\Widgets" (without "); press enter to create archive.

10. Upload it (http://www.filehostingreview.com/), then come back here and write about it!

This widget only refreshes at BumpTop startup, so you may want to add it to windows scheduled tasks (under control panel).
The scrip in this example, does only the most basic stuff. If you wish to add some design, check some ImageMagick examples here.


Calendar on the center is from the example. It's not pretty, but it's all mine :). The one on the right was made with different parameters. You can find the other two widgets from the screenshot here and here.