Javascript: Calendar




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

2002 - 2014 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
  • <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/Javascript/JS_HowToBuildCalendar.html">
    How to Build a Calendar </a>
    </table>
    </body>
    </html>

JavaScript Table of Contents

Introduction

The purpose of this tutorial is to introduce and explore JavaScript functions and the JavaScript Date Object in building a calendar. This tutorial assumes that you have read and mastered my tutorials on:

  1. Table Tags
  2. Form Tags
  3. Introduction to JavaScript
  4. JS: Date Class Methods
  5. JS: Functions
Figure 1: Tutorials assumed mastered


This tutorial assumes that you have some prior programming experience. It is not intended to be a comprehensive discussion on JavaScript or programming. In this tutorial, we will briefly explore how to build a JavaScript Calendar, and build on what we learned in JS: Date Class Methods (see ref. 3 above). In the next section, we will briefly describe JavaScript basics.

What is JavaScript?

JavaScript is a scripting language developed by Netscape that enables Web designers to create interactive sites/web pages. JavaScript and Java have many features and structures in common, however, they were developed independently. When JavaScript embedded within HTML source code, it enables Web designers to spice up their sites with dynamic content. JavaScript is used in Web pages designers to:

  • Improve the Web page dynamic content design;
  • Add interactivity to HTML pages;
  • Validate forms and gather data from users;
  • Detect browsers;
  • Create cookies;
  • Etc.
JavaScript is a scripting/interpreted language, which can execute without having to compile the source code. Java and JavaScript are similar but are not the same. They are two completely different languages in both concept and design. It runs on the client's computer and does not require constant downloads from your web site.

What is a JavaScript Date object?



 
<head>
<script type="text/javascript">
function get_Year() {
   var mydate = new Date() ;
   var thisYear = mydate.getFullYear() ;

   alert( "Value of myDate after get_FullYear() " 
           + thisYear  ) ;

   document.getElementById('getYeartxt').innerHTML=
       "<b>Value of myDate.getFullYear() is " + 
          thisYear + "</b>" ;
}


</script>
</head>
<body>
<button onclick="get_Year()"> value of myDate.getFullYear() </button>

<div id="getYeartxt"> 

</body>
</html>
 
Figure 2: Date Object Methods using the dot to get the time


After pressing the value of myDate.getFullYear() button in Figure 2, the following will be displayed.



In the next section, we will list the requirements for building a basic calendar.

Requirements for building a basic JavaScript calendar

The list of requirements for building a basic JavaScript calendar is:

  1. Use the Holland's OOP Programming Design Model to design and build the calendar.
  2. The data needed in this example are:
    • Year
    • Month
    • Day
    • DayOfWeek
  3. The calendar should display:
    • The year and month;
    • The days of the week;
    • Each day of the displayed month;
  4. Accept user data input for the month and year to be displayed:
    • Use this user data to display the required month and year.
  5. Display the calendar within a <Form> and </Form> tags.
  6. The calendar should look like the following:

    December 2009
     Sun  
     Mon  
     Tue  
     Wed  
     Thur  
     Fri  
     Sat  
      
      
    1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31
      
      
     
    Month
    December Year
    2009
In the next section, we will show how we use the Holland's OOP Programming Design Model to design out JavaScript application.

Holland's OOP Programming Design Model

The data needed in this example are:

  • Year
  • Month
  • Day
  • DayOfWeek
With above data in mind, we will declare global variables to contain this data.

Holland's OOP Programming Design Model
  
          +--------------+
          |      Data    |  
          +-------+------+  
                  ^
                  |
                  V
          +-------+------+
          |  Top-down   |  
          | Structured  |<----+
          | programming |     |
          | on functions|     | (step-wise)
          | needed      |     | (refinement)
          +-------------+     | (as needed) 
                  |           |
                  +-----------+ 
 
  
Figure 3: Holland's OOP Programming Design Model

Consider my tutorial on how to get user input and do some simple mathematical processing on the data. This is where I introduce the concept of a template for a Java application and one for an applet. The concept of a template/pattern can be used as a starting point as an outline for commonly occurring problems/solutions. A design template/pattern is an outline. It is not a finished design, but it can be fleshed-out into code; it is a description or template for how to solve a problem that can be used in many different situations. For example, I can use the following generic application template/pattern as a starting for a more complex application.

  
<HEAD>
<TITLE>JavaScript: Calendar
<SCRIPT LANGUAGE="JavaScript">
<!-- start
/** ***************************************************** 
 * Define global variables
 * 1- Create an array to contain the names of the months
 * 2- Create an array to contain the length of each month
 * 3- Create an array to contain the days of the week 
 * 
 ********************************************************/
