Tecnología

Inicio

Cómo agregar un calendario Javascript para una página Web

Cómo agregar un calendario Javascript para una página Web


Hay muchos calendarios JavaScript gratis que puedes descargar y agregar a su página web. Los más simples generan un calendario para el mes en curso. calendarios más elegantes proporcionan mes y año de selección de menús, funciones para insertar la fecha seleccionada en un campo de formulario e incluso una lista de eventos desde un archivo externo. La mayoría de los calendarios de JavaScript se proporcionan con instrucciones y generalmente se instalan siguiendo los mismos pasos básicos. de Brian Gosselin \ "Calendario Básico \" le proporcionará un pequeño calendario generado automáticamente que es fácil de instalar y utilizar.

Instrucciones

1 Descargar Calendario guión básico de Brian Gosselin (enlace que aparece en la sección de Referencias) y guardarlo en la misma carpeta con su página web.

2 Abra su página web en un editor de texto.

3 Agregue el código siguiente en el área de la cabeza de su página web, después de la etiqueta <HEAD> de partida y antes de la etiqueta de cierre </ HEAD>.

<Style type = \ "text / css \">
.principal {
Anchura: 200px
IR
flotador izquierdo
IR
}
.month {
background-color: negro
IR
color blanco
IR
}

.días de la semana {
background-color: plata
IR
}

.días {
fuente: normal de 12 píxeles de sans serif
IR
}

#today .days {
font-weight: bold
IR
color rojo
IR
}
</ Style>

<Script type = \ "text / javascript \" src = \ "basiccalendar.js \">
/ * **

Calendario-básica Por Brian Gosselin en http://scriptasylum.com/bgaudiodr/Script ofrecido en Dynamic Drive (http://www.dynamicdrive.com) Este aviso debe permanecer intacto para useVisit http://www.dynamicdrive.com/ para el código fuente completo
* ** /
</ script>

4 Agregue el código siguiente en el que desea que aparezca el calendario en el cuerpo de su página web, después de la etiqueta <BODY> de partida y antes de la etiqueta de cierre </ body>:

<Script type = \ "text / javascript \">
var hoy = new Date ()
IR
var = mes today.getMonth () + 1;
año var = today.getFullYear ();
document.write (buildCal (mes, año, \ "principal \", \ "mes \", \ "DaysOfWeek \", \ "días \", 1))
IR
</ Script>

El \ "vars \" (valores de variables) hoy en día, mes y año se establecerá en la fecha de hoy. Tenga en cuenta que \ "getMonth \" empieza a contar con enero como el número \ "0 \", así se añade uno a \ "mes \" para establecerlo en el número correcto, de 1 a 12, para el mes en curso.

5 Guarde la página web.

6 Abra su página web en un navegador web. Modificar el estilo CSS en la sección de cabecera de su página web para que coincida con la combinación de colores, el diseño y las preferencias. Consulte la sección Referencias para un enlace a un tutorial de CSS.

Consejos y advertencias

  • Consulte la sección Referencias para un enlace a información de calendario básico de Brian Gosselin para aprender más acerca del uso de su guión calendario y ver un ejemplo de la adición de un año calendario completo a su página web.
  • Busque otros calendarios JavaScript que tienen opciones más elegantes. Vea la sección Recursos para obtener enlaces a sitios naturales de JavaScript, y usar su motor de búsqueda favorito para buscar \ "Calendario JavaScript. \"