Our WordPress minimalistic Calendar has been very well received so we decided to share some of the knowledge behind it. This Flash Calendar Series will consist of three editions. We will first create a simple calendar that will highlight the current day. Second edition of our tutorial will then implement scrolling through months and years (forward and backward) and in final edition we will add a simple event on certain days. It will give you an opportunity to build a basic calendar with a lot of possibilities for further development.
LIVE DEMO OF FLASH CALENDAR
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/11/Calendar-flash-tutorial-first-edition.swf ” width=”570″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”132″]
STEP 1: SETTING VARIABLES
Since code is not as simple as in most previous tutorials I would recommend that you first download the source files and then follow the tutorial. We will first define all the variables that we are going to use:
var daysMonth:int; //variable that holds a value of all days in the current month
var daysNumber:int; //counter for days
var weeks:Number;//variables that hold weeks of the date
var days:Number;// variables that hold current day
var year:Number;// variables that hold current year
var month:Number;//variables that hold current month
var firstDayOfMonth:Number; // variable that holds the position of first day in current month
Variables weeks, days, year and month simply hold the value of current date. We will use those values to determine which day to highlight as the current one. Variable daysMonth holds a number of all days in current month (for example 30 for November). FirstDayOfMonth is a variable that sets the position of first day in certain month. For example november starts with Tuesday and that means that position of first day in november is set to number two. In december that number will be four.
Now add three variables that will define the size of the number holders,margin between them and color of the Flash calendar:
var shapeButtonWidth:int = 35;
var shapeButtonHeight:int = 35;
var marginBetweenButtons:int = 2;
var calendarBackgroundColor:uint = 0x1e1e20;
var calendarNumberHolderColor:uint = 0x101010;
var calendarNumberTextColor:uint = 0xEAEAEA;
var dayHighlightBorderColor:uint = 0x893827;
STEP 2: GET THE DATE
We now have to get the current date, how many days are in the current month and on which position the first day is:
var nowDate:Date = new Date();//get current date
days = nowDate.getDate() ;//get current day
month = nowDate.getMonth() ;//get current month
year = nowDate.getFullYear() ;//get current year
var firstDay:Date = new Date(year, month, 1);
firstDayOfMonth = firstDay.getDay();
var numberOfDays:Date = new Date(year,month , 0);
daysMonth = numberOfDays.getDate();
If we define date class without any parameter it will always return the current date. But we also have to get the position of first day and how many days are in the current month. We can accomplish that by using date class with parameters year, month, day,etc. In our case we use parameters year and month (values were assigned in previous step) and use them to get values for firstDayOfMonth and daysMonth.
We now have to calculate how many weeks there is in a specific month:
weeks = daysMonth/7;
if (weeks > 4)//making 5 lines in some cases when month starts with the end of the week
weeks = 5;
STEP 3: BUILD THE CALENDAR
We can now start building our calendar. Two for loops will be needed (one for columns and one for rows):
for (var i:int = 1; i <= weeks; i++) { for (var j:int = 1; j <= 7 ; j++) { [/cc] First for loop will scroll through weeks and the second one will make a break every seven days (each week). Now add the counter that will increase by one for each day: [cc lang="actionscript3"] daysNumber++; [/cc] In our WordPress Calendar we used premade graphic assets for background, text holders,events, etc. In our example we will draw shapes with actionscript. It will not look as cool but on the other hand that means our flash calendar is currently only 2kb long. We will first draw the background and position it on the center of the stage:
[cc lang="actionscript3"]
var calendarBackground:Shape = new Shape();
calendarBackground.graphics.lineStyle();
calendarBackground.graphics.beginFill(calendarBackgroundColor,1);
calendarBackground.graphics.drawRoundRect(0,0,shapeButtonWidth * 8, shapeButtonHeight * 6,8);
calendarBackground.graphics.endFill();
calendarBackground.x = stage.stageWidth / 2 – calendarBackground.width / 2;
calendarBackground.y = stage.stageHeight / 2 – calendarBackground.height / 2;
this.addChild(calendarBackground);
setChildIndex(calendarBackground, 0);//set the background to have the lowest index
Many aspects can be changed like color of the fill, width, height and roundness. Play with settings a bit to get the desired design.
It is now finally time to actually implement days of the month of our calendar. We will need two if sentences that will make some limitations:
if (daysNumber <= daysMonth){ if (daysNumber >= firstDayOfMonth){
Our two for loops produce 35 days all together and we have to get rid of 5 (for november). First if sentence will eliminate last four days and the second if sentence will eliminate the first one. This values only apply for november, they will be different for other months of the calendar. What we actually achieve here is that we always list just the days of the current month positioned properly.
We will now draw rounded squares for each day:
var dayC:Shape = new Shape(); //variable of custom class
dayC.graphics.lineStyle();
dayC.graphics.beginFill(calendarNumberHolderColor,1);
dayC.graphics.drawRoundRect(0,0,shapeButtonWidth, shapeButtonHeight,8);
dayC.graphics.endFill();
this.addChild(dayC);
To apply numbers on the days we have to create several text fields (all will be created on the fly within our two for loops):
var calendarNumbers:TextField = new TextField();
calendarNumbers.textColor = calendarNumberTextColor;
var myFormat:TextFormat = new TextFormat();
myFormat.size = 16;
calendarNumbers.defaultTextFormat = myFormat;
this.addChild(calendarNumbers);
We can now apply color of the text and it’s size. Finally we add it to the stage. Next step is crucial as we apply the actual numbers to the text fields:
calendarNumbers.text = String(daysNumber – firstDayOfMonth + 1);
All days are now positioned on the same spot. Apply following code to position them in columns and rows:
dayC.x = calendarNumbers.x = (dayC.width + marginBetweenButtons) * (j – 1) + calendarBackground.x ;
dayC.y = calendarNumbers.y = (dayC.height + marginBetweenButtons) * (i-1) + dayC.height/2 + calendarBackground.y;
First line will take care of position along x axis and second one will position the numbers properly along y axis.
STEP 4: HIGHLIGHTING THE CURRENT DAY OF THE FLASH CALENDAR
We will draw a round border around the current day of the calendar. Add an if sentence that compares the current day with the text found on days. When that condition is met draw a border around that day:
if (calendarNumbers.text == String(days)){
var borderDay:Shape = new Shape();//here we defin a shape
borderDay.graphics.lineStyle(4,0×893827);//thickness and color of border around current day
borderDay.graphics.drawRoundRect(dayC.x+1, dayC.y+1, shapeButtonWidth – 3,shapeButtonWidth – 3,8);
borderDay.graphics.endFill();
this.addChild(borderDay);//adding border to stage
}
We drew a border that is 4px thick and will appear as inner stroke (shapeButtonWidth – 3).
CONCLUSION
First edition of our Flash Calendar Tutorial series is at an end. We made a very basic calendar that highlights the current day. In next edition we will implement forward and backward buttons so we will be able to scroll through months and years, so stay tuned.
You must be logged in to post a comment.