function getFirstDay  {
    Create a Date object
    Set the date as the first day of the month
} 
</font>   
// end -->
</SCRIPT>
</HEAD>
  
<FORM>    
<SCRIPT>     
/** *****************************************************     
 *      
 * 1- Create a date object    
 * 2- Determine the current month    
 * 3- Use the current month as an index into months array     
 *    to obtain the name of the current month    
 * 4- If the current month is February, determine if this      
 *    is a leap year (whether 28 or 29 days in month)    
 * 5- Determine which day of the week the first day of      
 *    the month occurs    
 * 6- Use HTML to layout the table and rows that contain    
 *    1- The Month and year for the calendar    
 *    2- The days of the week    
 * 7- Fill out day cells with days of the month    
 *    1- Enter blanks up till day that first day of the     
 *    month occurs    
 *     
 ********************************************************/      

</SCRIPT>      
</FORM>   
Figure 4: Calendar Template


Once the data has been defined, in the above template, I can begin my top-down structured design. In the next section, we will explore the top-down structured design approach.

The top-down structured design approach

At this point, normally, I would map the requirements to high-level design pseudocode. However, since this is a rather simple example, I will write the implementation code under each requirement. Please refer to Figure 5 below.

  
<HEAD>
<TITLE>JavaScript: Calendar
<SCRIPT LANGUAGE="JavaScript">
<!-- start
 
/*******************************************************************************
 * 1- Create an array to contain the names of the months
 *    load array with one object for each month 
 *    
 *    var nameMonths = new Array( "January" , "February" , "March" , "April" ,
 *                                "May" , "June" , "July" , "August" ,"September" ,
 *                                "October" , "November" , "December" ) ;  
 * 2- Create an array to contain the length of each month
 * 
 *    var lengthMonth   = new Array( 31 , 28 , 31 , 30 , 31 , 30 , 31 , 
 *                                 31 , 30 , 31 , 30 , 31 ) ;    
 * 
 * 2- Create an array to contain the days of the week 
 *    var theDays       = new Array( "Sunday" , "Monday" , "Tuesday" , "Wednesday" , 
 *                              "Thursday" , "Friday" , "Saturday") ;    
 ********************************************************************************/
   
var now  = new Date() ;      // Create a Date object    
var date = now.getDate() ;
var year = now.getYear() ;

function getLengthOfFeb( passedYear ) {
   var length = 28 ;

   if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0) {
      length = 29 ;
   }

   return length
}   
// end -->
</SCRIPT>
</HEAD>
  
<FORM>    
<SCRIPT>     
/** *******************************************************************************     
 *      
 * 1- Create a date object      
 *      var today = new Date() ;      
 * 
 * 2- Determine the current month   for index into our nameMonths array     
 *      var monthIndex = today.getMonth() ;        
 *  
 * 3- Use the current month as an index into months array        
 *    to obtain the name of the current month  
 *      var thisMonth = nameMonths[ monthIndex ]       
 * 4- If the current month is February, determine if this      
 *    is a leap year (whether 28 or 29 days in month) 
 *    
 *    if ( monthIndex == 1 ) {
 *       lengthMonth[ 1 ]  =  getLengthOfFeb( today.getYear() ) ;
 *    }  
 * 5- Determine which day of the week the first day of      
 *    the month occurs  
 *    
 *    today.setDate( 1 ) ;
 *    today.getDate() ;
 *      
 * 6- Use HTML to layout the table and rows that contain    
 *    1- The Month and year for the calendar    
 *    2- The days of the week    
 * 7- Fill out day cells with days of the month    
 *    1- Enter blanks up till day that first day of the     
 *    month occurs    
 *     
 *****************************************************************************************/      

</SCRIPT>      
</FORM>   
Figure 5: Calendar Template


In the next section, we will complete the calendar application.

Applying the top-down structured design approach

In this section, we will show and apply the code shown in Figure 5. In one section of Figure 6, we will show the code and in the other section, we will show the result of applying he code.

