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


Top 5 Contributors of the Month
Ava Aiden
Imran Ghani
Thomas Shaw

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

 Subscribe to Code Snippets

Calendar with links

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

HTML, Javascript
 

Here an improved version of the previous JavaScript calendar, to which I added new features:

- Depending on browser language: the months and days are translated, languages supported English and French
You can add more languages.

- Each day has a link to Wikipedia page about the selected date, you can add different links which will make this calendar more dynamic.


<html>
<head>
<title>Calendar</title>
<style>

a {
    color: green;
    background-color:rgba(255, 200, 160, 1);	
    text-decoration:none;


    
}

.spanhtml
{
height:100%;
}


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

}

.el01
{
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:white;
background-color:rgba(50, 100, 250, 1);
border-radius: 10px 0px 0px 0px;
padding-left:5px;
}

.el02
{
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:white;
background-color:rgba(50, 100, 250, 1);
border-radius: 0px 10px 0px 0px;
padding-left:5px;
}




.el
{
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:white;
background-color:rgba(50, 100, 250, 1);
padding-left:5px;
}

.el12
{
border-radius:15px;
background-color:rgba(100, 150, 250, 1);
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:white;
font-weight: bold;
padding-left:5px;
}





.el11
{
border-top-left-radius:15px;
border-top-right-radius:15px;
border-style: solid;
border-width:1px;
border-color: silver silver silver silver;
font-size:12px;
color:green;
padding-left:5px;
}

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

.el2
{
border-style: solid;
border-width:1px;
border-color: silver silver silver white;
font-size:12px;
color:red;
padding-left:5px;
}
</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","Tue","Wen","Thu","Fri","Sat","Sun"];


function linkof(idspan)
{
var d=0;
var m=0;
var mm="";

var url="https://en.wikipedia.org/wiki/"; 
d=document.getElementById(idspan).innerHTML;
m=document.getElementById("txtm").value;
mm=months_en[m-1];
url=url+mm+"_"+d;

document.getElementById('spandest').innerHTML='<object id="obj1" style="overflow:auto;width:100%;height:100%" type="text/html" data="'+url+'" ></object>';

}



function ctrinc(id,inc)
{
if(document.getElementById(id) !=null)
{
document.getElementById(id).value=inc+1*document.getElementById(id).value;
}
}


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];
	}
          
        for(i=0;i<12;i++)
	{
	document.getElementById('txtm').options[i].text = months_ff[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];
	
	}
	for(i=0;i<12;i++)
	{
	document.getElementById('txtm').options[i].text = months_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;
}}
if(document.getElementById("txtm").value>12)
{document.getElementById("txtm").value = 1;}

if(document.getElementById("txtm").value<1)
{document.getElementById("txtm").value = 12;}
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=31};
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='';


var dattoday = new Date();
var mtoday=1+dattoday.getMonth();
var ytoday=dattoday.getFullYear();
var dtoday=dattoday.getDate();

/*alert(mtoday);
alert(ytoday);
alert(dtoday);*/


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(document.getElementById(id).innerHTML==dtoday && m==mtoday && y==ytoday) {document.getElementById(id).style.backgroundColor="red";document.getElementById(id).style.Color="white"}
		else{document.getElementById(id).style.backgroundColor="white"};
		
	
}


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 }

if(document.getElementById('d1').innerHTML==dtoday && m==mtoday && y==ytoday) {document.getElementById('d1').style.backgroundColor="red";document.getElementById('d1').style.Color="white"}else{document.getElementById('d1').style.backgroundColor="white"};
if(document.getElementById('d2').innerHTML==dtoday && m==mtoday && y==ytoday) {document.getElementById('d2').style.backgroundColor="red";document.getElementById('d2').style.Color="white"}else{document.getElementById('d2').style.backgroundColor="white"};


}
display_month();
}




</script>
</head>
<body onload="go()">

<table width="100%" border="0" height="100%">

<tr>


<td width="20%" valign="top">






