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:
JAVASCRIPT:
-
-
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).
3.7 rating from 69 votes
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
Way better and with lots of customization possibilities is this one: http://www.dynarch.com/projects/calendar/
madmaxmatze,
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.
@madmaxmatze,
can you please show us where in the article the question “Do you know of a better calendar?” is asked?
@victor,
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.
@Jamie,
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.
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.
@yoink
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. :)