Calendar with image for each month : Calendar « GUI Components « JavaScript DHTML

Calendar with image for each month


<title>Calendar Demo</title>
<script type="text/javascript">
function calendar(id,d,p){ = id;
  this.dateObject = d;
  this.pix = p;
  this.write = writeCalendar;
  this.length = getLength;
  this.month = d.getMonth(); = d.getDate(); = d.getDay();
  this.year = d.getFullYear();
  this.getFormattedDate = getFormattedDate;
  //get the first day of the month's day
  this.firstDay = d.getDay();
  //then reset the date object to the correct date

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

function getFormattedDate(){
  return days[] + ', ' + months[this.month] + ' ' + + ', ' + this.year;
  //return this.month + '/' + + '/' + this.year;

function writeCalendar(){
  var calString = '<div id="calContainer">';
  //write month and year at top of table
  calString += '<table id="cal' + + '" cellspacing="0" width="200" style="border:1px black solid;">';
  //write the image - comment out to hide images
  calString += '<tr><th colspan="7"><img src="' + this.pix[this.month].src + '"/></th></tr>';
  //write the month
  calString += '<tr><th colspan="7" class="month">' + months[this.month] + ', ' + this.year + '</th></tr>';
  //write a row containing days of the week
  calString += '<tr>';
    calString += '<th class="dayHeader">' + days[i].substring(0,3) + '</th>';
  //write the body of the calendar
  calString += '<tr>';
  //create 6 rows so that the calendar doesn't resize
    var displayNum = (j-this.firstDay+1);
      //write the leading empty cells
      calString += '<td class="empty">&nbsp;</td>';
    }else if({
      calString += '<td id="' + +'selected" class="date" onClick="javascript:changeDate(this,\'' + + '\')">' + displayNum + '</td>';
    }else if(displayNum > this.length()){
      //Empty cells at bottom of calendar
      calString += '<td>&nbsp;</td>';
      //the rest of the numbered cells
      calString += '<td id="" class="days" onClick="javascript:changeDate(this,\'' + + '\')">' + displayNum + '</td>';
      calString += '</tr><tr>';
  //close the last number row
  calString += '</tr>';
  //write the nav row
  calString += '<tr>';
  calString += '<td class="nav" style="text-decoration:underline;" onClick="changeMonth(-12,\'' + + '\')">&lt;</td>';
  calString += '<td class="nav" onClick="changeMonth(-1,\'' + + '\')">&lt;</td>';
  calString += '<td class="month" colspan="3">&nbsp;</td>';
  calString += '<td class="nav" onClick="changeMonth(1,\'' + + '\')">&gt;</td>';
  calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,\'' + + '\')">&gt;</td>';
  calString += '</tr>';
  calString += '</table>';
  calString += '</div>';
  return calString;

function getLength(){
  //thirty days has September...
    case 1:
        return 29; //leap year
        return 28;
    case 3:
      return 30;
    case 5:
      return 30;
    case 8:
      return 30;
    case 10:
      return 30
      return 31;
function changeDate(td,cal){
  //Some JavaScript trickery
  //Change the cal argument to the existing calendar object
  //This is why the first argument in the constructor must match the variable name
  //The cal reference also allows for multiple calendars on a page
  cal = eval(cal);
  document.getElementById( + "selected").className = "days";
  document.getElementById( + "selected").id = "";
  td.className = "date"; = + "selected";
  //set the calendar object to the new date
  cal = new calendar(,cal.dateObject,cal.pix);
  //here is where you could react to a date change - I'll just display the formatted date

function changeMonth(mo,cal){
  //more trickery!
  cal = eval(cal);
  //The Date object is smart enough to know that it should roll over in December
  //when going forward and in January when going back
  cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
  cal = new calendar(,cal.dateObject,cal.pix);
  cal.formattedDate = cal.getFormattedDate();
  document.getElementById('calContainer').innerHTML = cal.write();

<style rel="stylesheet" type="text/css">
.month, .nav{
  background-color: navy;
  color: white;
  font: 10pt sans-serif;
  cursor: pointer;
  cursor: hand;
  color: black;
  font: 10pt sans-serif;
  border-bottom: 1px black solid;
  font-weight: bold;
  background-color: white;
  border-bottom: 1px black solid;
  color: black;
  background-color: rgb(235,235,235);;
  font: 10pt sans-serif;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
  cursor: pointer;
  cursor: hand;
  color: maroon;
  font: 10pt sans-serif;
  font-weight: bold;
  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
  cursor: pointer;
  cursor: hand;



<script language="JavaScript">
//create the pix array
var pix = new Array();
for(i=0; i<12; i++){
  pix[i] = new Image();
  pix[i].src = 'patternImages/fractal' + i + '.jpg';
//Place this script wherever you want your calendar
//The first argument must match the var name
var thisMonth = new calendar('thisMonth',new Date(),pix);


  135 k)

Related examples in the same category

1.HTML Calendar based on DynAPI
2.JavaScript Date Picker based on ComboBox
3.Calendar Control - Single-Select Implementation
4.Calendar Control - 2-Up Implementation
5.Calendar Control - Handling onSelect / onDeselect
6.Calendar Control - Mix/Max Implementation
7.Calendar Control - Multi-Select Implementation
8.Calendar Control - Multi-Select 2-up Implementation
9.Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
10.Calendar Control - Date Restriction Example (Date Restriction Implementation)
11.Calendar Control - Row Highlight Example (Row Highlight Implementation)
12.Popup calendar
13.Month Calendar
14.Popup Calendar for a textfield
15.Multiselection Calendar
16.Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17.HTML Date Picker
18.Date Picker in new window
19.All browser Calendar
20.DHTML Calendar for the impatient
21.Calendar: special day
22.Calendar: day info
23.Calendar: Multiple day selection
24.Calendar with different theme
25.Fancy Calendar
26.Another Calendar
27.Date Time Picker
28.Month Calendar (2)
29.Building a Calculator
30.A Dynamic Calendar Table
31.Dynamic HTML Calendar
32. A Static Calendar by JavaScript
33.Displaying the Calendar
34.Calendar (IE only)
35.Calendar in slide tab
36.Another DHTML Calendar
37.Event Calendar
38.Open calendar
39.swazz calendar 1.0
40.jquery calendar