Monday, November 5th, 2007

MooMonth – MooTools-based Calendar

Category: Calendar, MooTools

Roland Poulter recently released MooMonth, a MooTools-based calendar system. I did a brief email interview with Roland and here’s his feedback:

When did you release it into alpha?

I put the site online a little more than a week ago. It was actually kinda slapped together, I designed a logo and stuff but I didn’t want to commit to what I had. I just decided I wanted to make it available. A couple people on the MooTools Forum asked for the code, so I put the site up.

How far along is it?

I’ve been hacking at it for a while. At first I wasn’t totally convinced I could do a calendar with all the cool effects in javascript. I started with a prototype to test if it would work. It wasn’t until recently when I had some time off of work I was able to sit down for a week and totally rework everything. Progress has been much quicker since then. It been a few months of time, but I would say only a couple weeks of actual development. I hoping to get it ready for some production use in a few more weeks, but it depends how much of my free gets sucked up be the video games.

So far I have only been working on the views and transitions. I am nearly done with the “year view” which will zoom out of the current month and show all the months for a year. At this point I wish I hadn’t started on it, it looks cool but I am not sure it will be useful. After I finish that I am going to work on event functionality.

What are the Big Features?

I want the calendar to be a complete javascript calendar ready to be plugged into an app.
I intend for it to be highly configurable, for style, for performance, and for layout.

Features I’ve got for developers:

  • MooDate Date Extension (Fills in some gabs in the Javascript Date object.)
  • *MooMonth Events (Handles a collection of events with Ajax.)
  • *MooMonth Event (Create, Read, Update, Destroy events with Ajax.)
  • MooMonth Date (Uses the date extension to setup a the calendars’ date.)
  • MooMonth Size (You can choose to present the calendar with a specified width and height, or tell it to mimic an html element, or just let it fill the window.)
  • MooMonth Resize (Animate the size of the calendar.)
  • MooMonth Element (Choose to use a table structure or a div hierarchy, only the div. The table type is limited, its really only meant for “mini months”. Options are available for setting border size, label size, header size, and margin. Also it uses events for all the controls so you can change what happens when you click on a day.)
  • MooMonth Constructors (Make an calendar app, *date-picker, or customize your own.)

Features for users:

  • Multiple views: Day, Week, Month, *Year
  • View Transitions
  • *View specific controls (Clicking next when viewing a week will take you to next week.)
  • *Events
  • *Dragable
  • *Resizable

* Planned features, but not finished.

The code for MooMonth is released under a mixed Creative Commons/LGPL license and takes advantage of the MooTools JavaScript library. You can play with the calendar via the demo page.

Also, Roland is looking for help on this project so if you’re interested be sure to contact him via the site.

Posted by Rey Bango at 3:53 pm

3.9 rating from 64 votes


Comments feed TrackBack URI

did I really just read “mootools” on ajaxian?

Comment by Chris — November 5, 2007

@Chris: :)

Comment by Rey Bango — November 5, 2007

How bout some ajax on this site about ajax??? Drink you’re own cool-aid!

Comment by boodie — November 5, 2007

I wish there was a bit more talk about mootools in general. MooMonth looks like a different, fun approach compared to the static, dry calendars that we’re used to seeing.

Comment by Ed Knittel — November 5, 2007

Thanks for the mootools article, keep ’em coming.

Comment by Jade Ohlhauser — November 5, 2007

@Ed, now now.. don’t bug the ajaxians. I’m certain that they’re just as busy as we are. I suspect, however, that there will be more “talk” of MooTools as 1.2.0 is released. :D

P.S. Shameless plug: 1.2.0 is awezome :D (that’s right with a ‘z’.)

Comment by Olmo Maldonado — November 5, 2007

If only I had a project that required a calendar…d’oh :)

Comment by Will — November 5, 2007

Cool idea, but doesn’t work in IE7.

Comment by Alex — November 5, 2007

That is actually very nice :)

Comment by Thierry — November 5, 2007

Is there really any cool thing that works in IE? Why does anybody bother with IE-whatever-version?
The calendar is really awesome. I have been looking for something like this for some time, and I really hope that Roland can get all the features working just right. The demo falls apart in mobile browser that can’t handle frames (Opera Mini beta4 for example), but does ok in Mobile safari. I’ll be taking another look at it in another couple of weeks.

Comment by planner — November 5, 2007

@Everyone: The reason that *I* personally don’t post about MooTools is because I rarely see any news coming from the project. I happened to find this on some blog or something and it looked cool. As for all of the other Ajaxians, I’m sure it’s the same thing. Olmo has even mentioned on several occasions how the MooTools team doesn’t advertise their stuff. If we don’t know about it, we can’t post about it. If you have cool stuff, you can always contact me at reybango at gmail dot com or the Ajaxian site in general at ajaxians at ajaxian dot com (in the upper right-hand corner). Look forward to your MooTools news tips.

Comment by Rey Bango — November 5, 2007

I only put a frame up because I was being lazy, The calendar doesn’t require being loaded inside a frame, in fact you can goto it without the frame at:

Also, I am aware of it being slow on IE7, I havn’t tested it on IE6 but I plan to get the core calendar functionality at least working on all browsers. For all browser that can’t handle the animation I’ll make them skip it.

Comment by Roland Poulter — November 5, 2007

@planner: “Why does anybody bother with IE-whatever-version?”
What do you think, mr. smarty pants? Because a significant part of our end users actually use IE!

About the calendar, I don’t think stretching a day out like that is actually very usable.

Comment by Mike — November 6, 2007

Wow, a good article about a new plugin in the ajax/mootools world. Keep up the quality, more infos for scripts, the interview style is good, gives more information than the usual New-script news with screenshot, link and the feature list copied from the homepage. Still, here a screenshot is missing.

Comment by Harald — November 6, 2007

@Harald: Thanks man. I tried to add a screenshot but something wasn’t working correctly. I’ll have to look into that.

Comment by Rey Bango — November 6, 2007

Very cool. I remember seeing a similar flash calendar some time ago and thinking it was the coolest thing I’d ever seen. This is even more impressive :) It would be nice if there was a way to easily pop up a level of detail, but otherwise, it’s pretty darn cool.

Comment by Adam Sanderson — November 6, 2007

Great work Roland, very nice setup.

Comment by Richard Reddy — November 6, 2007

nice expanding effects. really nice design too.
one thing though, i couldn’t find where i can add events to a day. maybe i’m just viewing the demo.

Comment by Simon Jia — November 6, 2007

Nice Work and documentation, can’t wait for it to reach a beta status (and editable fields)

Comment by Alex93053 — November 7, 2007

Nice work on the Calendar, Roland. Getting some add/edit/delete event functionality will really make this a great tool. Keep up the good work!

Comment by David Walsh — November 7, 2007

Great work on calendar

Comment by custumsoftware — March 31, 2008

Leave a comment

You must be logged in to post a comment.