Aprenda a Criar um Calendário em HTML, CSS e JavaScript

Atualizado em: 25 de fevereiro de 2025

Calendário do lado de uma planta em uma mesa de madeira

Introdução ao Calendário

Criar um calendário em HTML pode parecer uma tarefa complexa, mas com os passos certos, é possível desenvolver um calendário funcional e estilizado que se adapte às suas necessidades. Um calendário feito em HTML e complementado com CSS e JavaScript oferece a flexibilidade de personalização e interatividade que muitos projetos web exigem. Vamos explorar como criar um calendário desde a estrutura básica até a adição de funcionalidades avançadas.

Veja o código funcionando no site do Codepen abaixo:

See the Pen Calendário by Código Fácil (@CodigoFacil) on CodePen.

Estrutura e Estilização do Calendário

A base do nosso projeto inclui a estrutura HTML e a estilização em CSS. O código a seguir apresenta a formatação de um calendário moderno e estilizado.

Estrutura do HTML e CSS

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Calendário Dinâmico</title>
    <style>
        /* Estilos base para o corpo da página */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* Container do calendário com estilo moderno */
        .calendario {
            border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-color: white;
            width: 340px;
        }

        /* Cabeçalho do calendário com mês e ano */
        .calendario-header {
            background-color: #4a90e2;
            color: white;
            text-align: center;
            padding: 10px;
            font-weight: bold;
        }

        /* Estilização da tabela */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Estilo dos cabeçalhos dos dias */
        th {
            background-color: #f4f4f4;
            padding: 10px;
            text-transform: uppercase;
            font-size: 0.8em;
            color: #666;
        }

        /* Estilo das células de dias */
        td {
            text-align: center;
            padding: 10px;
            border: 1px solid #e0e0e0;
            transition: background-color 0.3s ease;
        }

        /* Efeito de hover nos dias */
        td:hover {
            background-color: #e6f2ff;
            cursor: pointer;
        }

        /* Destaque para o dia atual */
        .dia-atual {
            background-color: #4a90e2;
            color: white;
            font-weight: bold;
            border-radius: 50%;
        }

        /* Dias de fim de semana com cor diferente */
        .fim-de-semana {
            color: #888;
        }
    </style>
</head>
<body>
    <div class="calendario">
        <div class="calendario-header" id="mes-ano">
            Carregando...
        </div>
        <table>
            <thead>
                <tr>
                    <th>Dom</th>
                    <th>Seg</th>
                    <th>Ter</th>
                    <th>Qua</th>
                    <th>Qui</th>
                    <th>Sex</th>
                    <th>Sáb</th>
                </tr>
            </thead>
            <tbody id="dias-calendario"></tbody>
        </table>
    </div>
</body>
</html>

Tornando o Calendário Dinâmico com JavaScript

O JavaScript desempenha um papel crucial ao preencher dinamicamente os dias do mês e destacar o dia atual. Veja como criar um script que faça isso.

Script JavaScript para Renderização

JavaScript

// Função para obter o nome do mês em português
function getNomeMes(mes) {
    const meses = [
        'Janeiro', 'Fevereiro', 'Março', 'Abril', 
        'Maio', 'Junho', 'Julho', 'Agosto', 
        'Setembro', 'Outubro', 'Novembro', 'Dezembro'
    ];
    return meses[mes];
}

// Função principal para renderizar o calendário
function renderCalendario() {
    const dataAtual = new Date();
    const mesAtual = dataAtual.getMonth();
    const anoAtual = dataAtual.getFullYear();
    const diaAtual = dataAtual.getDate();

    // Atualiza o cabeçalho com mês e ano
    const headerElement = document.getElementById('mes-ano');
    headerElement.textContent = `${getNomeMes(mesAtual)} ${anoAtual}`;

    // Primeiro dia do mês e quantidade de dias no mês
    const primeiroDiaDoMes = new Date(anoAtual, mesAtual, 1).getDay();
    const ultimoDiaDoMes = new Date(anoAtual, mesAtual + 1, 0).getDate();

    const tbody = document.getElementById('dias-calendario');
    tbody.innerHTML = ''; // Limpa conteúdo anterior

    let linha = document.createElement('tr');
    let diaContador = 1;

    // Adiciona células vazias antes do primeiro dia do mês
    for (let i = 0; i < primeiroDiaDoMes; i++) {
        const celulaVazia = document.createElement('td');
        linha.appendChild(celulaVazia);
    }

    // Renderiza os dias do mês
    while (diaContador <= ultimoDiaDoMes) {
        if (linha.children.length === 7) {
            tbody.appendChild(linha);
            linha = document.createElement('tr');
        }

        const coluna = document.createElement('td');
        coluna.textContent = diaContador;

        // Marca o dia atual
        if (diaContador === diaAtual && mesAtual === dataAtual.getMonth()) {
            coluna.classList.add('dia-atual');
        }

        // Marca fins de semana
        const diaSemana = new Date(anoAtual, mesAtual, diaContador).getDay();
        if (diaSemana === 0 || diaSemana === 6) {
            coluna.classList.add('fim-de-semana');
        }

        linha.appendChild(coluna);
        diaContador++;
    }

    // Adiciona a última linha se necessário
    if (linha.children.length > 0) {
        tbody.appendChild(linha);
    }
}

// Renderiza o calendário quando a página carregar
document.addEventListener('DOMContentLoaded', renderCalendario);

Considerações Finais e Melhores Práticas

Responsividade: Adapte a largura do calendário para se ajustar a diferentes tamanhos de tela.
Acessibilidade: Garanta que o calendário seja navegável por teclado e utilize atributos ARIA para melhorar a experiência de usuários com deficiência visual.
Estilo Personalizado: Altere cores e estilos para combinar com o design do seu site.

Com essas etapas, você terá um calendário em HTML, CSS e JavaScript pronto para ser utilizado em seus projetos.