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


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.


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;}

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
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
  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

}// end for loop

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

//  print calendar

//  End -->


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

More by this Author

  • Classic Mustang Topics - Problems with Vintage Mustang

    These are some of the issues I had after purchasing my classic mustang. Engine: was not an issue with my 67 mustang fastback. but this is probably an issue with most. I was lucky that my 289 was rebuilt and only had...

  • How to Get Rid of Mice In and Around The House?

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...

Click to Rate This Article