Calendário no seu Site

Curso de JavaScript e jQuery

Dependendo do objetivo do seu site, de repente, é interessante você colocar um calendário em um local importante.
Parece difícil, mas não é, e você só precisa entender um pouquinho de HTML para identificar o local onde vai chamar a função para imprimir o calendário.
Basta abrir o código, marcá-lo e copiar (Ctrl+C), abrir o fonte do seu site (HTML) e colar (Ctrl+V) no local onde quer mostrar o calendário.




Não esqueça que as TAGs <style type=”text/css“> até a </script> que fica no final do código deve ser colado antes da TAG </head> da sua página.

<style type=”text/css”>
<!–
span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
–>
</style>

<script type=”text/javascript”>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
  }
  else{
  mDay = 31
  if(mm == 1){
    if (yyyy/4 – parseInt(yyyy/4) != 0){
    mDay = 28
    }
  else{
    mDay = 29
  }
}
  }
return mDay;
}
function changeBg(id){
if (eval(id).style.backgroundColor != “yellow”){
eval(id).style.backgroundColor = “yellow”
}
else{
eval(id).style.backgroundColor = “#ffffff”
}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array(“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”)
var arrY = new Array()
for (ii=0;ii<=4;ii++){
arrY[ii] = yyyy – 2 + ii
}
var arrD = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”)

var text = “”
text = “<form name=calForm>

text += “<table border=1>”
text += “
<tr><td>”
text += “<table width=100%>
<tr>”
text += “<td align=left>”
text += “<select name=selMonth onChange=’changeCal()’>”
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += “<option value= ” + ii + ” Selected>” + arrM[ii] + “</option>”
}
else{
text += “<option value= ” + ii + “>” + arrM[ii] + “</option>”
}
}
text += “</select>”
text += “</td>”
text += “<td align=right>”
text += “<select name=selYear onChange=’changeCal()’>”
for (ii=0;ii<=4;ii++){
if (ii==2){
text += “<option value= ” + arrY[ii] + ” Selected>” + arrY[ii] + “</option>”
}
else{
text += “<option value= ” + arrY[ii] + “>” + arrY[ii] + “</option>”
}
}
text += “</select>”
text += “</td>”
text += “</tr>
</table>

text += “</td></tr>

text += “
<tr><td>”
text += “<table border=1>”
text += “
<tr>”
for (ii=0;ii<=6;ii++){
text += “<td align=center><span class=label>” + arrD[ii] + “</span></td>”
}
text += “</tr>

aa = 0
for (kk=0;kk<=5;kk++){
text += “
<tr>”
for (ii=0;ii<=6;ii++){
text += “<td align=center><span id=sp” + aa + ” onClick=’changeBg(this.id)’>1</span></td>”
aa += 1
}
text += “</tr>

}
text += “</table>

text += “</td></tr>

text += “</table>

text += “</form>

document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM – 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY) – day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval(“sp”+ii).style.backgroundColor = “#FFFFFF”
}
var dCount = 0
for (ii=0;ii<=41;ii++){
if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
eval(“sp”+ii).innerHTML = arrN[ii]
eval(“sp”+ii).className = “c3”
}
else{
eval(“sp”+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==6)){
eval(“sp”+ii).className = “c2”
}
else{
eval(“sp”+ii).className = “c1”
}
if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval(“sp”+ii).style.backgroundColor=”#90EE90”
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}
//  End –>
</script>

 

Compartilhe com os amigosShare on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Uma resposta para “Calendário no seu Site”

  1. Agradeço imensamente a todos que deixam comentários e elogios no blog. Peço porém a quem deseja alguma resposta mais rápida entrar em contato por e-mail usando a aba Contato, pois devido a quantidade de comentários nos diversos artigos do blog, muitas vezes pode demorar até que eu chegue ao seu comentário.
    Muito obrigado.

    Thank you so much to all who leave comments and compliments on the blog. But I would ask anyone who wants a quicker response to contact us by email using the Contact tab, because due to the amount of comments in the various articles in the blog, it can often take until I get to your comment.
    Thank you very much.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *