A Demo Calendar Application with JavaScript/jQuery

I recently completed a JavaScript tutorial on HTML.net. As I was working on it, I had the chance to go over some great methods of the Date object and felt that it'd be fun to challenge myself with some of the stuff I could do with it.

This is how I came about coding a JavaScript calendar demo application. After all, what's more appropriate to the New Year than a calendar!

What can my calendar application do?

I love jQuery UI components, and the fantastic jQuery calendar is one of my favorites. I'll keep using it in most of my projects. Therefore, this demo app is not a replacement for using the jQuery calendar widget.

However, I think it's good to challenge oneself coding something completely from scratch, and almost completely drawing on one's own strengths. I say 'almost', because I still use jQuery in my code, for which I'll never finish to say thank you to the jQuery community.

This unpretentious calendar demo loads with the current date already selected, as shown in the image on top.

The user can move backwards and forwards among the months of the year by using a Back or a Next button, and select a date on the calendar. On doing so, a message is displayed to the user containing the current selection:

The year 2012 is the only hard-coded value, which means that at the moment it's not possible to move through the years.

That's all, no fancy effects or complex functionality involved. However, this doesn't mean that the project didn't present its own challenges, or that a lot goes on under the Date object and jQuery hoods.

My calendar demo application code

Here are some bits of the code I used. The complete demo is available on my website

The HTML structure

The JavaScript code relies on appropriate HTML scaffolding. However, I've kept the HTML as concise and semantic as possible. The entire calendar component is enclosed in a div element with the id of "container". Inside this div, are nested the div elements containing the months section with the buttons to navigate through the months, the headers for the days of the week, and the date numbers as link elements.

Unlike most calendar apps that are coded in a table element, my calendar uses div elements styled in a somewhat tabular format.

One final point: each div element enclosing a month has a number as id value corresponding to the value returned by the getMonth() method of the JavaScript Date object, that is, 0 for January, 1 for February, 2 for March, etc. And each div containing the days of the week has an id value corresponding to the appropriate week day, that is, Sunday, Monday, etc.

<div id="container">
<h1>Calendar</h1>
<div id="months" class="MonthsDiv">
<div id="monthNav" class="MonthNav">
<input type="button" id="navBack" value="« Back" />
<div id="0" class="Month">January</div>
<div id="1" class="Month">February</div>

<!-- rest of the months go here -->

<input type="button" id="navNext" value="Next »" />
</div>

<div class="ClearFix"> </div>

</div>

<div id="Sunday" class="Day">
<h2>Sun</h2>
</div>

<div id="Monday" class="Day">
<h2>Mon</h2>
</div>

<!-- the rest of the days up to Saturday go here -->

The structure is quite simple but very important to the working of the JavaScript code.

Also important is the CSS, not only in terms of appearance, but also of support to the functionality of the application. In fact, the dates are floated to give the impression of a real calendar, the date highlighting functionality depends on the appropriate CSS classes being applied, the month div elements are all stacked one on top of the other and the z-index style declaration will play a crucial role in singling out the month div on display.

If you'd like to have a peek at the CSS document for this calendar demo, please visit the live CSS document.

The JavaScript

The JavaScript is quite readable and not that complicated at all. I built a JavaScript object called myCalendar, and stuffed all calendar's properties and methods in there.

What I found a bit challenging was to figure out a way to get each date in the calendar fall under the appropriate week day. Besides, I had to figure out how to leave a space on the first week of each month under those days that still belong to the last days of the previous month.

For more clarity, here's an example of what I intended to achieve:

Because February begins on Wednesday, my program had to figure out when to draw those dashes (--) and leave a blank space under Sunday, Monday, and Tuesday. Eventually, I came up with not too elegant a solution. Perhaps, there's some sort of algorithm to achieve this, I'll look around.

Here's the method that builds the actual calendar:

buildCalendar: function(month, numbOfDaysInMonth) {
//delete calendar if one exists already
$(".Day").children(":not(h2)").remove();

//loop over each days in the selected month
for (var i = 1; i <= numbOfDaysInMonth; i++) {
var myDate = new Date(2012, month, i);
var dayOfMonth = myDate.getDate();
//this method returns days of week from 0 to 6
var numDayOfWeek = myDate.getDay();

//assign a name to the day of the week 
//returned as number
var dayOfWeek = myCalendar.getDayName(numDayOfWeek);

//append days of the month under appropriate week day
if(dayOfWeek == "Sunday") {
//if the first day of the month is not a sunday
//print the date lower (leave the space blank --)
if (dayOfMonth > 1 && dayOfMonth < 8) {
//between 2 and 7 leave -- 
$(myCalendar.sunday).append('<p class="Dash">--
</p><a href="#" id="day' + 
dayOfMonth + '">' +  
dayOfMonth + '</a>');

//else day is 1 or higher than between 2 and 7
} else {
//In this case do not leave any blank spaces or -- 
$(myCalendar.sunday).append('<a href="#"   
id="day' +dayOfMonth
+'">' + dayOfMonth + '</a>');
}
}

The rest of this method follows this pattern up until the last day of the week, that is, Saturday.

Conclusion

To view the live application, visit this page. You can access the CSS file here, and the JavaScript file here.

Setting oneself small challenges and overcoming them is always deeply satisfying. What do you do to get better and better as coder?