ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Programming Languages

Javascript: A simple calendar with today's date highlighted.

Updated on September 11, 2012

Introduction

This is just a simple monthly (current month) calendar built with javascript. You can modify the formatting and html display properties of it. It's just the current month displayed with today's date highlighted. Nothing fancy, just a basic calendar that you could place on any web page.

I've added a little CSS to format the text between the <td> tags of the calendar.


CSS

Place the following css between the <head></head> tags of your web page. You can modify them as needed. Ths CSS formats the numeric portion and monthly header name.

<style type="text/css">
.tdoutput {font: normal 10px "arial", "sans-serif"; color: black;}
.tdheader {font: normal 12px "arial", "sans-serif"; color: black;}
</style> 

Javascript to display the calendar

Below is the javascript to display the simple monthly calendar with today's date highlighted. Place the javascript any where on your web page.

<script language="javascript" type="text/javascript">
<!-- Begin
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var Calendar = new Date();
var year = Calendar.getFullYear();      // Returns year
var month = Calendar.getMonth();        // Returns month (0-11)
var today = Calendar.getDate();         // Returns day (1-31)
var weekday = Calendar.getDay();        // Returns day (1-31)
var DAYS_OF_WEEK = 7;                   // "constant" for number of days in a week
var DAYS_OF_MONTH = 31;                 // "constant" for number of days in a month
var cal;                               // Used for printing

Calendar.setDate(1);                   // Start the calendar day at '1'
Calendar.setMonth(month);              // Start the calendar month at now

var TR_start = '<tr>';
var TR_end = '</tr>';
var highlight_start = '<td width="30"><table style="border: 1px solid" bordercolor=999999 cellspacing=0 bgcolor=yellow><tr><td width=20><B><center>';
var highlight_end   = '</center></td></tr></table></B>';
var TD_start = '<td width="30" class=tdoutput><center>';
var TD_end = '</center></td>';

cal =  '<table style="border: 1px solid" cellspacing=0 cellpadding=0 bordercolor=999999><TR><TD class=tdoutput>';
cal += '<table border=0 cellspacing=0 cellpadding=2>' + TR_start;
cal += '<td colspan="' + DAYS_OF_WEEK + '" bgcolor="#EFEFEF" class="tdheader"><CENTER><B>';
cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;

// do not modify the code below
// loops for each day of week
for(index=0; index < DAYS_OF_WEEK; index++)
{

// highlight today day fof week
if(weekday == index)
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;

// prints day
else
cal += TD_start + day_of_week[index] + TD_end;
}

cal += TD_end + TR_end;
cal += TR_start;

// fill in the blank gaps until today's day
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + '  ' + TD_end;

// loops for each day in the calendar
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
  // returns the next day to print
  week_day =Calendar.getDay();

  // start the next new row for the first day of the week
  if(week_day == 0)
  cal += TR_start;

  if(week_day != DAYS_OF_WEEK)
  {

  // set the variable which is inside the loop for incrementing
  var day  = Calendar.getDate();

  // highlight today's date
  if( today==Calendar.getDate() )
  cal += highlight_start + day + highlight_end + TD_end;

  // prints day
  else
  cal += TD_start + day + TD_end;
  }

  // end row for last day of the week
  if(week_day == DAYS_OF_WEEK)
  cal += TR_end;
  }

  // increments until the end of the month
  Calendar.setDate(Calendar.getDate()+1);

}// end for loop

cal += '</td></tr></table></table>';

//  print calendar
document.write(cal);

//  End -->
</script>

Summary

Another way that javascript can add a little something to your web page.

Comments

Submit a Comment

No comments yet.