How to realize a calendar with Mootools (STEP I)

Hi all, and welcome to Mootools calendar course.

First of all, as usual, the demo:

HERE A LINK TO MY MOOTOOLS CALENDAR

And now some explanation:

In your html code add a layer like this:

<div id="cal"></div>

The attribute "id" is important beacause you'll use it for istance of your javascript calendar.

And now let's go with the first rows of our js.

In this lesson we introduce the method initialize and the main options of our class.

Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(), 0, 1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()) / 7);
}


var Calendar = new Class({
Implements: [Events, Options],
options: {
id: '',
dateObject: new Date(),
where: ''
},
initialize: function(options) {
this.setOptions(options);
this.id = this.options.id;
this.dateObject = this.options.dateObject;
this.where = $(this.options.where);
this.where.set('html', '');
this.cal = null;
this.wait = new Element('img', {
'src': 'images/wait.gif'
});
this.wait.setStyle('margin-left', '38%');
this.wait.setStyle('margin-top', '18%');

this.body = $(document.body);
this.buildBody();
this.header = this.options.header;
this.length = this.getLength;
this.month = this.dateObject.getMonth();
this.date = this.dateObject.getDate();
this.day = this.dateObject.getDay(); //console.log("week "+this.week);
this.year = this.dateObject.getFullYear();
this.getFormattedDate = this.getFormattedDate;
this.dateObject.setDate(1);
this.firstDay = this.dateObject.getDay();
this.dateObject.setDate(this.date);
this.days = null;
this.months = null;
this.marginLeftDay = 0;

this.days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var set_sipario = function() {
$('sipario').setStyle('display', 'block');
};
},


First of all we gave a new extension to the base prototype of javascript Date object. In this way we have a new method called getWeek that return the week number in the year.
After that we started declaring our Calendar class as usual in Mootools. To use fireEvent method and Options, we implemented this main object of MooTools Core. After that we just started with the initialize method (our costructor, for OOP developer), and here we just implemented options and wrote all the variables we need into the others method that we'll see next time. All declaration, as AGILE developing teach to us, are self explanated. If it's not, write your question on comment and I'll answer you.
I just want to stop your attention on the last steps of this first lesson about js/mootools/calendar:


this.days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var set_sipario = function() {
$('sipario').setStyle('display', 'block');
};

The first and the second objects are useful to write the header of our calendar, the last function (set_sipario) is called to put a layer over our page. In this way we can make all our works behind the SIPARIO layer, and create our table object and function, when we'll finish it, we'll make disappear tha SIPARIO and we'll find our calendar ready to go.

Follow next lesson for other particulars.
Nunzio Fiore

(You can find a special implementation of Calendar in this web application: http://www.moonkiki.com/moonkiki/moogenda/ )