Our WordPress minimalistic Calendar has been very well received so we decided to share some of the knowledge behind it. In our first edition of Calendar tutorial we implemented a simple calendar that showed the current month and highlighted the current day. We will make a step further and add forward and backward buttons that will allow us to scroll through months. Calendar will be redrawn each time so the positioning of days is always correct.
LIVE DEMO OF FLASH CALENDAR
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/11/Calendar1-scrolling-through-months.swf” width=”570″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”134″]
STEP 1: NEW VARIABLES
We will add a few new variables but we will not list them all, please look at source code for reference. The most important variable that we will add is an array that will hold names of the months:
var listOfMonths:Array = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];
These are the names of the months that appear on the calendar. If you wish to translate the months you can simply replace the names listed in this array.
STEP 2: DRAW FORWARD AND BACKWARD BUTTONS
Code is already pretty complex so I would recommend that you download the source files first since I will not be quoting all the code here so our tutorial can be more clear and straightforward.
We will follow our guidelines from the first part of our tutorial and will not add any external assets to it. This will make sure our calendar is very lightweight (final version is only 3kbs long).
We will draw two triangles that will represent forward and backward buttons. Use the following code to draw the forward button:
var buttonForward:MovieClip = new MovieClip();
buttonForward.graphics.beginFill(0xFFFFFF);
buttonForward.graphics.moveTo(forwardButtonSize/2, 5);
buttonForward.graphics.lineTo(forwardButtonSize, forwardButtonSize+5);
buttonForward.graphics.lineTo(0, forwardButtonSize+5);
buttonForward.graphics.lineTo(forwardButtonSize/2, 5);
buttonForward.rotation = 90;
buttonForward.x = calendarBackground.x + calendarBackground.width;
buttonForward.y = forwardButtonSize*1.5;
this.addChild(buttonForward)
We will now add a hand cursor over the button and add an event listener to it (on mouse click):
buttonForward.buttonMode = true;
buttonForward.addEventListener(MouseEvent.CLICK, ForwardMonth);
We will now draw the backward button also, the only difference is that the rotation is now -90. We will call the function ForwardMonth each time a user clicks on the forward button and function BackwardMonth each time user clicks on backward button.
STEP 3: SCROLLING THROUGH MONTHS
Function ForwardMonth is actually pretty simple. We will first empty all sprite containers so we always start drawing from point zero. We now have to either add or substract one month. When we move forward we have to add one year once we reach the last month. Now we get the position of first day and call the main function again. Function ForwardMonth now looks like this:
function ForwardMonth(evt:MouseEvent):void{
for (var i:uint = dayHolder.numChildren; i > 0; i–){//removing all children
dayHolder.removeChildAt(i-1);
}
for (var j:uint = calendarNumberHolders.numChildren; j > 0; j–){//removing all children
calendarNumberHolders.removeChildAt(j-1);
}
for (var k:uint = monthsHolder.numChildren; k > 0; k–){//removing all children
monthsHolder.removeChildAt(k-1);
}
for (var l:uint = borderHolder.numChildren; l > 0; l–){//removing all children
borderHolder.removeChildAt(l-1);
}
for (var m:uint = yearsHolder.numChildren; m > 0; m–){//removing all children
yearsHolder.removeChildAt(m-1);
}
month++;
if (month == 12){//moving to next month
year++;
month = 0;
}
var firstDay:Date = new Date(year, month, 1);
firstDayOfMonth = firstDay.getDay()
daysNumber = 0;
createCalendar();
}
Function BackwardMonth is pretty much the same apart from the part where we substract months and years:
if (month == 0){
year–;
month = 12;
}
month–;
CONCLUSION
We will not list all the changes made to the source file from the previous version since I would like this tutorial to be as clear and straightforward as possible. Each part is explained in the source files and you shouldn’t have any problem following the mechanics behind the calendar. Our final edition of Flash Calendar Tutorial will implement a simple event on a certain day, similar to our WordPress Multi Events Calendar Plugin.
[download id=”134″]
You must be logged in to post a comment.