.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Steve Jackman
Imran Ghani
Santhakumar Munuswamy

Home >> Code Snippets >> Javascript >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

Making a month calendar using Javascript

Posted By:Kemal AL GAZZAH       Posted Date: May 27, 2016    Points: 40    Category: Javascript    URL: http://www.dotnetspark.com  

Here a complete code, HTML and javascript to generate a calendar month. I also posted previously a sql server code to generate a month calendar
 

<html>
<head>
<style>
.el
{
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:black;
background-color:silver;
}

.el1
{
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:green;
}

</style>










<script>
function cal()
{

for (i=1; i<36;i++)
{
document.getElementById("d"+i).innerHTML="";
}

var mm=0;



m=document.getElementById("txtm").value;
y=document.getElementById("txty").value;



if (m==1) {mm=31};
if (m==2) {mm=28;if(y % 4 ==0) {mm=29}};
if (m==3) {mm=31};
if (m==4) {mm=30};
if (m==5) {mm=31};
if (m==6) {mm=30};
if (m==7) {mm=31};
if (m==8) {mm=31};
if (m==9) {mm=30};
if (m==10) {mm=30};
if (m==11) {mm=30};
if (m==12) {mm=31};



var d = new Date(y,1.0*m-1,1,12,0,0,0);
var id="";
var id1=""
var p=0;
var i=0;



var n = d.getDay();
var finish=0;

if (n==1){document.getElementById("d1").innerHTML="1";}
if (n==2){document.getElementById("d2").innerHTML="1";}
if (n==3){document.getElementById("d3").innerHTML="1";}
if (n==4){document.getElementById("d4").innerHTML="1";}
if (n==5){document.getElementById("d5").innerHTML="1";}
if (n==6){document.getElementById("d6").innerHTML="1";}
if (n==0){document.getElementById("d7").innerHTML="1";}

var i0=n;
if (i0==0) {i0=7};

var v='';

for (i=1.0*i0+1; i<36;i++)
{
id ="d"+i
id1="d"+(1.0*i-1);
if (i>1)
{v=document.getElementById(id1).innerHTML;}

if(v!=null && 1.0*v+1 < mm+1 && finish==0) {document.getElementById(id).innerHTML=1.0*v+1;}
if(1*document.getElementById(id).innerHTML>mm-1) {finish=1}
}


if (1*document.getElementById('d35').innerHTML < mm && document.getElementById('d35').innerHTML != '')
{
document.getElementById('d1').innerHTML=1*document.getElementById('d35').innerHTML+1;

if(1*document.getElementById('d1').innerHTML < mm && document.getElementById('d1').innerHTML !=''){document.getElementById('d2').innerHTML=1*document.getElementById('d1').innerHTML+1 }

}





}







</script>
</head>
<body>

<h4>Month Calendar using Javscript, by Kamel Gazzah</h4>





<form id="f" >
<table border="0">
<tr>
<td>Month</td><td><input type="text" id="txtm" /></td>
<td>Year</td><td><input type="text" id="txty" /></td>

<td><input type="button" value="OK" onclick="cal()" /></td>
</tr>
</table>
<hr />
<br>
<table border="0" cellspacing="0" cellpadding="0" bordercolor="silver" width="20%" >
<tr>
<td class='el'>lun</th>
<td class='el'>mar</th>
<td class='el'>mer</th>
<td class='el'>jeu</th>
<td class='el'>ven</th>
<td class='el'>sam</th>
<td class='el'>dim</th>
</tr>

<tr>
<td class="el1" ><span id="d1"></span></td>
<td class="el1"><span id="d2" /></td>
<td class="el1"><span id="d3" /></td>
<td class="el1"><span id="d4" /></td>
<td class="el1"><span id="d5" /></td>
<td class="el1"><span id="d6" /></td>
<td class="el1"><span id="d7" /></td>
</tr>


<tr>
<td class="el1"><span id="d8" /></td>
<td class="el1"><span id="d9" /></td>
<td class="el1"><span id="d10" /></td>
<td class="el1"><span id="d11" /></td>
<td class="el1"><span id="d12" /></td>
<td class="el1"><span id="d13" /></td>
<td class="el1"><span id="d14" /></td>
</tr>

<tr>
<td class="el1"><span id="d15" /></td>
<td class="el1"><span id="d16" /></td>
<td class="el1"><span id="d17" /></td>
<td class="el1"><span id="d18" /></td>
<td class="el1"><span id="d19" /></td>
<td class="el1"><span id="d20" /></td>
<td class="el1"><span id="d21" /></td>
</tr>

<tr>
<td class="el1"><span id="d22" /></td>
<td class="el1"><span id="d23" /></td>
<td class="el1"><span id="d24" /></td>
<td class="el1"><span id="d25" /></td>
<td class="el1"><span id="d26" /></td>
<td class="el1"><span id="d27" /></td>
<td class="el1"><span id="d28" /></td>
</tr>

<tr>
<td class="el1"><span id="d29" /></td>
<td class="el1"><span id="d30" /></td>
<td class="el1"><span id="d31" /></td>
<td class="el1"><span id="d32" /></td>
<td class="el1"><span id="d33" /></td>
<td class="el1"><span id="d34" /></td>
<td class="el1"><span id="d35" /></td>
</tr>


</table>
</body>
</html>


     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend