var dt= new Date();
var month=dt.getMonth(); // read the current month
var year=dt.getFullYear(); // read the current year
dt=new Date(year, month, 01);// date object with first day of current month
var first_day=dt.getDay(); //, first day of present month ( from 0 to 6 )
document.write("first_day=" + first_day + "<br><br>");
dt.setMonth(month+1,0); // Set to next month and one day backward.
var last_date=dt.getDate(); // Last date of present month
document.write(dt); // Last date in full
document.write("<br><br> Last Date of the month =" + last_date + "<br><br>");
In a calendar we create table headers by keeping our week days starting from Sunday , below that we will write our current dates of the months. If the first date of the month falls on Wednesday then we have to keep three cells of the table before 1st as blank. So our display of dates should start from that day of the week and same way it should not exceed last day of the month. These two variables ( first and last dates of the month ) we have already calculated in our above examples, those we will use to restrict the display by using a if condition.
var dy=1; // day variable for adjustment of starting date.
document.write ("<table><tr><td>Su</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>");
for(i=0;i<=41;i++){
if((i%7)==0){document.write("</tr><tr>");} // if week is over then start a new line
if((i>= first_day) && (dy<= last_date)){
document.write("<td>"+ dy +"</td>");
dy=dy+1;
}else {document.write("<td>*</td>");} // Blank dates.
} // end of for loop
document.write("</tr></table>")
This is the basic calendar code we developed. Using this we will add more features to this calendar.
<html>
<head>
<title>Demo of Calendar for the present month in JavaScript</title>
</head>
<body>
<script type="text/javascript">
var dt= new Date();
var month=dt.getMonth(); // read the current month
var year=dt.getFullYear(); // read the current year
dt=new Date(year, month, 01);//Year , month,date format
var first_day=dt.getDay(); //, first day of present month
document.write("first_day=" + first_day + "<br><br>");
dt.setMonth(month+1,0); // Set to next month and one day backward.
var last_date=dt.getDate(); // Last date of present month
document.write(dt); // Last date in full
document.write("<br><br> Last Date of the month =" + last_date + "<br><br>");
var dy=1; // day variable for adjustment of starting date.
document.write ("<table><tr><td>Su</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>");
for(i=0;i<=41;i++){
if((i%7)==0){document.write("</tr><tr>");} // if week is over then start a new line
if((i>= first_day) && (dy<= last_date)){
document.write("<td>"+ dy +"</td>");
dy=dy+1;
}else {document.write("<td>*</td>");} // Blank dates.
} // end of for loop
document.write("</tr></table>")
</script>
</body>
</html>
<style type="text/css">
div {
display: none;
}
</style>
So when required we will display them like this .
document.getElementById(id).style.display = visibility;
Inside the body tag we will display one image and onClick event of this we will display the layer.
<img src='help.jpg' onClick="setVisibility('sub4', 'inline');";>
In above code we will display the div layer sub4 which was hidden before because of the default style property.
<html>
<head>
<title>Demo of displaying calendar in a layer</title>
<style type="text/css">
div {
display: none;
}
</style>
<script language="JavaScript">
var dt= new Date();
var month=dt.getMonth(); // read the current month
var year=dt.getFullYear(); // read the current year
dt=new Date(year, month, 01);//Year , month,date format
var first_day=dt.getDay(); //, first day of present month
dt.setMonth(month+1,0); // Set to next month and one day backward.
var last_date=dt.getDate(); // Last date of present month
var dy=1; // day variable for adjustment of starting date.
var str = "<table bgcolor='#f1f1f1'><tr><td colspan=7 align=right>";
str += " <a href=# onclick="setVisibility('sub4','none');";>X</a></td></tr>";
str +="<tr><td>Su</td><td>Mon</td><td>Tue</td><td>Wed</td>";
str +="<td>Thu</td><td>Fri</td><td>Sat</td></tr>";
for(i=0;i<=41;i++){
if((i%7)==0){str = str + "</tr><tr>";} // if week is over then start a new line
if((i>= first_day) && (dy<= last_date)){
str = str + "<td>"+ dy +"</td>";
dy=dy+1;
}else {str = str + "<td>*</td>";} // Blank dates.
} // end of for loop
str = str + "</tr></table>";
function setVisibility(id, visibility) {
document.getElementById(id).innerHTML = str;
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body >
You can display calendar of present month by clicking this small box ->
<img src='images/help.jpg' onClick="setVisibility('sub4', 'inline');";>
<div id="sub4" style="position: absolute;z-index:1;"></div>
<br>
Return to <a href=date-project-calendar2.php>Calendar Project tutorial</a>
</body>
</html>
Let us try to use the same layer to pass the date value to a text field by onClick event.
Zack | 02-11-2016 |
Hi..can i know how to highlight today date in this calendar and one more things when i click the date it will display the details event that have on this date..actually i try to use moment.js..i hope can help me fix it...thanks |
smo1234 | 03-11-2016 |
Use JQuery date picker |
Zack | 07-11-2016 |
I want to create calendar for event or appointment need to list all event that have in a current date...not like date picker..do you any ideas how to do that..thanks |
smo1234 | 11-11-2016 |
There is a JQuery script using PHP MySQL , you can manage appointments. This will display events of the day based on the date selection. |