Wednesday, November 28th, 2007
MooTools Calendar Component
Category: Calendar, Component
, JavaScript
, MooTools
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:
JAVASCRIPT:
-
-
myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1 });
-
myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard', ... ], direction: 1 });
-
myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny', ... ], direction: 1 });
-
And you end up with some pretty stuff:
Related Content:
4.1 rating from 97 votes
Does anyone have a mirror? It’s impossible to get to the example site right now.
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!
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.
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…
@Alex
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.
Alex, it’s more semantically correct to use tables for calendars. It’s tabular data.
OK. that said, this is quite the nice lib!
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
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
Looks to me like just an other datepicker!
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: http://www.electricprism.com/aeron/slideshow/
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.
Nicest most stylish looking calendars I’ve seen.
Hi, where can i define the position of the calendar?
In my Site the calendar opens ~200px above the input-element.
THX, great job ;-)
Conny
Here its a good too but there is some issues the code. you can view here a very good calender of mine
here:
http://www.galaxyweblinks.com/calendardemo/service/main.php
http://bookingengine.galaxyweblinks.com/
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.
thanks
u provie all the details about calender is very useful to me
thanks
http://www.machineryhouse.com