Calendarios y relojes para tu sitio web.

<HTML>
<HEAD>
<title>Calendario con el día de la semana, día del mes, el mes y el año</title>
</HEAD>
<body>

      <P style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 10px; LINE-HEIGHT: 7px" 
      align=center><FONT face=Verdana size=4>
<SCRIPT>
	var mydate=new Date();
	var year=mydate.getYear();
	if (year < 1000)
		year+=1900;
	var day=mydate.getDay();
	var month=mydate.getMonth();
	var daym=mydate.getDate();
	if (daym<10)
		daym="0"+daym;

var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado");
	var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
	document.write("<small><font color='000000'  face='Arial'><b>"+ dayarray[day] + " " + daym + " de " + montharray[month] + " de " + year + "</b></font></small>");

</SCRIPT>
</font>
      <P style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 10px; LINE-HEIGHT: 7px" 
      align=left>Por cortesía de <a href="http://www.uterra.com">www.uterra.com</a>
</BODY>
</HTML>

Ver demostración

CÓDIGO 0258

Calendario en línea de texto II.

Este código ofrece lo mismo que el anterior pero con una sintaxis distinta.

CÓDIGO 0259

Calendario básico.

Calendario dia, mes y año

CÓDIGO 0260

Calendario del año.

Este script ofrece el calendario del año 2005, pero puede configurarse para cualquier otro año

<html> <head> <title>Calendario del año 2005</title> </head> <body> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="400"> <tr> <td> <p align="center"> <script language="javascript">  </script> <script language="javascript"> // year year=2005 // first day of the week of the new year today= new Date("January 1, "+year) start_day = today.getDay() + 1 // starts with 0 fill_table("Enero",31) fill_table("Febrero",28) fill_table("Marzo",31) fill_table("Abril",30) fill_table("Mayo",31) fill_table("Junio",30) fill_table("Julio",31) fill_table("Agosto",31) fill_table("Septiembre",30) fill_table("Octubre",31) fill_table("Noviembre",30) fill_table("Diciembre",31) </script> </td> </tr> </table> </center> </div> <p align="center">Por cortesía de <a href="http://www.uterra.com">www.uterra.com</a> </p> </body> </html>

Ver demostración

CÓDIGO 0261

Calendario del mes.

Un practico calendario que ofrece el mes en curso y un saludo.

<html> <head> <title>Un calendario del mes corriente muy útil</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> function greeting() { var today = new Date(); var hrs = today.getHours(); document.writeln("<CENTER>"); document.writeln("<BR>"); document.write("<H1>Buen"); if (hrs < 6) document.write("as Noches"); else if (hrs < 12) document.write(" Día"); else if (hrs <= 18) document.write("as Tardes"); else document.write("as Noches"); document.writeln("!</H1>"); document.write("Hoy es "); dayStr = today.toLocaleString(); document.write(dayStr); document.writeln("</CENTER>"); } function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } function calendar() { var monthNames = "EneFebMarAbrMayJunJulAgoSepOctNovDic"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); year = today.getYear() ; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); // works fine for most systems testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.writeln("<CENTER>"); document.write("<TABLE BORDER>"); document.write("<TR><TH COLSPAN=7>"); document.write(monthNames.substring(today.getMonth() * 3, (today.getMonth() + 1) * 3)); document.write(". "); document.write(year); document.write("<TR><TH>Dom<TH>Lun<TH>Mar<TH>Mie<TH>Jue<TH>Vie<TH>Sab"); document.write("<TR>"); column = 0; for (i=0; i<startDay; i++) { document.write("<TD>"); column++; } for (i=1; i<=nDays; i++) { document.write("<TD>"); if (i == thisDay) document.write("<FONT COLOR=\"#FF0000\"><b>") document.write(i); if (i == thisDay) document.write("</b></FONT>") column++; if (column == 7) { document.write("<TR>"); column = 0; } } document.write("</TABLE>"); document.writeln("</CENTER>"); } greeting(); document.write("</br>"); calendar(); document.write(""); </SCRIPT> <p>Por cortesía de <a href="http://www.uterra.com">www.uterra.com</a> </p> </body> </html>

Ver demostración

CÓDIGO 0262

El mes de cada año.

Este script permite mostrar el mes que quiera del año que se seleccione.

<html> <head> <title>Calendario que ofrece cada mes del año seleccionado, muy bueno</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var now = new Date(); var month_array = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); document.write("<form name=date_list><table bgcolor=silver><tr><td>"); document.write("<select name=month onchange=change_month(this.options.selectedIndex)>"); for(i=0;i<month_array.length;i++) { if (now.getMonth() != i) {document.write ("<option value="+i+">"+month_array[i]);} else {document.write ("<option value="+i+" selected>"+month_array[i]);} } document.write("</select>"); document.write("</td><td>"); document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>"); for(i=1950;i<3000;i++) { if (now.getYear() != i) {document.write("<option value="+i+">"+i);} else {document.write("<option value="+i+" selected>"+i);} } document.write("</select></td></tr><tr><td colspan=2><center>"); document.write("<table bgcolor=white border=0 cellspacing = 0 cellpading = 0 width=500><tr bgcolor=gray align=center>"); document.write("<td><font color=silver>Lunes</font></td><td><font color=silver>Martes</td><td><font color=silver>Miercoles</td><td><font color=silver>Jueves</td><td><font color=silver>Viernes</td><td ><font color=silver>Sábado</td><td ><font color=silver>Domingo</td>"); document.write("</tr><tr>"); for(j=0;j<6;j++) { for(i=0;i<7;i++) { document.write("<td align=center id=d"+i+"r"+j+"></td>") } document.write("</tr>"); } document.write("</table>"); document.write("</center></from></td></tr></table>"); var show_date = new Date(); function set_cal(show_date) { begin_day = new Date (show_date.getYear(),show_date.getMonth(),1); begin_day_date = begin_day.getDay(); end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1); count_day = (end_day - begin_day)/1000/60/60/24; input_table(begin_day_date,count_day); } set_cal(show_date); function input_table(begin,count) { init(); j=0; if (begin!=0){i=begin-1;}else{i=6} for (c=1;c<count+1;c++) { colum_name = eval("d"+i+"r"+j); if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "blue";colum_name.style.color = "white";}; colum_name.innerText = c; i++; if (i==7){i=0;j++;} } } function init() { for(j=0;j<6;j++) { for(i=0;i<7;i++) { colum_name = eval("d"+i+"r"+j); colum_name.innerText = "-"; colum_name.style.backgroundColor =""; colum_name.style.color =""; } } } function change_month(sel_month) { show_date = new Date(show_date.getYear(),sel_month,1); set_cal(show_date); } function change_year(sel_year) { sel_year = sel_year.value; show_date = new Date(sel_year,show_date.getMonth(),1); set_cal(show_date); } // End --> </script> <p align="center">Por cortesía de <a href="http://www.uterra.com">www.uterra.com</a> </p> </body> </html>

Ver demostración

Página anterior

Página siguiente