Calendario

[Rafael da Silveira 1]

Galera, tenho uma calendário em javascript e esta funcionando perfeitamente.

Porém, preciso que independente da data de hoje...clicando em uma "seta" ele passe para o próximo mês, e quando acabar o ano ele adicione um ano automaticamente...

E para um mês anterior também...

 

 

 

Segue o código que já tenho...

function calendar(){

	hoje = new Date();
	
	dia = hoje.getDate();
	mes = hoje.getMonth();
	ano = hoje.getFullYear();
			  	  
    nomemes = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
	  
    inicio = new Date("1"+ nomemes[mes]+" "+ano);
	  
    letrasSemana = ["Dom","Seg","Ter","Qua","Qui","---","Sab"];
	  
    a = 0;
    bi = bissexto(ano)? 29 : 28;
	diasmes = [31,bi,31,30,31,30,31,31,30,31,30,31];
	
	var Calendar = document.createElement('div');
		Calendar.style.width = '210px';
		Calendar.style.height = '242px';
		Calendar.style.cursor = 'context-menu';
		  
	var Topo = document.createElement('div');
	  	Topo.style.position = 'relative';
		Topo.style.cssFloat = 'left';
		Topo.style.width = '100%';
		Topo.style.boxSizing = 'border-box';
		Topo.style.padding = '5px';
		Topo.style.background = 'linear-gradient(to bottom,#EEE,#DDD,#EEE)';
		Topo.style.borderBottom = '#CCC solid 1px';
		Topo.style.textAlign = 'center';
		Topo.innerHTML = nomemes[mes]+" de "+ano;	
	
	//NEXT
	var Next = document.createElement('img');
		Next.style.position = 'absolute';
		Next.style.top = '10px';
		Next.style.right = '4px';
		Next.style.width = '14px';
		Next.style.height = '14px';
		Next.style.cursor = 'pointer';
		Next.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTM2MC43MzEsMjI5LjA3NWwtMjI1LjEtMjI1LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwcy01LjMsMTMuOCwwLDE5LjFsMjE1LjUsMjE1LjVsLTIxNS41LDIxNS41ICAgYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0YzMuNCwwLDYuOS0xLjMsOS41LTRsMjI1LjEtMjI1LjFDMzY1LjkzMSwyNDIuODc1LDM2NS45MzEsMjM0LjI3NSwzNjAuNzMxLDIyOS4wNzV6ICAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
		
	//BACK
	var Back = document.createElement('img');
		Back.style.position = 'absolute';
		Back.style.top = '10px';
		Back.style.left = '4px';
		Back.style.width = '14px';
		Back.style.height = '14px';
		Back.style.cursor = 'pointer';
		Back.src = "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ny4xNzUgNDc3LjE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc3LjE3NSA0NzcuMTc1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE0NS4xODgsMjM4LjU3NWwyMTUuNS0yMTUuNWM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMXMtMTMuOC01LjMtMTkuMSwwbC0yMjUuMSwyMjUuMWMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjFsMjI1LjEsMjI1ICAgYzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMUwxNDUuMTg4LDIzOC41NzV6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==";
		
	//ADICIONA AO DOCUMENT
	document.querySelector('#calendario').appendChild(Calendar);
	Calendar.appendChild(Topo);
		
	Topo.appendChild(Back);
	Topo.appendChild(Next);
		
	  
    for(i=0; i<letrasSemana.length; i++){
	 	var t = document.createElement('div');
		 	t.style.position = 'relative';
			t.style.cssFloat = 'left';
			t.style.background = '#EEE';
			t.style.width = '30px';
			t.style.height = '30px';
			t.style.padding = '6px 0px';
			t.style.fontSize = '12px';
			t.style.textAlign = 'center';
			t.style.boxSizing = 'border-box';
			t.style.borderBottom = '#CCC solid 1px';
			t.innerHTML = letrasSemana[i];
			 
		 Calendar.appendChild(t);
     } 
	
    function bissexto(year) {          
		if(year % 4 == 0){
			 return true
		}else{
			return false
		}
	}

     if(inicio.getDay()== 0){
		increase = 0; 
	 }else{
		increase = 1;
	 }
		
    for(i=1; a < diasmes[mes]; i++){
       if(i <inicio.getDay() +increase){
		  var t = document.createElement('div');
		 	  t.style.position = 'relative';
			  t.style.cssFloat = 'left';
			  t.style.background = '#EEE';
			  t.style.width = '30px';
			  t.style.height = '30px';
			  t.style.paddingTop = '3px';
			  t.style.boxSizing = 'border-box';
			  t.style.textAlign = 'center';
			  
		Calendar.appendChild(t);          
	  }else{   
				a++;               
				if(a == dia){ 
					var t = document.createElement('div');
		 			    t.style.position = 'relative';
					    t.style.cssFloat = 'left';
					    t.style.background = '#03C';
						t.style.color = '#FFF';
						t.style.width = '30px';
						t.style.height = '30px';
						t.style.paddingTop = '4px';
						t.style.boxSizing = 'border-box';
						t.style.textAlign = 'center';
					    t.innerHTML = a;
					    Calendar.appendChild(t); 
				}else{
					var t = document.createElement('div');
						t.setAttribute('class','days');
		 			    t.style.position = 'relative';
					    t.style.cssFloat = 'left';
					    t.style.background = 'none';
					    t.style.width = '30px';
						t.style.height = '30px';
						t.style.paddingTop = '4px';
						t.style.boxSizing = 'border-box';
						t.style.textAlign = 'center';
					    t.innerHTML = a;
					    Calendar.appendChild(t);
				}	
			}
	  	}
		
		//OVER OUT
		var allDays = document.querySelectorAll('.days');
			for(i=0; i < allDays.length; i++){
				allDays[i].onmouseover = function(){
					this.style.background = '#06F';
					this.style.color = '#FFF';
				}
				allDays[i].onmouseout = function(){
					this.style.background = 'none';
					this.style.color = '#000';
				}
			}
			
 }

calendar();