JavaScript Calendar



Skill Level: Intermediate
Skills Required: Form Handling and Date Object


Abstract:

Today we will build a simple calendar using HTML and JavaScript. This calendar will show real world usage of many of the Date object's methods and can be extended if you need more functionality. As stated in the beginning, you must know form handling in JavaScript and the Date object to benefit from this article.


 Way Of Thinking:

To display calendar of any month, we must know the number of days in that month, which further depends on the nature of the year (leap year or not). Therefore, to develop this calendar, we must be able to judge whether the current year is a leap one or not. Secondly, how many days are there in the current month. And lastly, what is the "day" on the 1st of the current month.


Functions That We Need:

isLeapYear: An year is said to be leap year, either if its divisible by 4 but not by 100 or its divisible by 400. This information can be coded as below:

function isLeapYear (year)
{
   if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0))
      return (true);
   else
      return (false);
}

getDaysOfMonth: Remember the old rhyme "Thirty days hath September, April, June and November; All the rest have 31, except February alone"? You see this is quite easy to code as shown below:

function getDaysOfMonth (month, year)
{
   var days;
   if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
      days=31;
   else if (month==4 || month==6 || month==9 || month==11) days=30;
   else if (month==2)
   {
      if (isLeapYear(year)) days=29;
      else days=28;
   }
   return (days);
}


Complete Code:

Before giving you the complete code, I would like to tell you the trick or method used. We will create a form by the name calendar, containing a textbox (to display today's date) and a textarea (to display the calendar). The top row of the textarea contains the names of the days "Su, Mo, ..." Next we write the numbers from 1 to getDaysOfMonth(currentMonth). The only tricky part left is aligning the "01" exactly below the day on the 1st of current month. For this, first we calculate the day on 1st of the current month; next, we write that many spaces. Simple isn't it?

<html>
<head>
<script language="JavaScript">
<!--

function isLeapYear (year)
{
   if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0))
      return (true);
   else
      return (false);
}

function getDaysOfMonth (month, year)
{
   var days;
   if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)

The copyright of the article JavaScript Calendar in JavaScript is owned by Muhammad Ali Shah. Permission to republish JavaScript Calendar in print or online must be granted by the author in writing.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic