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


Top 5 Contributors of the Month
MarieAdela
Imran Ghani

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

 Subscribe to Code Snippets

A month calendar using Browser Language

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

Javascript, HTML
 

Here a new version of the previous code, making month calendar, to which added
- display month label according to browser language: French and English
- Increment and decrement the month
Hope you find this code usefull.

<html>
<head>
<style>

.button
{
 border-radius: 5px 5px 5px 5px;
 background-color:rgba(255, 200, 0, 1);
}
.button2
{
 border-radius: 20px 25px 20px 25px;
 background-color:rgba(255, 200, 160, 1);

}


.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;
}
.el2
{
border-style: solid;
border-width:1px;
border-color: silver silver silver white;
font-size:12px;
color:red;
}
</style>

<script>
/*
--Calendar by Kamel Gazzah
--kamelgazzah@gmail.com
--May 2016
*/


var months_ff=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre"];
var months_en=["January","February","March","April","May","June","July","August","September","October","November","December"];
var day_fr=["Lun","Mar","Mer","Jeu","Ven","Sam","Dim"];
var day_en=["Mon","Tus","Wen","Thu","Fri","Sat","Sun"];







function display_month()
{
if (!document.getElementById("txtm").value.isNaN){document.getElementById("sm").innerHTML=mois(document.getElementById("txtm").value)}
}


function mois(n)
{
	
	var m;	
	var id ="";
	var i=0;	
	
	switch(navigator.language.substring(0, 2).toLowerCase())
	{
	case 'fr':
	m=months_ff[n-1];
	document.getElementById('lbm').innerHTML='Mois';
	document.getElementById('lby').innerHTML='Année';
	for(i=0;i<7;i++)
	{
	id="j"+(1*i+1);
	document.getElementById(id).innerHTML=day_fr[i];
	}
	break;
	case 'en':
	m=months_en[n-1];
	document.getElementById('lbm').innerHTML='Month';
	document.getElementById('lby').innerHTML='Year';
	for(i=0;i<7;i++)
	{
	id="j"+(1*i+1);
		
	document.getElementById(id).innerHTML=day_en[i];
	
	}
	break;
	}	
	return m;


}


function plus()
{
if(document.getElementById("txtm").value.isNaN)
{document.getElementById("txtm").value = 1;}
else
{document.getElementById("txtm").value = 1*document.getElementById("txtm").value+1;
if(document.getElementById("txtm").value>12)
{
document.getElementById("txtm").value = 1;
document.getElementById("txty").value = 1*document.getElementById("txty").value+1;
}}
cal();
}





function moins()
{
if(document.getElementById("txtm").value.isNaN)
{document.getElementById("txtm").value = 12;}
else
{document.getElementById("txtm").value -= 1;
if(document.getElementById("txtm").value<1){
document.getElementById("txtm").value = 12;
document.getElementById("txty").value = 1*document.getElementById("txty").value-1;
}
}
cal();
}




function go()
{
var d = new Date();
document.getElementById("txtm").value=1+d.getMonth();
document.getElementById("txty").value=d.getFullYear();
cal();
}

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 }

}
display_month();
}




</script>
</head>
<body onload="go()">
<form id="f" >
<table border="0" class="el1" width="20%">
<tr>
<td class="el"><span id="lbm">Mois</span></td>
<td><input type="text" id="txtm" size="2" /></td>
<td class="el"><span id="lby">Année</span></td><td><input type="text" id="txty" size="2" /></td>
<td><input type="button" value="OK" onclick="cal()" class="button" /></td>
</tr>
</table>
<hr />

<table width="20%">
<tr><td width="50%"><span id="sm"></span></td>
<td width="50%" align="right"><input type="button" value="<" id= "p" onclick= "moins()" class="button2">
<input type="button" value=">" id= "p" onclick= "plus()"  class="button2">
</td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" bordercolor="silver" width="20%"  >
<tr>
<td class='el'><span id="j1">lun</span></th>
<td class='el'><span id="j2">mar</span></th>
<td class='el'><span id="j3">mer</span></th>
<td class='el'><span id="j4">jeu</span></th>
<td class='el'><span id="j5">ven</span></th>
<td class='el'><span id="j6">sam</span></th>
<td class='el'><span id="j7">dim</span></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="el2"><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="el2"><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="el2"><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="el2"><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="el2"><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