Total members 11372 |It is currently Sat Nov 01, 2014 5:32 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R

All times are UTC [ DST ]



  simple javascript calendar
Mon Sep 12, 2011 12:55 pm 

basic and simple JavaScript calendar code

Code:

<html>
<
head> 
<title>JavaScript calendar</title>
<
script> 
function displayCalendar
(){
 
 
 var htmlContent 
="";
 var FebNumberOfDays ="";
 var counter = 1;
 
 
 var dateNow 
= new Date();
 var month = dateNow.getMonth();

 var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
 var prevMonth = month -1;
 var day = dateNow.getDate();
 var year = dateNow.getFullYear();
 
 
 
//Determing if February (28,or 29)  
 if (month == 1){
    if ( (year%100!=0) && (year%4==0) || (year%400==0)){
      FebNumberOfDays = 29;
    }else{
      FebNumberOfDays = 28;
    }
 }
 
 
 
// names of months and week days.
 var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
 var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
 var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]
 
 
 
// days in previous month and next one , and day of week.
 var nextDate = new Date(nextMonth +' 1 ,'+year);
 var weekdays= nextDate.getDay();
 var weekdays2 = weekdays
 var numOfDays 
= dayPerMonth[month];
     
 
 
 
 
// this leave a white space for days of pervious month.
 while (weekdays>0){
    htmlContent += "<td class='monthPre'></td>";
 
 
// used in next loop.
     weekdays--;
 }
 
 
// loop to build the calander body.
 while (counter <= numOfDays){
 
     
// When to start new line.
    if (weekdays2 > 6){
        weekdays2 = 0;
        htmlContent += "</tr><tr>";
    }
 
 
 
    
// if counter is current day.
    // highlight current day using the CSS defined in header.
    if (counter == day){
        htmlContent +="<td class='dayNow'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
        "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>"+counter+"</td>";
    }else{
        htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
        " onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";    
 
    
}
    
    weekdays2
++;
    counter++;
 }
 
 
 
 
// building the calendar html body.
 var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
 +monthNames[month]+" "+ year +"</th></tr>";
 calendarBody +="<tr class='dayNames'>  <td>Sun</td>  <td>Mon</td> <td>Tues</td>"+
 "<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
 calendarBody += "<tr>";
 calendarBody += htmlContent;
 calendarBody += "</tr></table>";
 // set the content of div .
 document.getElementById("calendar").innerHTML=calendarBody;
 
}
</script> 
</head> 
 
<body onload="displayCalendar()"> 
 
<div id="calendar"></div> 
</body> 
<style> 
.monthPre{
 color: gray;
 text-align: center;
}
.monthNow{
 color: blue;
 text-align: center;
}
.dayNow{
 border: 2px solid black;
 color: #FF0000;
 text-align: center;
}
.calendar td{
 htmlContent: 2px;
 width: 40px;
}
.monthNow th{
 background-color: #000000;
 color: #FFFFFF;
 text-align: center;
}
.dayNames{
 background: #0FF000;
 color: #FFFFFF;
 text-align: center;
}
 
</style> 
</html>


_________________
Please recommend / share my post if you found it helpful.


Author:
Mastermind
User avatar Posts: 2694
Have thanks: 73 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : simple javascript calendar
 Simple JavaScript calculator     -  
 Calendar Generator     -  
 Programming Calendar Java     -  
 draw Calendar in java     -  
 java.util Calendar To TimeStamp     -  
 OpenGl simple example     -  
 Simple animation     -  
 php simple XML parser     -  
 Simple Calculator     -  
 Simple Light     -  

All times are UTC [ DST ]



Topic Tags

JavaScript Time






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team