Como fazer um calendário de eventos em HTML

Escrito por sara williams | Traduzido por marcelo couto
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um calendário de eventos em HTML
Ao construir um calendário em HTML, estruture-o com códigos de tabelas (Thinkstock/Comstock/Getty Images)

Embora tabelas tenham caído em desuso quando se trata de construir layouts de páginas da web, elas ainda funcionam bem para codificação de calendários em HTML. Os calendários exibem dados tabulares de uma forma, uma vez que estejam organizados em uma grade de datas com colunas nomeadas, por exemplo, com os dias da semana. Um código extra em CSS tornará uma grade entediante com nomes e números em algo mais parecido com um calendário. Uma vez que os eventos de um calendário precisam de espaço, tanto para o número das datas quanto para os eventos, também será necessário usar CSS para formatar as datas de uma maneira que mantenha as duas partes da informação legíveis.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

    Crie uma tabela em HTML

  1. 1

    Crie uma tabela para estruturar o calendário. Essa tabela exige um header com sete células, uma para cada dia da semana. Também é necessária a criação de seis linhas de células regulares da tabela. Copie e cole o trecho em uma página da Web com auxílio do Notepad ou de um editor de códigos.

    <table id=”calendário”> <thead> <th>Domingo</th> <th>Segunda-feira</th> <th>Terça-feira</th> <th>Quarta-feira</th> <th>Quinta-feira</th> <th>Sexta-feira</th> <th>Sábado</th> </thead> </table>

    Esse código criará a tabela e o título. A tabela utiliza um nome de identificação chamado "calendário" no caso do site utilizar tabelas em outras páginas.

  2. 2

    Adicione um par de tags do tipo body abaixo da tag "<thead>":

    <tbody> </tbody>

  3. 3

    Copie o código seguinte e cole-o entre as tags "<tbody>" seis vezes:

    <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

    Esse código criará cada linha com sete células, de modo que, ao adicionar seis delas, o calendário possuirá todos espaços de dados que precisa para todos os meses do ano.

  4. 4

    Adicione datas ao calendário de acordo com o mês que quiser mostrar. Consulte um calendário de verdade e tome cuidado para não pular ou repetir uma data. Envolva cada data com as tags "<span>" para que seja possível personalizar os números mais tarde:

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

  5. 5

    Anote os eventos nas células que contenham datas relevantes. Os eventos devem ficar do lado de fora das tags "<span>" porém dentro das tags "<td>". Se quiser adicionar mais do que um evento à mesma célula, envolva cada um em um par de tags "<p>":

    <td><span>31</span> <p>Festa do dia das bruxas!</p> <p>Último dia para inscrições.</p> </td>

    Personalize o calendário

  1. 1

    Localize as tags "<style>" no código HTML ou adicione-as entre as tags "<head>". Escreva a primeira regra de personalização, visando a tabela inteira, entre as tags "<style>":

    <style type=”text/css”>

    calendário {

    border: 1px solid black; } </style>

    O contorno é opcional, mas essa é a maneira mais adequada de adicionar bordas a tabelas nas páginas da Web atuais.

  2. 2

    Personalize o título da tabela com uma cor para as letras e outra para o segundo plano:

    calendário thead {

    color: #ffffff; background-color: darkblue; font-weight: bold; }

    É possível utilizar código hexadecimal ou o nome das cores. Esse título exibirá texto branco sobre um fundo azul marinho.

  3. 3

    Dê preenchimento, bordas, largura e posicionamento relativo às células da tabela:

    calendário th,

    calendário td {

    padding: 20px; border: 1px solid black; width: 100px; position: relative; }

    O posicionamento relativo permite ao programador colocar datas em forma de números nos cantos das células da tabela mais tarde. Não defina uma altura, pois isso restringirá quanto texto será possível adicionar a qualquer data.

  4. 4

    Crie os números utilizando o preenchimento, cor de fundo e posicionamento absoluto:

    calendário td span {

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

    Deve-se incluir "display: block" para fazer as tags "<span>" agirem como caixas na página da Web, do contrário, não será possível preenchê-las. Esse código de exemplo cria uma caixa cinza fraco no canto inferior esquerdo de cada espaço de data, exibindo o número da data.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível