Revisiting the JavaScript Calendar Control – Part 1

Tame the scripting beast. Check out The Little Book of JavaScript!

A few years ago, I wrote a calendar control for a Code Project article. Although I’ve used it myself several times, and despite the fact that people still appear to be using it, I can’t help but cringe every time I look at it again. Every time, the thought that comes to mind is “It could have been so much cleaner in jQuery…”.

Well, the time has come to bite the bullet and see how it can be pulled off again. Rather than going over the whole thing in one go though, we’re going to take it in steps over a number of posts to implement a feature or a group of features, so we can look each in slightly more detail. This is as much for my benefit as everyone else’s. If anyone spots anything weird, inefficient, or badong in these posts, please let me know. I like to think of this as public code review, so, you know. Bring it on.

We can rebuild him – we have the technology

The posts will be divided as follows:

  • In part 1 (this post), we will deal with the display of a simple static calendar.
  • In part 2, we will add the facility to pick a date, and to switch the month on display.
  • In part 3, we will add some sanity checks, and the ability to display events on given days.

And with that, on to the post itself. Continue reading

An Up/Down control in jQuery

Make machines do your bidding with JavaScript. Check out The Little Book of JavaScript!

Recently, I needed to write an up/down selector – you know the sort, it’s where you select a number by clicking on an up or down arrow. Since they can be useful for other things besides numbers, I gave it the plugin treatment.

Most of the information about the plugin can be found in its documentation page.

Also available is a slightly beefier styled and animated demo of the plugin.

If you’re just interested in the plugin itself, you can find it here.

Attaching data to elements in jQuery

Bring on the scripting! Check out The Little Book of JavaScript!

This morning, I found out about a very useful jQuery function going by the unassuming name of data. This fantastic little beast creates a data store for an element, and lets you store just about anything in there.

One of the ways in which this can be used is to attach functions to an element, and using them when required. To demonstrate the usefulness of this feature, I wrote two versions of a simple validation system. In one, we use the data function to assign one or more validators to an input box [Example 1: using $(x).data()]. In the other, we iterate over the inputs and check them against validators as needed [Example 2: not using $(x).data()]. Continue reading