Basic JavaScript Calendar

One of the things that you can do with Javascript is create a calendar that will automatically show the entire month, and highlight the current day of the month. This may seem like a complicated task to do, but if we just break down what we need to have in order to make a monthly calendar it is not that hard of a task.

First, let's look at what variables are needed for the calendar. We know we need the current month, day, and year. These are simple to get with date functions in JavaScript. Here is how we would get those variables.

 var current = new Date();
 var month = current.getMonth();
 var day = current.getDate();
 var year = current.getFullYear();

With this code we created a new variable called current, which contains the full date at the time the script is ran. We then use this variable to get the current month, day, and year.

Now that we have the current date, we need to find a few other things out, like what day of the week does the first day of the month fall on. We need to know this information so that we know where to start the first day in the calendar, if not then every month will have its first day of the week start on a Sunday, and we all know that is not correct.

To get the day of the week that the month starts on, we need to set the date by using the variables we just created. But before we do that we have to add one additional variable that will allow us to get the correct month.

 tempMonth = month +1;

With JavaScript there are some very strange things that happen when working with dates. If we were to use just the month variable in the code we are about to create, it will make the start of the month begin on the wrong day of the week. With this new variable, we can now find out when the first day of the month is.

 var tempDate = new Date(tempMonth +' 1 ,'+year);
 var tempweekday= tempDate.getDay();
 var tempweekday2 = tempweekday;

What we did was create a new date using the date function. As you can see we just used the tempMonth value, the number one, and the value for the year variable. We then use the tempDate to get the day of the week, with the JavaScript function getDay. We also duplicated the variable tempweekday, because we will be working with two copies of this variable later on.

We now need to get how many days there are in the month, that way when we create our loop we have a way to tell the JavaScript to stop the loop. We can do this with an array. In the array we will have all the total days in a month, but this raises an issue. February the number of days can change depending on if it is a leap year or not. This is an easy way to solve this issue. To find out if it is a leap year, we just need to divide the year by four and check to see if there are any remainder. Sounds simple enough, but we also have to remember that every 100 years if the year is not divisible by 400, then it is not a leap year. An example of this is the year 1900. It should have been a leap year, but since it was not divisible by 400, it was not a leap year where as 2000 was. To get check for this type of leap year, we need to divide the year by 100, and if there is no remainder then divide the year by 400. Once we get this information, we can then get create the array.

 if (month == 1){
  if ( (year%100!=0) && (year%4==0) || (year%400==0)){
   totalFeb = 29;
  }else{
   totalFeb = 28;
  }
 }
 var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"];

Now lets start to think about how to build the calendar in HTML. If we look at a calendar, we can see that it is basically a table. It has rows and columns that the date and days of the week refer to. With the variables we have now, we know what day of the week the calendar should start on, but the issue we have now, is how do we get the table to start on that day. Well the value that the getDay function returns is a number between zero and six, or Sunday through Saturday. With this information we can create a loop which will add the extra cells for us.

var padding= "";
while (tempweekday > 0)
 padding += "";
 tempweekday--;
}

Before the loop we create an empty variable named padding. The reason we do this, is so that when we run the loop in our calendar, we do not have an undefined message displayed on the page. We then have the loop. The loop is adding empty HTML td tags to the padding variable until tempweekday is no longer greater then 0. We are also subtracting one from tempweekday each time the loop is ran.

Now we will use the array that we created, and the copy of tempweekday to create the rest of the calendar.

dayAmount = totalDays[month];
i = "0";
 while (i <= dayAmount){
  if (tempweekday2 > 6){
   tempweekday2 = 0;
   padding += "</tr><tr>";
  }

  if (i == day){
   padding +="<td class='currentday'>"+i+"</td>";
  }else{
   padding +="<td class='currentmonth'>"+i+"</td>";	
  }
	
  tempweekday2++;
  i++;
 }

