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


Top 5 Contributors of the Month
Easy Web
Imran Ghani

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

 Subscribe to Code Snippets

Year Calendar with Week numbers

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

This is a nice Javascript Year Calendar with week number with Perspective view using CSS3 Transform
 

Here  a nice Javascript Year Calendar with week numbers
with Perspective view using CSS3 Transform.
<html>
<head>
<title>Year Calendar</title>
<style>
.thisweek
{
color:white;
background-color:rgba(50,100,255,1);
}
.week
{
color:white;
background-color:green;
}
.div0
{
padding-left:100px;
padding-top:50px;
}
.div1 {
    padding-left:100px;
	padding-top:50px;
    transform: perspective( 800px ) rotateY( 10deg );
}
input
{
border-radius: 10px 10px 0px 0px;
padding-left:5px;
color:blue;

}
.today
{
background-color:rgba(100, 150, 255, 1);
border-radius: 10px 10px 10px 10px;
padding-left:10px;
text-decoration:bold;
color:white;
}
.nottoday
{
background-color:white;
border-radius: 10px 10px 10px 10px;
padding-left:7px;
text-decoration:none;
}
span
{
background-color:rgba(100, 100, 255, 1);
border-radius: 10px 10px 0px 0px;
display:block;
color:white;
padding:2px;
text-decoration:bold;
}
.span2
{
background-color:rgba(255, 255, 255, 1);
border-radius: 10px 10px 10px 10px;
display:block;
color:blue;
padding:2px;
text-decoration:bold;
}
table
{
border:solid;
border-width:0px;
border-color:silver;
border-radius: 5px 5px 5px 5px;
}
td
{
font-size:12px;
}


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


    
}

.spanhtml
{
height:100%;
}


.button
{
 border-radius: 5px 5px 10px 10px;
 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:0px 0px 10px 10px;
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 white;
background-color:rgba(120,120,120,1);
font-size:16px;
color:white;
padding-left:0px;

}

.el2
{
border-style: solid;
border-width:1px;
border-color: silver silver silver white;
font-size:16px;
color:green;
padding-left:5px;
}
</style>
<script>
/* Year Calendar 
   Using JAVASCRIPT
   by Kamel Gazzah
   kamelgazzah@gmail.com
   June 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=["Sem","Lun","Mar","Mer","Jeu","Ven","Sam","Dim"];
var day_en=["Week","Mon","Tue","Wen","Thu","Fri","Sat","Sun"];


/*http://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php*/
function week(d)
 {
    var onejan = new Date(d.getFullYear(),0,1);
    var millisecsInDay = 86400000;
    return Math.ceil((((d - onejan) /millisecsInDay) + onejan.getDay()+1)/7);
};

function weeks()
{
/*var Y=document.getElementById("txty").value;
var d=new Date(Y,0,1);
var w=week(d);*/
var fd=0;
var inc=0;
if(document.getElementById("m1_1")!=null){fd=1*document.getElementById("m1_1").innerHTML;};
if (fd!=1){fd=0;}
for(m=1;m<13;m++)
{

id="m"+m+"_w_0";
if(document.getElementById(id)!=null){
switch(navigator.language.substring(0, 2).toLowerCase())
	{
	case 'fr':document.getElementById(id).innerHTML=day_fr[0];
	case 'en':document.getElementById(id).innerHTML=day_en[0];
	}
}


for(j=1;j<7;j++)
{
id="m"+m+"_w_"+(1*j*7);
if(document.getElementById("m"+m+"_"+(1+7*(j-1))).innerHTML !="") {inc=inc+1;};
if((document.getElementById("m"+m+"_"+(1+7*(j-1))).innerHTML !="") || (document.getElementById("m"+m+"_"+(7*(j))).innerHTML !=""))
{
if(document.getElementById(id)!=null){if(fd+(m-1)*7+(j-1) !=0){document.getElementById(id).innerHTML=fd+inc;document.getElementById(id).className="week";}}
}
}}}

function rotateuser(rotation,deg)
{
var rotation=document.getElementById('txtpers').value;
var deg=document.getElementById('txtrotate').value;
document.getElementById("mydiv").style.webkitTransform = "perspective( "+rotation+"px ) rotateY( "+deg+"deg )";
}
function rotate()
{document.getElementById("mydiv").className="div1";}

function beforerotate()
{document.getElementById("mydiv").className="div0";}

