Monday, July 11, 2005

Calendar.js followup

Well, I polished off most of it today at work. Naturally I can't share the code, but here's a few tips to get you on your way:

Logging helps. Even if it's just say, a class you write that manages the dirty work of adding spans to a div for messages, log feedback can be invaluable if you're like me and can't figure out how to use Firefox's Javascript Debugger (though the Javascript Console is priceless!), or you need to test in IE or other browsers.

You can dynamically create a new member field anytime, anywhere. When you need to temporarily store some data or event scoped to a calendar, creating a new member, even from functions that aren't members of the calendar itself, can be helpful. Defining your own attributes is a real nifty way to pass values (though I don't know if it would validated under the XHTML strict DTD).

Don't be afraid of doing too much about performance. When the calendar is active, that means the user has given it focus. So as long as you don't chew up all 5GHz on that quad processor development box you have, you'll be fine as long as it looks fine to you. As a general rule, I'd say that 30% usage on my P4 2.6HT at work is acceptable (since it's HT, 50% would be close to effectively maxing out CPU).

What about date-ranges? Instead of setting the inputBox and hiding everything onclick of a day, couldn't we maybe have a property that tells the "control" it's in Range mode and to stay open for another click? That way instead of the typical two-calendar setup to represent date-ranges, and who knows how many clicks if you need a range outside of the current month (say 8+ as a guess), you could cut the whole thing down to two clicks. Mouse over the year, the month, click the day, mouse over the next year, month, and click the day for the end of the range, and the input box could be set to "1/1/2003 - 7/11/2005" for example. Nifty huh?

Absolutely positioning an element (placeHolder), absolutely positioning a child element of the first (dayBox), and then sticking a table in the second element (dayTable) results in really funky rendering in Firefox. The solution is to not set position = "absolute" on the child element, and instead set position = "relative" on the table. This way we can line up the table with a given month's offsetLeft.

Figuring out how to apply a different style to the table cell containing today's date can be a minor nuiscance. Figuring out how to apply a different style to the currently selected date was a real pain for some reason.

If you need the calendar to overlay select boxes, you can use an iframe and stick the placeholder in that. Just make sure you whip up a blank.html page, and set the src on the iframe to it so you don't get security warnings when running under SSL. Also, you'll need some browser specific shenanigans since IE doesn't support .appendChild() for iframes and both IE and Firefox access the document element of an iframe differently. (I think it's .documentContent or something for Firefox if I remember correctly.)

I know, probably sounds like more work than you want to do, and hey, I wouldn't blame ya. I hate trying to extend other people's code generally. But if you can spare the budget (it took me the better part of the day to finish it), then all bragging aside, this is easily the nicest calendar control I've used personally, and the best part is, it doesn't matter what language you're using. ASP.NET, ASP Classic, RubyOnRails, PHP, JSP, etc... nothing language/platform specific here.
Comments: Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?