At first this looks very confusing, but it that confusing once we break it down. The first part of this section of code just gets the amount of days that are in the current month. We also create a variable just for counting. Then comes the while loop. This loop will run until our counting variable (i) is equal to the number of days (dayAmount) in the month. If that was the only part of the loop, then our table would just be one large row of numbers, to actually make the table's rows, we also have to keep track of the day of the week that we are currently on. That is where the first if statement comes into play in the loop. Tempweekday2 holds the current day of the week, and we know that in JavaScript the days of the week go from 0 (Sunday) to 6 (Saturday). With this, we can tell tempweekday2 to reset to zero when ever it's value is greater then 6. We also add the HTML tags to stop and create a new row to our padding variable.

The next if statement will is what actually displays the number for the days. In order to make the current day of the month stand out, we need this statement. What it is doing is checking to see if our counter (i) is equal to the current day that we got at the start of the script. If so it is going to apply a different CSS class to that cell. If the counter and day are not equal then we create a cell with a different CSS class. At the end we add one to both the tempweekday2 and i values.

Now that we have the body of the calendar created, we need to create the header of the calendar. This will be simple to do, it is all HTML. In the calendar's header we want to display the name of the month, instead of a number. To do this we will create an array. Just like we did for the number of days in the month, we will use the month variable to pull the month name from the array.

 var monthNames = ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov", "Dec"];

 var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>"+monthNames[month]+" "+ year +"</th></tr>";
 calendarTable +="<tr class='weekdays'>  <td>Sun</td>  <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
 calendarTable += "<tr>";

As you can see we created a table with the name of the month, and year at the top, then created a new row in the table with the days of the week. We also started a third row. This is where the loop that was filling in the table comes into play. After creating this header we can add the padding value to the calendarTable variable to fill in the calendar, and then close the table.

 calendarTable += padding;
 calendarTable += "</tr></table>" + month;
 document.getElementById("calendar").innerHTML=calendarTable;

Along with finishing the table, we have also created a way to display the table where we would like on the page, but telling the JavaScript to write the contents of calendarTable in the HTML tag with an id of calendar.

In the loop that we created to make fill in the calendar with the number of days in the month, we put the current day in a different CSS class then the other days of the month. This was to distinguish the current day of the month, and make it stand out. This is what that CSS looks like.

<style>
.currentmonth{
 color: blue;
 text-align: center;
}
 .currentday{
 border: 1px solid black;
 color: #00FF00;
 text-align: center;
}
</style>

Let's put all of the code together to see what it looks like.

<style>
.currentmonth{
 color: blue;
 text-align: center;
}
 .currentday{
 border: 1px solid black;
 color: #00FF00;
 text-align: center;
}
</style>
<script language="JavaScript">
function calendar(){
 var current = new Date();
 var month = current.getMonth();
 var day = current.getDate();
 var year = current.getFullYear();
 tempMonth = month +1;

 var tempDate = new Date(tempMonth +' 1 ,'+year);
 var tempweekday= tempDate.getDay();
 var tempweekday2 = tempweekday;

 if (month == 1){
  if ( (year%100!=0) && (year%4==0) || (year%400==0)){
   totalFeb = 29;
  }else{
   totalFeb = 28;
  }
 }
 var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"];

var padding= "";
while (tempweekday > 0)
 padding += "<td class='premonth'></td>";
 tempweekday--;
}
dayAmount = totalDays[month];
i = "0";
 while (i <= dayAmount){
  if (tempweekday2 > 6){
   tempweekday2 = 0;
   padding += "</tr><tr>";
  }

  if (i == day){
   padding +="<td class='currentday'>"+i+"</td>";
  }else{
   padding +="<td class='currentmonth'>"+i+"</td>";	
  }
	
  tempweekday2++;
  i++;
 }

 var monthNames = ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov", "Dec"];

 var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>"+monthNames[month]+" "+ year +"</th></tr>";
 calendarTable +="<tr class='weekdays'>  <td>Sun</td>  <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
 calendarTable += "<tr>";
}
</script>

In order for the calendar to be generated when the user loads the page we have put all of the JavaScript code into a function named calendar, and will use the onLoad event to run the script. The onLoad will be added to the body tag of the HTML document.

You can see an example of this code here. The example code has additional JavaScript applied to it that was from other tutorials on Code-Sucks. Also, I have tested this code works in Firefox, and IE for Windows. It also works for Firefox on Linux, but Opera 9.50 Beta 1 (the 64-bit edition) has issues getting the correct day the month starts on.