Nov 5: How skinnable is Webical?
I had a little spare time this weekend and I wanted to try out greasemonkey for quite some time. And so I did :), with webical as my testcase. Greasemonkey is a plugin for Firefox which lets you alter html pages just before they are rendered. You can load scripts into greasemonkey and alter the DOM elements on a page.
As a testcase I created a simple Google Calendar skin for Webical. This gave me the oppurtunity to see how the html and css is build in Webical.
Skinning Webical is quite easy (but I have experience in front-end
development). I immidiately saw some changes in version 0.2 and 0.3. This has
mainly to do with element id's being different (better) in 0.3. Where
some elements, like the date switcher or the date picker would have a different id in every view (day, week and month view) in version 0.2, they have the same id in version 0.3. This makes styling a lot easier.
I guess the change in id's is part of the upgrade to wicket 1.3 (not 100% sure). I hope to refactor some more markup id's during the refactor phases to make styling even easier. And ultimately, there will have to be a skinning system in webical, but that's something for the future (even though I placed it on my tasklist).
If you want to check out the Google Calendar skin you will first have to download the greasemonkey plugin from the firefox addons page.
Once greasemonkey is installed, install this script and greasemonkey will do the rest. The script works in both version 0.2 and the development version. I have to say I created the script for the development version, but put some fallbacks in it for the demo.
After the script is installed, visit demo.webical.org and log in. You can see that Webical will look (something) like Google Calendar. A note has to be made that this is only a test and a showcase from me, so the skin will not cover the whole application and certainly is'nt perfect. The demo may also seem slow, as a lot of rendering has to be (re)done by firefox.
To disable greasemonkey, click on the monkey in the lower right corner of firefox.
Let me know what you think of the style 
