[Artículo] Cómo construir un calendario HTML de Eventos

by Robert 09/13/2016

Cómo construir un calendario HTML de Eventos


Aunque las tablas cayó en desgracia cuando se trata de la construcción de la totalidad de las páginas web de disposiciones, que todavía funcionan bien para los calendarios de codificación en HTML. Calendarios mostrar datos tabulares en cierto modo, ya que se organizan en una cuadrícula de fechas con columnas llamadas, por ejemplo, los días de la semana. Algunos código CSS adicional tendrá una cuadrícula aburrido de los nombres y números entre semana y hacer que se vea más como un calendario. Desde calendarios de eventos necesitan espacios para ambos números fecha y eventos, también debe usar CSS para dar formato a las fechas de una manera que mantiene ambas piezas de información legible.

Instrucciones

Construir la tabla HTML

1

Crear una tabla para estructurar su calendario. Esta tabla requiere un encabezado con siete células, uno para cada día de la semana. También necesita otros seis filas de celdas de la tabla regulares. Copia y pega esto en tu página web utilizando el Bloc de notas o un editor de código:

<Table id = "calendario">
<Thead>

&lt;th>Sunday&lt;/th>
&lt;th>Monday&lt;/th>
&lt;th>Tuesday&lt;/th>
&lt;th>Wednesday&lt;/th>
&lt;th>Thursday&lt;/th>
&lt;th>Friday&lt;/th>
&lt;th>Saturday&lt;/th>

</ Thead>
</ Table>

Este código será crear la tabla y la cabecera. La tabla utiliza un nombre de identificación de "calendario" en caso de que su página web utiliza tablas en otras páginas.

2

Añadir un par de etiquetas del cuerpo por debajo de la mesa "<thead>" tag:

<Tbody>
</ Tbody>

3

Copia el siguiente código y pegarlo entre "<tbody>" etiquetas seis veces:

<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>

Este código creará cada fila de siete células, por lo que cuando se agrega seis de ellos, su calendario tendrá todos los espacios fecha que necesita para cualquier mes del año.

4

Añadir las fechas para el calendario según el mes que desea mostrar. Recomendar a un calendario real y tener cuidado de no omitir o repetir una fecha. Envuelva cada fecha en "<span>" etiquetas para que pueda estilo de los números más tarde:

<Td> <span> 31 </ span> </ td>

5

Escriba sus eventos en las células que contienen sus fechas correspondientes. Los eventos deben salir de los "<span>" etiquetas pero dentro de los "<td>" etiquetas. Si la adición de más de un evento a una celda, envolver cada una en un par de "<p>" etiquetas:

<Td> <span> 31 </ span>
<P> Fiesta de Halloween! </ P>
<P> El último día para la presentación. </ P>
</ Td>

Estilo Calendario

6

Busque los "<style>" etiquetas en el código HTML, o añadirlos entre "<head>" etiquetas. Escriba su regla primer estilo, dirigido a toda la mesa, entre los "<style>" etiquetas:

<Style type = "text / css">

calendario {

border: 1px solid black;

}
</ Style>

La frontera es opcional, pero esta es la forma correcta de agregar bordes a las tablas en las páginas web modernas.

7

El estilo de su cabecera de la tabla con un color de fuente y color de fondo:

calendario thead {

de color: #ffffff;
background-color: azul oscuro;
font-weight: bold;
}

Puede utilizar código hexadecimal o colores con nombre. Esta cabecera muestra texto en blanco sobre un fondo azul marino.

8

Dé el relleno, bordes, anchura y posición relativa de sus celdas de la tabla:

º calendario, calendario td {

padding: 20px;
frontera: 1px solid negro;
width: 100px;
position: relative;
}

Posicionamiento relativo le permite colocar los números de fecha en las esquinas de las celdas de la tabla después. No establezca una altura, porque eso va a restringir la cantidad de texto que puede agregar a cualquier fecha.

9

Crear los números usando relleno, un color de fondo y el posicionamiento absoluto:

td calendario lapso {

font-weight: bold;
position: absolute;
inferior: 0;
derecha: 0;
display: block;
padding: 5px;
background-color: #eeeeee;
}

Usted debe incluir "display: block" para hacer "<span>" etiquetas actúan como cajas de la página Web, de lo contrario no se les puede dar el acolchado. Este ejemplo de código crea un cuadro de color gris claro en la esquina inferior derecha de cada espacio de la fecha, que muestra el número de fecha.

Te Podría Interesar...

Cómo construir un calendario en un Android

Cómo construir un calendario en un Android

Por defecto, se le da un calendario en la aplicación de calendario Android. Si tiene que hacer malabares con múltiples series de compromisos, usted puede construir otro calendario para mantener las cosas en orden. Tu cuenta de calendario de Android s
Cómo ver calendario de Outlook Eventos en Mi Blackberry

Cómo ver calendario de Outlook Eventos en Mi Blackberry

Utilizando el software BlackBerry Desktop Manager, puede importar, ver e interactuar con el calendario de Microsoft Outlook de su ordenador en su smartphone BlackBerry. El software BlackBerry Desktop Manager se puede descargar gratuitamente desde el
Cómo hacer un calendario con HTML

Cómo hacer un calendario con HTML

Un calendario realizado en HTML puede ser una adición útil a su sitio web, o un ejercicio práctico en el formato de tablas. Hay muchas maneras de personalizar un calendario. Usted puede hacer un gran calendario con los eventos que aparecen en cada fe
Cómo agregar un calendario para una página Web

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

Calendarios Sitio Web le permiten mantener sus visitantes informados sobre horarios próximos, eventos y actividades. Estos calendarios varían en complejidad y estilo en función de los objetivos de diseño de la página web creador. Usted puede agregar
Cómo agregar un evento a un contacto en un iPhone

Cómo agregar un evento a un contacto en un iPhone

El sistema operativo iOS, que funciona en todos los iPhones de Apple y el iPod Touch, incluye una aplicación de calendario para programar eventos y reuniones de planificación. Al editar un elemento de calendario, usted tiene la posibilidad de añadir
Cómo sincronizar todos los calendarios a un iPhone

Cómo sincronizar todos los calendarios a un iPhone

El iPhone de Apple incluye una función de calendario para programar eventos y reuniones de planificación. Puede crear elementos de calendario directamente en el iPhone o sincronizarlos con su ordenador de sobremesa o portátil. La configuración de la
Cómo trabajar un calendario de iPod

Cómo trabajar un calendario de iPod

La mayoría de la gente piensa en el iPod como un reproductor multimedia, almacenamiento de música, podcasts, audiolibros, vídeos y fotos. Sin embargo, este dispositivo puede realmente hacer mucho más, ofreciendo un reloj, un libro de contactos, notas
Cómo mover un calendario de Outlook a un iPod Touch

Cómo mover un calendario de Outlook a un iPod Touch

La aplicación Microsoft Outlook, que es parte de la suite de software de Microsoft Office, incluye una función de calendario para programar eventos o reuniones. Puede configurar iTunes para transferir los datos del calendario de Outlook a la aplicaci
Cómo hacer la Obra Alerta Calendario en el iPhone

Cómo hacer la Obra Alerta Calendario en el iPhone

Mantener un calendario de tareas en tu iPhone puede ser muy útil, ya que su iPhone es portátil y puede recordarle un evento en cualquier lugar que se encuentre. Este calendario también se puede sincronizar con el calendario de iCal en una computadora