HTML Components: Programming the Calendar - I

HTML Components

Programming the Calendar - I

When calendar.html calls MYCAL:CALENDAR, a monthly calendar appears on the page. The function setCal() is the main program. It initializes some variables and calls the drawCal() function. We also use three other functions: getMonthName(), getDays(), and leapYear(). Let's start with the latter functions first.

The getDays() function accepts the month and the year values and creates a new 12-element array in which it stores the days-per-month values for all months. The year value is needed to determine whether it is a leap year or not. February has 29 days in a leap year, 28 days otherwise. The function returns the number of days in the given month. Here is getDays():

function getDays(month, year) {
  // create array to hold number of days in each month
  var ar = new Array(12);
  ar[0] = 31; // January
  ar[1] = (leapYear(year)) ? 29 : 28; // February
  ar[2] = 31; // March
  ar[3] = 30; // April
  ar[4] = 31; // May
  ar[5] = 30; // June
  ar[6] = 31; // July
  ar[7] = 31; // August
  ar[8] = 30; // September
  ar[9] = 31; // October
  ar[10] = 30; // November
  ar[11] = 31; // December
  // return number of days in the specified month (parameter)
  return ar[month];
}

The function leapYear() returns true if the given year is divisible by 4 and false otherwise:

function leapYear(year) {
  if (year % 4 == 0) // basic rule
    return true; // is leap year
  /* else */ // else not needed when statement is "return"
    return false; // is not leap year
}

The function getMonthName() returns the name of the given month:

function getMonthName(month) {
  // create array to hold name of each month
  var ar = new Array(12);
  ar[0] = "January";
  ar[1] = "February";
  ar[2] = "March";
  ar[3] = "April";
  ar[4] = "May";
  ar[5] = "June";
  ar[6] = "July";
  ar[7] = "August";
  ar[8] = "September";
  ar[9] = "October";
  ar[10] = "November";
  ar[11] = "December";
  // return name of specified month (parameter)
  return ar[month];
}

The setCal() function is the main module. We call it at the first line of the script. This function creates a Date object for the current date (now) as well as the first day of the month (firstDayInstance). From these objects, it extracts all needed information about the first, current, and last day of the month:

function setCal() {
  // standard time attributes
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth();
  var monthName = getMonthName(month);
  var date = now.getDate();
  now = null;
  // create instance of first day of month,
  // and extract the day on which it occurs
  var firstDayInstance = new Date(year, month, 1);
  var firstDay = firstDayInstance.getDay();
  firstDayInstance = null;
  // number of days in current month
  var days = getDays(month, year);
  // call function to draw calendar
  drawCal(firstDay + 1, days, date, monthName, year);
}

Next: How to program the calendar - Part II

Produced by Yehuda Shiran and Tomer Shiran

Created: July 3, 2000
Revised: July 3, 2000

URL: https://www.webreference.com/js/column64/6.html