Field Guide to Programmers

Andrew Reutter contributed a sweet new style for scal. Plus, he’s got scal working on his iPhone (hence the new style). Here’s what Andrew had to say:

I am in the process of adapting it for use on the iPhone. I’ve done two things:

1) Hammered out the attached css. The css comes pretty darn close to emulating the look
and feel of the calendar app on iPhone, without using any images. In
safari, you even get the drop shadows, though the Safari
implementation on iPhone, lamely enough, does not support the entirety
of webkit.

The one presentation aspect I was unable to duplicate without diving
into your Javascript was that the calendar app on iPhone always
highlights the current day, even if it is not the selected day. Were
you to modify scal.js to assign a specific class name to the current
day, I would be able to do so. I think it has applicability beyond the
iPhone.

2) Made _very_ minor changes to scal.js to remove the dependency on
Scriptaculous. If you change lines 141 and 142 to read:

this.openeffect = this.options.openeffect || function(e)
{$(e).style.display = ‘block’;};
this.closeeffect = this.options.closeeffect || function(e)
{$(e).style.display = ‘none’;};

then I believe your code would work just fine without including
Scriptaculous. On a mobile device, every byte counts, and with your
durations set to 0 the effect is no different than using Appear/Fade.
I would go so far as to recommend this change in your default codebase
- people can still use effects if they want to pass them in, but don’t
need Scriptaculous if they don’t want effects. There might, of
course, be implications I’m not considering, but I just made the
change to get past the fact that Appear was not defined; I am not
using open/close links on my calendar anyway.

I think adding a style class to the current day is a fantastic idea. I’m going to include that in the next release.

Andrew’s style is in the current scal.css. I’ve renamed it “iphonic”, to remove any chance Apple might see this as a confusing use of their trademarks. To see it in action, just check out the front page of the site. I’ve added iphonic as a style option in the tester.

Also, as Andrew notes above, the switch out for Scriptaculous open and closing may or may not work. More testing needs to happen in this area, but from a design standpoint I’d like to abstract scal from Scriptaculous a bit. Nothing against Scriptaculous. I just think the control would benefit from having Scriptaculous as an add-on and not a requirement.