<table border="0" class="el11" width="100%" >
<tr>
<td class="el"><span id="lbm">Mois</span></td>
<td>
<select id="txtm">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avril</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Aout</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>

<!--<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 id="b001" type="button" value="<" onclick='ctrinc("txty",-1)'/><input id="b002" type="button" value=">" onclick='ctrinc("txty",+1)'/></td>
<td><input type="button" value="OK" onclick="cal()" class="button" /></td>
</tr>
</table>


<table width="100%" class="el12">
<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="100%"  >
<tr>
<td class='el01'><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='el02'><span id="j7">dim</span></th>
</tr>
<tr>
<td class="el1"><a href="javascript:linkof('d1')"><span id="d1" ></span></td>
<td class="el1"><a href="javascript:linkof('d2')"><span id="d2" /></td>
<td class="el1"><a href="javascript:linkof('d3')"><span id="d3" /></td>
<td class="el1"><a href="javascript:linkof('d4')"><span id="d4" /></td>
<td class="el1"><a href="javascript:linkof('d5')"><span id="d5" /></td>
<td class="el1"><a href="javascript:linkof('d6')"><span id="d6" /></td>
<td class="el2"><a href="javascript:linkof('d7')"><span id="d7" /></td>
</tr>
<tr>
<td class="el1"><a href="javascript:linkof('d8')"><span id="d8"  /></a></td>
<td class="el1"><a href="javascript:linkof('d9')"><span id="d9"  /></a></td>
<td class="el1"><a href="javascript:linkof('d10')"><span id="d10" /></a></td>
<td class="el1"><a href="javascript:linkof('d11')"><span id="d11" /></a></td>
<td class="el1"><a href="javascript:linkof('d12')"><span id="d12" /></a></td>
<td class="el1"><a href="javascript:linkof('d13')"><span id="d13" /></a></td>
<td class="el2"><a href="javascript:linkof('d14')"><span id="d14" /></a></td>
</tr>
<tr>
<td class="el1"><a href="javascript:linkof('d15')"><span id="d15" /></a></td>
<td class="el1"><a href="javascript:linkof('d16')"><span id="d16" /></a></td>
<td class="el1"><a href="javascript:linkof('d17')"><span id="d17" /></a></td>
<td class="el1"><a href="javascript:linkof('d18')"><span id="d18" /></a></td>
<td class="el1"><a href="javascript:linkof('d19')"><span id="d19" /></a></td>
<td class="el1"><a href="javascript:linkof('d20')"><span id="d20" /></a></td>
<td class="el2"><a href="javascript:linkof('d21')"><span id="d21" /></a></td>
</tr>

<tr>
<td class="el1"><a href="javascript:linkof('d22')"><span id="d22" /></a></td>
<td class="el1"><a href="javascript:linkof('d23')"><span id="d23" /></a></td>
<td class="el1"><a href="javascript:linkof('d24')"><span id="d24" /></a></td>
<td class="el1"><a href="javascript:linkof('d25')"><span id="d25" /></a></td>
<td class="el1"><a href="javascript:linkof('d26')"><span id="d26" /></a></td>
<td class="el1"><a href="javascript:linkof('d27')"><span id="d27" /></a></td>
<td class="el2"><a href="javascript:linkof('d28')"><span id="d28" /></a></td>
</tr>

<tr>
<td class="el1"><a href="javascript:linkof('d29')"><span id="d29" /></a></td>
<td class="el1"><a href="javascript:linkof('d30')"><span id="d30" /></a></td>
<td class="el1"><a href="javascript:linkof('d31')"><span id="d31" /></a></td>
<td class="el1"><a href="javascript:linkof('d32')"><span id="d32" /></a></td>
<td class="el1"><a href="javascript:linkof('d33')"><span id="d33" /></a></td>
<td class="el1"><a href="javascript:linkof('d34')"><span id="d34" /></a></td>
<td class="el2"><a href="javascript:linkof('d35')"><span id="d35" /></a></td>
</tr>
</table>

</td>

<td width="70%"  valign="top" height="100%">
<div id="spandest" class="spanhtml">

</div>


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