Monday, November 26th, 2007

Scal: Calendar widget for Prototype

Category: Component, Prototype

Scal is a a simple Javascript calendar based on Prototype which features:

  • Lightweight
  • Fast and easy to setup
  • Multiple Calendars can be initiated without conflict
  • Valid HTML/XHTML generated code
  • Skinnable
  • Language translation supported
  • Event Planner

To use, you simply tell it the div and callback that you want:


  1. var samplecal = new scal('samplecal', 'scalupdate');

The default look and feel isn’t quite up to Ext standards, but you can tweak that. A common use case would be to allow input type=”date” and rewire the form (or input type=”text” class=”date” for graceful failback).


Posted by Dion Almaer at 6:41 am

3.7 rating from 80 votes


Comments feed TrackBack URI

Thanks for the post, Dion!

Scal comes with a number of skins built-in. The default style is blocky and sorta ugly, true dat. For those looking for something more compact and ext, I’d recommend the dashblack skin or the slick skin.

Love the idea about rewiring input date to call scal directly!

– J

Comment by Jamie — November 26, 2007

Way better and with lots of customization possibilities is this one:

Comment by madmaxmatze — November 26, 2007

scal is intended to be a lightweight calendar/date picker. This is a feature of scal… too many existing date pickers have too much bloat.

Comment by Ian — November 26, 2007


can you please show us where in the article the question “Do you know of a better calendar?” is asked?

Comment by Viktor Kojouharov — November 26, 2007

I don’t think that matters; some people come here to find a calendar fit for their purpose, and the one max linked is really old, but an excellent choice as well, especially if you don’t want to use prototype.
Good work, it’s a functional piece of well written code, and it does as advertised. There are a few problems of course, such as CPU usage when moving months, and it doesn’t mention if you can make it appear on top of selects in IE automatically?
Anyway, seems like a good start to a calendar project, and the versioning (0.2) seems appropriate in this point of the development cycle.

Comment by yoink — November 26, 2007

I like how this widget actually uses lots of Prototype’s functions instead of that widget the other day that only ever uses the $ function.

Comment by Jordan — November 26, 2007

Thanks for the kind words. The CPU usage is still a bit high. v0.1 was a pretty big hog though so I know we can make even more improvements with subsequent releases. Ian can take the lion’s share of the credit though on the prototype usage (thanks, Jordan)… Anyway, the control doesn’t appear on top of selects automatically but I think that would be a great addition for the next rev (plus Dion’s suggestion above).

Just a general comment on other datepickers and calendars: there are a lot of controls out there and I think it’s great when folks look under the hood to find the right one for their project. Scal began with the idea of providing a very basic framework for people to build their own calendars. That’s one reason it is relatively easy to skin. I just figured that anyone picking up a control would want to tweak it (because that’s what I would do). Of course, if you just want to slap something in and go (and there’s nothing wrong with that) there are plenty out there to choose from.

Thanks so much to the community for providing great feedback. Not sure why calendars and datepickers get so much attention, although working on them can be habit forming. :)

Comment by Jamie — November 26, 2007

Leave a comment

You must be logged in to post a comment.