Calendar code example Calendar code example displayed
  
<html> 
<head>


<script language="JavaScript">

/**************************************************************
 *    Create an array to contain the names of the months
 *    load array with one object for each month 
 ***************************************************************/
  
var nameMonths = 
     new Array( "January" , "February" , "March" , "April" ,
                "May" , "June" , "July" , "August" ,"September" ,
                "October" , "November" , "December" ) ;   


/**************************************************************
 *     Create an array to contain the length of each month
 *    
 ***************************************************************/ 

var lengthMonth   = new Array( 31 , 28 , 31 , 30 , 31 , 30 , 31 , 
                                   31 , 30 , 31 , 30 , 31 ) ;  
  

/**************************************************************
 *      Create an array to contain the days of the week 
 *    
 ***************************************************************/ 
 
 var theDays       = new Array( "Sunday" , "Monday" , "Tuesday" , 
                                "Wednesday" , "Thursday" , "Friday" , 
                                "Saturday") ;   
    
var now  = new Date() ;
var date = now.getDate() ;
var year = now.getYear() ;

function getLengthOfFeb( passedYear ) {
   var length = 28 ;
   //document.write("
getLengthOfFeb is entered" ) ; if ( passedYear % 4 == 0 || passedYear % 100 == 0 || passedYear % 400 == 0) { length = 29 ; } //document.write("
getLengthOfFeb 2: length is " + length ) ; return length ; } function populateCalendar() { var content = "<TR>" ; for (var ii = 1 ; ii <= howManyCells ; ii++) { if (ii <= firstDay ) { // cells prior to first day occurrence content += "<TD><pre> </pre></TD>" } else { // enter date number content += "<TD align=center>" + (ii - (firstDay) ) + "</TD>" } // must start new row after each week if ( ii % 7 == 0 && ii != howManyCells ) { content += "</TR> <TR>" } } return content ; } </script> </head> <body> <script language="JavaScript"> var dateObj = new Date() ; /** ********************************************************** * dateObj.setMonth( 0 ) ; is used for debugging; therefore, it * is commented out **************************************************************/ //dateObj.setMonth( 0 ) ; // for index into our nameMonths array var monthIndex = dateObj.getMonth() ; var thisMonth = nameMonths[ monthIndex ] ; // month full name var content = "<CENTER><TABLE BORDER=3>" ; if ( monthIndex == 1 ) { lengthMonth[ 1 ] = getLengthOfFeb( dateObj.getFullYear() ) ; } dateObj.setDate( 1 ) ; var firstDay = dateObj.getDay() ; var howManyCells = lengthMonth[monthIndex] + firstDay ; // start assembling HTML for table content += "<TR><TH COLSPAN=7> <font size=5 color=blue>" + thisMonth + " " + ( dateObj.getFullYear() ) + "</font><</TH></TR>" content += "<TR><TH><font size=5 color=red> Sun</font></TH><TH><font size=5 color=red>Mon</font> </TH><TH><font size=5 color=red>Tue</font></TH> <TH><font size=5 color=red>Wed</font></TH>" content += "<TH><font size=5 color=red>Thu</font></TH><TH> <font size=5 color=red>Fri</font></TH><TH> <font size=5 color=red>Sat</font></TH></TR>" var content1 = populateCalendar() ; content += content1 ; content += "<TR><th colspan=7><h1>This is a calendar example</h1> </th></tr>" ; content += "</TABLE></CENTER>" ; // The next line is commented out so it doesn't print // document.write(content) </SCRIPT> </body> </html>
  
 








 



   
Figure 6: Applying the Calendar Template


The commented out document.write("") statements were/are used in debugging. Feel free to uncomment them as you make modifications.

Summary

In this tutorial we have completed the following requirements:

  • We used the Holland's OOP Programming Design Model to design and build the calendar.
  • We used the following data:
    • Year
    • Month
    • Day
    • DayOfWeek
  • We displayed the following information on the calendar:
    • The year and month;
    • The days of the week;
    • Each day of the displayed month;
    We did not meet the following requirements:
    • Accept user data input for the month and year to be displayed:
      • Use this user data to display the required month and year.
    • Display the calendar within a <Form> and </Form> tags.
    • The calendar should look like the following:
    We will complete the requirements in the next tutorial.









  • HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


    To contact us

    2002 - 2014 All Rights Reserved Total Application Works