function mois()
{
	
	var m;	
	var id ="";
	var i=0;	
	
	switch(navigator.language.substring(0, 2).toLowerCase())
	{
	case 'fr':
		
	document.getElementById('lby').innerHTML='Année';
	for(i=0;i<7;i++)
	{
	for(j=0;j<13;j++)
	{
	id="m"+j+"_d_"+(1*i+1);
	document.getElementById(id).innerHTML=day_fr[i+1];
	}
	}
	        
    for(i=0;i<12;i++)
	{document.getElementById('s'+(1*i+1)).innerHTML = months_ff[i];}
	
	
	case 'en':
	
	
	document.getElementById('lby').innerHTML='Year';
	
	for(i=0;i<7;i++)
	{
	for(j=0;j<12;j++)
	{
	id="m"+(1*j+1)+"_d_"+(1*i+1);	
	
	if(document.getElementById(id)!=null){document.getElementById(id).innerHTML=day_en[i+1];}
	}
	}
	for(i=0;i<12;i++)
	{
	document.getElementById('s'+(1*i+1)).innerHTML = months_en[i];
    }
	
	}	
	


}

function yearp()
{
var d= new Date();
var y=d.getFullYear();
if(document.getElementById("txty").value==''){document.getElementById("txty").value=y-1;}
document.getElementById("txty").value =1*document.getElementById("txty").value+1;

cal();
rotate();

}
function yearm()
{
var d= new Date();
var y=d.getFullYear();
if(document.getElementById("txty").value==''){document.getElementById("txty").value=y+1;}
document.getElementById("txty").value -=1;
cal();
}
function cal()
{
init();
var y;
var x=0;
var d = new Date();
if(document.getElementById("txty").value=='') {document.getElementById("txty").value=d.getFullYear()}
y=document.getElementById("txty").value;



var mm=0;



for (m=1;m<13;m++)
{



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){if(document.getElementById("m"+m+"_1")!=null){document.getElementById("m"+m+"_1").innerHTML="1";}}
if (n==2){if(document.getElementById("m"+m+"_2")!=null){document.getElementById("m"+m+"_2").innerHTML="1";}}
if (n==3){if(document.getElementById("m"+m+"_3")!=null){document.getElementById("m"+m+"_3").innerHTML="1";}}
if (n==4){if(document.getElementById("m"+m+"_4")!=null){document.getElementById("m"+m+"_4").innerHTML="1";}}
if (n==5){if(document.getElementById("m"+m+"_5")!=null){document.getElementById("m"+m+"_5").innerHTML="1";}}
if (n==6){if(document.getElementById("m"+m+"_6")!=null){document.getElementById("m"+m+"_6").innerHTML="1";}}
if (n==0){if(document.getElementById("m"+m+"_7")!=null){document.getElementById("m"+m+"_7").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();




for (i=1.0*i0+1; i<38;i++)
{
	
		id ="m"+m+"_"+i				
		id1="m"+m+"_"+(1.0*i-1);
		var li=0;
		if (i>0)
		{if(document.getElementById(id1)!=null) {v=document.getElementById(id1).innerHTML;}}

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

        if(document.getElementById(id)!=null)
		{
		if(document.getElementById(id).innerHTML==dtoday && m==mtoday && y==ytoday) 
			
		/*{document.getElementById(id).style.backgroundColor="green";document.getElementById(id).style.Color="white"}*/
		{
		document.getElementById(id).className="today";
		
		li=Math.floor(i/7);
		
		for(x=1;x<8;x++)
		{if(7*li+x !=i){document.getElementById("m"+m+"_"+((7*li)+1*x)).className="thisweek";}}		
		
		
		
		}
		}
		else{
		if(document.getElementById(id)!=null)
		{document.getElementById(id).className="nottoday"};}
		
	
}


/*-------------

if(document.getElementById('m'+m+'_'+'35')!=null)
{
if (1*document.getElementById('m'+m+'_'+'35').innerHTML < mm && document.getElementById('m'+m+'_'+'35').innerHTML != '')
{
document.getElementById('m'+m+'_'+'1').innerHTML=1*document.getElementById('m'+m+'_'+'35').innerHTML+1;
if(1*document.getElementById('m'+m+'_'+'1').innerHTML < mm && document.getElementById('m'+m+'_'+'1').innerHTML !=''){document.getElementById('m'+m+'_'+'2').innerHTML=1*document.getElementById('m'+m+'_'+'1').innerHTML+1 }
if(document.getElementById('m'+m+'_'+'1').innerHTML==dtoday && m==mtoday && y==ytoday) {document.getElementById('m'+m+'_'+'1').className="today";document.getElementById('m'+m+'_'+'1').style.Color="white"}else{document.getElementById('m'+m+'_'+'1').style.backgroundColor="white"};
if(document.getElementById('m'+m+'_'+'2').innerHTML==dtoday && m==mtoday && y==ytoday) {document.getElementById('m'+m+'_'+'2').className="today";document.getElementById('d2').style.Color="white"}else{document.getElementById('m'+m+'_'+'2').style.backgroundColor="white"};
}
}
*/

}
mois();

}

function init()
{
    var m;
	var tab;
	for (m=1;m<13;m++)
	{
	tab='m'+m;
	var table = document.getElementById(tab); 	
	for(r=1;r<7;r++)	
	{	
	
	for(l=0;l<7;l++)
	{
	id=tab+'_'+1*(1+(r-1)*7+1*l);
	if(document.getElementById(id) !=null) {document.getElementById(id).innerHTML='';document.getElementById(id).className="nottoday";}
	id=tab+'_w_'+(1*l+1)*7;
	if(document.getElementById(id) !=null) {document.getElementById(id).innerHTML='';}}	
	}
}	

}

function create_tab(tab)
{
	var table = document.getElementById(tab); 	
	for(r=0;r<7;r++)	
	{	
	row = document.createElement("tr");
	for(l=-1;l<7;l++)
	{
	cell = document.createElement("td");
	if(r==0){cell.id=tab+'_d_'+(1*l+1);cell.innerText=day_fr[l+1];cell.className='el1';} else  {cell.id=tab+'_'+1*(1+(r-1)*7+1*l);cell.innerText='';}
	if(l==-1){cell.id=tab+'_w_'+r*7;}
	row.appendChild(cell);
	}
	table.appendChild(row);
	}	

}
function create_all_tab()
{
for(i=1;i<13;i++)
{
var id="m"+i;
create_tab(id);
}
yearp();
weeks();
}
</script>
</head>
<body onload="create_all_tab();">

<table width="100%">
<tr>

<td width="100%">
<div id="mydiv">
<table width="100%">
<tr><td><span id="lby" class="span2"></span></td>
<td><input class="button" type="button" value="<" id="ym" onclick="yearm();weeks();" /></td>
<td><input type="text" id="txty" size="2"   /></td>
<td><input class="button" type="button" value=">" id="yp" onclick="yearp();weeks();"/></td>
<td>
Perspective: <input type="text" id="txtpers" size="2" value="800" />
Roation:<input type="text" id="txtrotate" value="10" size="2"/>
<input type="button" value="transform" onclick="rotateuser()" /></td>
</tr>
</table>
<table width="70%" id="tabcal" border="0" cellpadding="2" cellspacing="2">


<tr>
<td>
<table>
<tr><td align="center"><span id="s1">Janvier</span></td></tr>
<tr><td><table id="m1"></table></td></tr>
</table>
</td>

<td valign="top">
<table>
<tr><td align="center"><span id="s2">Février</span></td></tr>
<tr><td><table id="m2"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s3">Mars</span></td></tr>
<tr><td><table id="m3"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s4" >Avril</span></td></tr>
<tr><td><table id="m4"></table></td></tr>
</table>
</td>


</tr>
<tr>

<td>
<table>
<tr><td align="center"><span id="s5">Mai</span></td></tr>
<tr><td><table id="m5"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s6">Juin</span></td></tr>
<tr><td><table id="m6"></table></td></tr>
</table>
</td>


<td>
<table>
<tr><td align="center"><span id="s7">Juillet</span></td></tr>
<tr><td><table id="m7"></table></td></tr>
</table>
</td>


<td>
<table>
<tr><td align="center"><span id="s8">Aout</span></td></tr>
<tr><td><table id="m8"></table></td></tr>
</table>
</td>

</tr>

<tr>
<td>
<table>
<tr><td align="center"><span id="s9">Septembre</span></td></tr>
<tr><td><table id="m9"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s10">Octobre</span></td></tr>
<tr><td><table id="m10"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s11">Novembre</span></td></tr>
<tr><td><table id="m11"></table></td></tr>
</table>
</td>

<td>
<table>
<tr><td align="center"><span id="s12">Décembre</span></td></tr>
<tr><td><table id="m12"></table></td></tr>
</table>
</td>
</tr>

<script>
cal();
</script>
</body>
</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