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






Calendar with image for each month

 

<html>
<head>
<title>Calendar Demo</title>
<script type="text/javascript">
//Constructor
function calendar(id,d,p){
  this.id = id;
  this.dateObject = d;
  this.pix = p;
  this.write = writeCalendar;
  this.length = getLength;
  this.month = d.getMonth();
  this.date = d.getDate();
  this.day = d.getDay();
  this.year = d.getFullYear();
  this.getFormattedDate = getFormattedDate;
  //get the first day of the month's day
  d.setDate(1);
  this.firstDay = d.getDay();
  //then reset the date object to the correct date
  d.setDate(this.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[this.day] + ', ' + months[this.month] + ' ' + this.date + ', ' + this.year;
  //return this.month + '/' + this.date + '/' + this.year;
}

function writeCalendar(){
  var calString = '<div id="calContainer">';
  //write month and year at top of table
  calString += '<table id="cal' + this.id + '" 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>';
  
  for(i=0;i<days.length;i++){
    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
  for(j=0;j<42;j++){
    var displayNum = (j-this.firstDay+1);
    if(j<this.firstDay){
      //write the leading empty cells
      calString += '<td class="empty">&nbsp;</td>';
    }else if(displayNum==this.date){
      calString += '<td id="' + this.id +'selected" class="date" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
    }else if(displayNum > this.length()){
      //Empty cells at bottom of calendar
      calString += '<td>&nbsp;</td>';
    }else{
      //the rest of the numbered cells
      calString += '<td id="" class="days" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
    }
    if(j%7==6){
      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,\'' + this.id + '\')">&lt;</td>';
  calString += '<td class="nav" onClick="changeMonth(-1,\'' + this.id + '\')">&lt;</td>';
  calString += '<td class="month" colspan="3">&nbsp;</td>';
  calString += '<td class="nav" onClick="changeMonth(1,\'' + this.id + '\')">&gt;</td>';
  calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,\'' + this.id + '\')">&gt;</td>';
  calString += '</tr>';
  
  calString += '</table>';
  calString += '</div>';
  return calString;
}

function getLength(){
  //thirty days has September...
  switch(this.month){
    case 1:
      if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
        return 29; //leap year
      else
        return 28;
    case 3:
      return 30;
    case 5:
      return 30;
    case 8:
      return 30;
    case 10:
      return 30
    default:
      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(cal.id + "selected").className = "days";
  document.getElementById(cal.id + "selected").id = "";
  td.className = "date";
  td.id = cal.id + "selected";
  //set the calendar object to the new date
  cal.dateObject.setDate(td.firstChild.nodeValue);
  cal = new calendar(cal.id,cal.dateObject,cal.pix);
  //here is where you could react to a date change - I'll just display the formatted date
  alert(cal.getFormattedDate());
}

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.id,cal.dateObject,cal.pix);
  cal.formattedDate = cal.getFormattedDate();
  document.getElementById('calContainer').innerHTML = cal.write();
  
}


</script>
<style rel="stylesheet" type="text/css">
.month, .nav{
  background-color: navy;
  color: white;
  font: 10pt sans-serif;
}
.nav{
  cursor: pointer;
  cursor: hand;
}
.dayHeader{
  color: black;
  font: 10pt sans-serif;
  border-bottom: 1px black solid;
  font-weight: bold;
}
.empty{
  background-color: white;
  border-bottom: 1px black solid;
}
.days{
  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;
}
.date{
  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;
}

</style>

</head>
<body>

<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);
document.write(thisMonth.write());
</script>

</body>
</html>

           
         
  








CalendarEachMonth.zip( 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