Wednesday, November 28th, 2007

MooTools Calendar Component

Category: Calendar, Component, JavaScript, MooTools

We just featured SCal, and now we have a MooTools Calendar component created by Aeron Glemann.

I have tried to make Calendar as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks. View the Calendar stylesheet for examples of the CSS; see the Styling Your Calendar section in the Manual for references to the XHTML.

You create the beast via:


  1. myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1 });
  2. myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard', ... ], direction: 1 });
  3. myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny', ... ], direction: 1 });

And you end up with some pretty stuff:

Mootools Calendar

Posted by Dion Almaer at 7:58 am

4.1 rating from 98 votes


Comments feed TrackBack URI

Does anyone have a mirror? It’s impossible to get to the example site right now.

Comment by Ed Knittel — November 28, 2007

I stumbled onto Aeron’s site yesterday and saw this. Probably the best calendar features I’ve seen yet. Kudos to Aeron. The third example rocks!

Comment by David Walsh — November 28, 2007

Came across this component a few days ago (when the site was available) and it really is a cool thing. Hanging in another language is simple, just like styling it, blocking certain dates etcetera.
Hope it gets back online soon.

Comment by JulesJ — November 28, 2007

Why does every calender out there insist on using tables?? It is quite simple and fame more flexible for CSS styling to use divs…. It was nice to see the the SCal lib used divs…

Comment by Alex Duffield — November 28, 2007

Just because you can use divs doesn’t mean that you should. Semantically, a table (since it is technically a table of data) or a list would be the better solution in this case than divs.

Comment by Andy Kant — November 28, 2007

Alex, it’s more semantically correct to use tables for calendars. It’s tabular data.

Comment by Lim Chee Aun — November 28, 2007

OK. that said, this is quite the nice lib!

Comment by Alex Duffield — November 28, 2007

Yaaaaayy!!!!! I’ve been using the older Dynarch calendar because it’s really easy to implement multiple instances, and I’ve been using Mootools to unobtrusively insert the calendar popup buttons. It’s a pretty big file though, 2100+ lines if you include all three js files. If this gets back online I’ll definitely check it out

Comment by Mike Ritchie — November 28, 2007

why it don’t have simple and quick selection of month and year? take a look and ms ajax calendar, i think it has very good usability

Comment by Anonymous — November 28, 2007

Looks to me like just an other datepicker!

Comment by seloh — November 28, 2007

This is great! I’ve already used it in a project! The only thing I see that it’s missing that the dynarch calendar has is the embedded time picker (useful for DATETIME fields rather than having to seperate them out and re-build it into one value server-side), so hopefully that will be included in a future version. Also brilliant is the Slideshow class by the same author:

Comment by Michael McCorry — November 28, 2007

I’ve said it before. It is nice to see components of this quality starting to become more frequent for Mootools. A good UI library is about the only thing Mootools is lacking right now.

Comment by Site Smart — November 29, 2007

Nicest most stylish looking calendars I’ve seen.

Comment by Pete B — November 29, 2007

Hi, where can i define the position of the calendar?
In my Site the calendar opens ~200px above the input-element.

THX, great job ;-)


Comment by conny — December 11, 2007

Cool calendar!
This ajax calendar and datepicker is also worth checking. It’s a replica of the Vista taskbar calendar with side-to-side sliding and such.

Comment by 00Mark — May 27, 2008

u provie all the details about calender is very useful to me

Comment by machineryhouse — June 5, 2008

Leave a comment

You must be logged in to post a comment.