MooTools Events Calendar – Web Embeddable Javascript Calendar

Month ViewThis is the official release of the unofficial MooTools Events Calendar. It is an embeddable web calendar that was built using the MooTools JavaScript framework. Currently, it is still under development, but may be sufficient for your needs. Check out the project page here: MooTools Events Calendar


v0.3.0 (August 5, 2009)

  • Accepts events that span across multiple days
  • MooTools v1.2.3 required.

v0.2.2 (April 11, 2009)

  • Fixed a rendering problem for people outside of the U.S.
  • Added the option for weeks to start on Monday

v0.2.1 (Feb 9, 2009)

  • bug fix - usage error with parseInt(). Events wouldn't load on the 8th and 9th of a month.
  • HTML allowed in events. This allows for events to link elsewhere.

v0.2.0 (Feb 1, 2009)

  • uses plug-ins or direct loading through the constructor for events
  • uses iCal/ISO 8601 dates/times for event input
  • different style sheets can be used for 3 different sized calendars

v0.1.0 (Oct 3, 2008)

  • month, week, and day views
  • tool tips for month view events (using Tips)
  • scrolling day events for month view (using Scroller)
  • events loaded manually or possibly through a JSON feed

Tags: , ,

15 Responses to “MooTools Events Calendar – Web Embeddable Javascript Calendar”

  1. Leviathen says:

    The best calendar i ve seen!!!
    excellent work
    THANK YOU for sharing!!!

  2. cssprodigy says:

    Very Nice!!! Can’t wait for you to do the google calendar feed, that would be awesome. Good luck!

  3. Actually I’ve now got this awesome calendar working with a PHP Snippet for MODx ( running the simplepie rss reader script. So I can read my google calendar and load its dates into this calendar on the fly. Thanks so much for the calendar! I’ll keep an eye on this if you do any further development.

  4. Michael says:

    Awesome Calendar! In combination with an Ical Parser it’s perfect! great work!

  5. Makoto says:

    Awesome! Thank you.
    I am relatively new to mootools but I was able to follow your work and I got the calendar to do weekly reoccurring events as well as weekly multiple day reoccurring events. I also managed to create a mini calendar that shows highlighted days if any events are present. One thing I was after and couldn’t manage on my own was to have two or more instances of the calendar operating independently of each other, hope that feature is in the mix!
    Aloha and thanks again!

  6. Matteo says:

    Great works !!

  7. Tasveer Singh says:

    Awesome Calendar! I’m really loving it 🙂

    I’ve made a small change which may be useful to others… Basically I enabled a URL link for Events in the Day or Week view. The only changes are that you pass a “url” key for each cEvent, and change the CSS for “.mooECal td div.fullEvent” to include “cursor: pointer”.

    And add this to the MooECal Javascript file at line 453, replacing the existing If:
    if (this.options.view != ‘month’) { // the month view only shows a portion of the event description
    var link_url = this.options.cEvents[i].url;
    if(link_url) {
    eventDiv.addEvent(‘click’, function() {
    new URI(link_url).go();

  8. Tasveer Singh says:

    New code for URL linking for Day/Week view… fixed the bug in the last submission.

    This is to pass a ‘url’ key and value in your cEvents and you can click on it in Day/Week view to bring you to that page. Useful for bringing you to the central page for that Event.

    Don’t forget to include a “cursor:pointer;” in your CSS file under “.mooECal td div.fullEvent”!

    And add this to the MooECal Javascript file at line 450, replacing what’s there:

    var eventDiv = new Element(‘div’, {
    ‘html’: time + ‘ ‘ + this.options.cEvents[i].title
    }).store(‘date’, eStart.getDate()).store(‘url’, this.options.cEvents[i].url).inject($(‘day’ + eStart.getDate()).getChildren(‘div’)[0]);
    if (this.options.view != ‘month’) { // the month view only shows a portion of the event description
    eventDiv.addEvent(‘click’, function() {
    new URI(this.retrieve(‘url’)).go();

  9. engin says:

    thanks for sharing

  10. Jonathan M. says:

    I’m curious, is there a way to house the JSON dataset inline with the HTML page, rather than as a separate .js file?

    In SIMILE Exhibit, which is surprisingly similar, there is an inline method to pipe the data to the displayObject from within the same HTML page. That way the known JSON data could be embedded right in the page, perhaps in a variable. I tried to rework things in this way, but I seem to have missed it and my JS skill it pretty low.

    Any ideas?

  11. Trevor Orr says:

    I added an option for the events for make it a yearly event.

    Just add yearly: true to the event.

    Here is the code added to the loadCalEvents function:

    eYearly = this.options.cEvents[i].yearly;
    if (eYearly) {

    This goes right before the following line.

    if((eStart >= this.viewStartDate && eStart = this.viewStartDate && eEnd <= this.viewEndDate)){

  12. Michael says:

    Thanks, this is fantastic. FWIW, I’d like to put in a vote for somehow showing the location of events in week and day views– maybe a new Tips like on the month view.

  13. Christoph Aust says:

    I cannot find a way to format the date and the time into german formats.
    Anyone got a hint for me?
    Thank you in advance!

  14. Dan says:

    There is a bug in the date.parse() method found in older versions of MooTools More that appears on the 31st and possibly the 30th of any month containing those dates. The MooTools team fixed the bug in a recent release.