Current Month Calendar

We will be using variables to store different data required for populating the calendar.

Structure of the calendar display

Our calendar will have 7 columns and 6 rows. Our column headers will be name of the weekdays starting from Sunday and ending with Saturday.



Each cell of the table will display one day. So based on the day of the week of the 1st day of the month we have to position the 1st day and then start adding dates to the calendar.

Getting first day of current month

As we have seen getDay() returns us number 0 to 6 based on the day of the week. 0 is returned for Sunday and 1 is returned for Monday like this

We will create date object using 1st day of the current month. So we will first read the current year ( YYYY format ) by using getFullYear() , same way we will read the present month by getMonth(). Then we will assign date as 1 and create the date object. Here is the code.

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>");

Demo of displaying Calendar

Getting the last date of current month

As we can read the current month so we can find out the last date of the month ( like March has 31, September has 30 days ). This way we can fix all the months except February for which one additional check of leap year is to be done. This is a long or a crud way of doing, another better way is to get the one day previous date of the first day of next month. This will also ensure that leap year is also considered.

From the date object we already created , we will add one month to current month and set date to 0. The first date of the next ( or any ) month is 1, by setting it to 0 we will going backward one day and getting last date of current month. Here is the code

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.

To format the calendar we will use one html table and we will keep 42 cells in it. ( Why 42 ? ) Consider March 2014. You will know the reason for this. Here is the code to display the calendar

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.

Here is the demo

The full code is here

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

Displaying calendar in a layer on button click

We will learn how to display calendar of this month on click of a button or on mouse over event. We will use one layer to display the calendar. There will be a button or a link in the layer to close the calendar window.

However here we will not display them directly but store them inside a variable ( str ). Once it is ready we will display them inside the layer by using layer style property.

document.getElementById(id).innerHTML = str;

At the loading of the page we have hidden all the layers by default style property.

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

demo of calendar in layer on click

The complete code is here

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


plus2net.com




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.

Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer