Muitos tutoriais de calendário HTML se concentram no básico: uma grade mensal estática construída com markup simples e estilos. Mas, para um calendário de site ao vivo, normalmente você vai querer recursos como navegação, responsividade e suporte a eventos, para que os visitantes possam realmente interagir com ele e ficar atualizados.
Este artigo aborda quatro abordagens para adicionar um calendário HTML ao seu site: exibir um mês estático com CSS Grid, adicionar JavaScript para navegação dinâmica, incorporar o Google Calendar via iframe e usar um widget de calendário sem código. Cada método atende a uma situação diferente, e o framework de decisão no final ajuda você a escolher o mais adequado para o seu caso.
- Código HTML de calendário pronto para copiar e colar usando CSS Grid — versões estáticas e dinâmicas
- Como adicionar navegação por mês e destaque de hoje com JavaScript puro.
- Configuração de incorporação do Google Calendar, incluindo as limitações em dispositivos móveis
- Configuração de widget de calendário sem código com gerenciamento de eventos e filtragem
- Uma estrutura de decisão que alinha métodos de calendário a casos de uso específicos
Métodos Comparados
Antes de decidir por uma abordagem, uma comparação rápida ajuda a reduzir suas opções. Os quatro métodos diferem no que conseguem fazer, na quantidade de configuração necessária e para quem foram criados:
| Método | Ideal para | Dificuldade | Customização | Eventos Dinâmicos | Preço |
|---|---|---|---|---|---|
| HTML/CSS estático | Grade de meses apenas para exibição | Básico (copiar e colar) | Total (seu CSS) | Não | Gratuito |
| Calendário JS Dinâmico | Calendário mensal navegável | Intermediário | Completo (seu código) | Navegação por mês | Gratuito |
| Incorporação do Google Calendar | Organizações que utilizam o Google Calendar | Fácil (iframe) | Muito limitado | Sim (sincroniza com o Google) | Gratuito |
| Widget sem código | Listagens de eventos, filtros e links RSVP | Fácil (sem código) | Total (Editor Visual) | Sim (manual + sincronização com Google) | Gratuito – Pago |
Resumo: Um calendário estático em HTML/CSS funciona bem para layouts visuais simples, como portfólios, horários ou elementos de design. Adicionar JavaScript permite navegação por mês e renderização automática de datas. Um embed do Google Calendar é adequado se você já gerencia eventos no Google e quer uma exibição rápida e de baixa manutenção. Um widget de calendário HTML sem código oferece mais flexibilidade, incluindo gestão de eventos, eventos recorrentes, filtragem e personalização visual sem precisar de codificação.
Método 1: Calendário HTML/CSS estático
Este é o código HTML de calendário mais simples que você pode criar — uma exibição de um único mês usando CSS Grid. É a base sobre a qual o Método 2 se apoia, e funciona como um modelo independente se tudo que você precisa é de um layout mensal visual.
O código usa CSS Grid com repeat(7, 1fr) para o layout diário de sete colunas. O Grid tem aproximadamente 95% de suporte global aos navegadores, então a compatibilidade não é uma preocupação. Ao contrário de fluxos de trabalho mais antigos que utilizam tabelas HTML com atributos obsoletos como cellspacing e bgcolor, o Grid oferece um layout responsivo com marcação limpa e moderna.
Copie o código abaixo e cole em qualquer arquivo HTML ou bloco de código de CMS. Ele exibe um calendário de junho de 2026 — altere o título do mês e os números dos dias para exibir outro mês.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static HTML Calendar</title>
<style>
.calendar {
--accent: #2563eb; /* change this to match your brand */
max-width: 480px;
margin: 0 auto;
font-family: system-ui, sans-serif;
}
.calendar-header {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
gap: 2px;
text-align: center;
}
.day-name {
padding: 0.5rem 0;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
}
.day {
padding: 0.6rem 0;
font-size: 0.95rem;
border-radius: 6px;
}
.day:hover { background: #f1f5f9; }
.today {
background: var(--accent);
color: #fff;
font-weight: 600;
}
.today:hover { background: var(--accent); }
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">Junho de 2026</div>
<div class="calendar-grid">
<span class="day-name">Seg</span>
<span class="day-name">Ter</span>
<span class="day-name">Qua</span>
<span class="day-name">Qui</span>
<span class="day-name">Sex</span>
<span class="day-name">Sáb</span>
<span class="day-name">Dom</span>
<!-- Junho de 2026 começa na segunda-feira — sem deslocamento necessário -->
<span class="day today">1</span>
<span class="day">2</span><span class="day">3</span><span class="day">4</span>
<span class="day">5</span><span class="day">6</span><span class="day">7</span>
<span class="day">8</span><span class="day">9</span><span class="day">10</span>
<span class="day">11</span><span class="day">12</span><span class="day">13</span>
<span class="day">14</span><span class="day">15</span><span class="day">16</span>
<span class="day">17</span><span class="day">18</span><span class="day">19</span>
<span class="day">20</span><span class="day">21</span><span class="day">22</span>
<span class="day">23</span><span class="day">24</span><span class="day">25</span>
<span class="day">26</span><span class="day">27</span><span class="day">28</span>
<span class="day">29</span><span class="day">30</span>
</div>
</div>
</body>
</html>">A propriedade CSS personalizada --accent no topo controla a cor de destaque — altere-a uma vez e o cabeçalho e o marcador de hoje são atualizados. O layout é responsivo por padrão, porque as unidades 1fr dividem o espaço disponível igualmente, em vez de larguras fixas em pixels. Em telas menores, as células encolhem proporcionalmente sem quebrar.
Se o mês que você está exibindo não começar na segunda-feira, use grid-column-start na célula do primeiro dia para movê-lo para a coluna correta. Por exemplo, se o mês começar na quarta-feira, adicione style="grid-column-start: 3" à primeira <span class="day">. Isso posiciona o primeiro dia na terceira coluna sem precisar de células de preenchimento vazias — uma das vantagens do CSS Grid sobre um layout baseado em tabelas.
Método 2: Calendário JavaScript dinâmico
A versão estática funciona como uma captura, mas a maioria dos casos práticos exige navegação por mês e data atual renderizada automaticamente. Esta versão baseia-se na mesma estrutura CSS Grid e acrescenta cerca de 50 linhas de JavaScript puro para renderização dinâmica.
O código HTML de calendário abaixo identifica o mês e o ano atuais, mostra o número exato de dias, alinha o primeiro dia à coluna correta, destaca o dia de hoje e permite que os visitantes avancem ou recuem entre os meses. A transição entre anos (Dezembro para Janeiro, ou Janeiro para Dezembro) é automática.
Dois detalhes de JavaScript que vale destacar. Primeiro, new Date(year, month, 1).getDay() retorna o dia da semana do primeiro dia, porém o JavaScript considera o domingo como 0. A conversão (firstDay + 6) % 7 desloca o índice para que segunda-feira seja 0 e domingo seja 6, combinando com o layout da grade que começa na segunda. Em segundo lugar, new Date(year, month + 1, 0).getDate() é uma abreviação para obter o número de dias de qualquer mês — o dia 0 do mês seguinte retorna o último dia do mês atual.
</font>decrementar um ano.
Método 3: Incorporação do Google Calendar
Se a sua organização já gerencia a agenda no Google Agenda, incorporá-la como iframe dispensa totalmente a etapa de codificação. O resultado é um calendário de eventos em HTML ao vivo que se atualiza automaticamente sempre que você adicionar ou alterar eventos no Google Agenda.
Processo de configuração
- Torne o calendário público. No Google Calendar, abra as Configurações do calendário que deseja incorporar. Em “Permissões de acesso a eventos”, marque “Tornar disponível publicamente”. Apenas calendários públicos aparecem na incorporação — calendários privados ou compartilhados não serão renderizados.
- <strong>Abrir as configurações de incorporação.</strong> No mesmo painel de configurações, role até “Integrar calendário.” Clique no botão “Personalizar” para abrir a ferramenta de personalização.
- Configure a exibição. A ferramenta de personalização permite definir o título, a visualização padrão (Mês, Semana ou Agenda), largura e altura em pixels, data de início, fuso horário e ativar/desativar elementos como botões de navegação, cabeçalho da data, ícone de impressão e abas do calendário. Também é possível combinar vários calendários públicos em uma única incorporação.
-
Copie o código do iframe. Clique em “Copiar” para obter o <iframe> embed code. Ele fica assim:
<iframe src="https://calendar.google.com/calendar/embed?src=..." width="800" height="600"></iframe> - Cole no seu site. Adicione o iframe a qualquer página HTML ou bloco HTML Personalizado no CMS. Para um guia mais detalhado, incluindo instruções de colagem específicas por plataforma, consulte este guia para adicionar o Google Calendar a qualquer site.
Compensações
A incorporação do Google Calendar funciona bem para exibir rapidamente um calendário gratuito, mas tem limitações. O iframe usa dimensões fixas e não é totalmente responsivo, o que pode tornar a visualização em dispositivos móveis desconfortável.
Como ele é carregado a partir do domínio do Google, você não pode personalizar totalmente o design com seus CSS ou JavaScript próprios, então ele sempre parecerá um produto incorporado do Google. Os visitantes podem ver eventos e abrir detalhes, mas a interação fica limitada à visualização, sem a possibilidade de reservar ou RSVP diretamente.
Método 4: Widget de Calendário Sem Código
Quando você precisa de gerenciamento de eventos, personalização visual e design responsivo sem escrever código, um widget de calendário dedicado fecha a lacuna entre um calendário HTML básico e um aplicativo de calendário completo. O Elfsight Event Calendar é uma opção nesta categoria – e leva apenas 5 minutos para configurá-lo. Aqui está o processo, em linhas gerais:
- Abrir o Calendário construtor e selecione um modelo.
- Adicione seus Eventos e configure o estilo.
- Clique em “Adicionar ao site” e copie o código de incorporação.
- Cole o código no backend do seu site e publique.
Crie seu próprio calendário aqui mesmo no editor visual interativo ↓
Recursos de destaque
Tudo o que se segue é uma funcionalidade que um calendário HTML/JS feito manualmente não oferece pronto — e que exigiria muito tempo de desenvolvimento para construir do zero.
- Sete tipos de layout — Lista, Grade, Masonry, Slider e visualizações de calendário para Mês, Semana e Dia. Um único widget pode exibir layouts diferentes em páginas distintas.
- Três fontes de eventos — adicione eventos manualmente via editor visual, importe em lote via CSV, ou sincronize de forma unidirecional com o Google Calendar (com suporte de local, anfitrião, tags, tipo de evento, etc.).
- Eventos recorrentes — diários, semanais, mensais, anuais e frequências personalizadas com tratamento de exceções para ocorrências individuais.
- Popups de Eventos — os visitantes clicam em um evento para ver detalhes completos, um mapa de localização, um botão de CTA e uma opção de “Adicionar ao Calendário” que gera um arquivo .ics universal.
- <strong>Cinco filtros + pesquisa</strong> — data, tipo de evento, local, anfitrião e tags, além de uma barra de busca por palavra-chave. Os filtros aparecem inline ou em um menu suspenso.
- Ajuste do fuso horário do visitante — os horários dos eventos são ajustados automaticamente ao fuso horário local de cada visitante, essencial para eventos virtuais ou entre fusos horários.
Alemão
Qual método funciona para a sua situação
O método certo depende do que o seu calendário precisa fazer, não de quão técnico você é. A tabela abaixo relaciona cenários comuns à abordagem que melhor atende a cada um.
| Situação | Melhor método | Por quê |
|---|---|---|
| Portfólio ou site pessoal que precisa de exibição mensal | HTML/CSS estático | Controle total de design, sem dependências, código mínimo |
| Site que precisa de um calendário navegável sem eventos | Calendário JS Dinâmico | Navegação mensal e destaque de hoje sem backend |
| Organização já usa o Google Calendar para agendamento | Incorporação do Google Calendar | Sincroniza automaticamente, sem código, sem manutenção. |
| Publicação de listas de eventos para locais como auditórios, academias, escolas ou igrejas. | Widget sem código | Gestão de eventos, filtragem, eventos recorrentes, botões de CTA |
| Desenvolvedor construindo uma aplicação de calendário personalizada | Biblioteca JS (FullCalendar, etc.) | Arraste e solte, regras de eventos recorrentes e suporte a API |
| Site de comércio eletrônico exibindo datas de venda ou lançamento | HTML/CSS estático ou widget de contagem regressiva | Um calendário completo costuma ser demais — basta exibir apenas a data. |
| Freelancer ou consultor exibindo disponibilidade | Widget sem código ou ferramenta de agendamento | A exibição de disponibilidade requer lógica de agendamento, não apenas uma grade. |
A linha que separa codificar um calendário de usar uma ferramenta costuma depender de gestão de eventos. Um calendário JavaScript básico com navegação por mês é relativamente simples, mas recursos como eventos recorrentes, sincronização com o Google Calendar, fuso horário, filtragem ou links RSVP rapidamente ampliam o escopo. Nesse ponto, um widget ou biblioteca de calendário costuma ser a opção mais prática e eficiente em termos de tempo.
Explore mais de 30 modelos de Calendário de Eventos
Bibliotecas JavaScript de Calendário
Se JavaScript puro não basta, mas um widget sem código não se encaixa no seu stack de desenvolvimento, algumas bibliotecas de código aberto ficam no meio. Elas oferecem componentes de calendário prontos com suporte a eventos, e você controla a integração.
| Biblioteca | Principais vantagens | Tamanho / Adoção | Licença |
|---|---|---|---|
| FullCalendar | Gestão completa de eventos, arrastar e soltar, sistema de plugins. | Mais de 19 mil estrelas no GitHub, mais de 1 milhão de downloads semanais no npm | MIT (Padrão) |
| TUI Calendar | Suporte a múltiplos calendários, localização robusta para a Ásia. | 8,2 mil estrelas no GitHub | MIT |
| Vanilla Calendar Pro | Leve, sem dependências, com acessibilidade integrada | Leve / em crescimento | MIT |
| Calendário de Eventos (vkurko) | API no estilo FullCalendar com apenas 37kb comprimidos | Baseado em Svelte, independente de framework | MIT |
calendar API with event handling, recurring events, and framework support (React, Vue, Angular). For simpler needs, Vanilla Calendar Pro provides built-in ARIA labels, keyboard navigation, and a smaller footprint.”>FullCalendar é a recomendação padrão para desenvolvedores que precisam de uma API de calendário pronta para produção, com gerenciamento de eventos, eventos recorrentes e suporte a frameworks (React, Vue, Angular). Para necessidades mais simples, o Vanilla Calendar Pro oferece rótulos ARIA integrados, navegação por teclado e menor pegada.
Acessibilidade e Dicas para Dispositivos Móveis
A maioria dos guias sobre como criar um calendário em HTML ignora a Acessibilidade. Adicionar alguns atributos ao código do calendário o torna utilizável por leitores de tela e por usuários que utilizam apenas o teclado, com esforço mínimo em comparação ao impacto.
Para os calendários baseados em código, nos Métodos 1 e 2, essas adições cobrem o básico:
- Adicione aria-label=”June 2026″ (ou o mês/ano atual) ao contêiner da grade do calendário para que leitores de tela anunciem o que o calendário exibe
- Use o abbr atributo em cabeçalhos day-name: <span class=”day-name” abbr=”Wednesday”>Wed</span>. Leitores de tela podem então anunciar o nome completo do dia em vez da abreviação
- W3C APG date picker pattern defines the full interaction model, including arrow-key navigation between days and Page Up/Down for month changes”>Para o calendário interativo em JavaScript, adicione role=”grid” ao contêiner da grade e role=”gridcell” a cada célula de dia. O padrão de date picker W3C APG define o modelo completo de interação, incluindo a navegação com as setas entre os dias e Page Up/Down para mudanças de mês
- Marque a data atual com aria-current=”date” além da classe visual .today.
Aviso de Acessibilidade
Uma observação sobre ARIA: adicione apenas atributos que você entende. Análise de milhões de páginas da web mostrou que páginas que usam ARIA apresentam, em média, 59,1 erros de acessibilidade detectáveis, em comparação com 42 em páginas sem ARIA. A marcação ARIA incorreta cria mais barreiras do que não usar ARIA.
Se você estiver criando apenas um calendário para exibição, uma tabela HTML nativa
| é a opção mais acessível por padrão — a “primeira regra do ARIA” é preferir semântica HTML nativa sempre que ela existir. |
|---|
Grade CSS para dispositivos móveis
Para dispositivos móveis, o código CSS Grid em ambos os métodos é responsivo por padrão, pois as unidades fr dividem o espaço disponível de forma proporcional. Em telas muito pequenas (abaixo de 360px), dois ajustes ajudam: encurtar os nomes dos dias para letras únicas (M, T, W, T, F, S, S) e reduzir o preenchimento das células para 0.35rem. Teste em um dispositivo real antes de publicar — emuladores nem sempre refletem como os alvos de toque ficam em tamanhos menores.
Perguntas Frequentes
Posso criar um calendário HTML sem JavaScript?
CSS Grid ou uma tabela HTML: qual é a melhor opção para um layout de calendário?
Como tornar um calendário HTML responsivo em dispositivos móveis?
Posso adicionar eventos a um calendário HTML sem backend?
Qual é a diferença entre um calendário HTML e um widget de calendário?
Por onde começar
A abordagem certa depende do que seu calendário precisa fazer. Um grid mensal apenas para exibição leva cerca de 30 minutos com o código deste artigo. Um calendário navegável com destaque para o dia atual leva um pouco mais. Um calendário de eventos com filtros, eventos recorrentes e links RSVP exige uma ferramenta bem diferente — e reconhecer esse limite cedo economiza mais tempo do que qualquer otimização de código.
calendar widget you can embed without rebuilding from scratch, or a JavaScript library if you need full programmatic control. Either way, you’re building on a foundation that fits the job — not forcing a simple HTML calendar to do something it was never designed for.”>Comece com o método mais simples que atenda aos seus requisitos reais. Se precisar de ir além, a próxima etapa é clara: um widget de calendário que você pode incorporar sem refazer tudo do zero, ou uma biblioteca JavaScript se você precisar de controle total por meio de código. Em qualquer caso, você estará construindo com uma base que serve ao propósito — sem forçar um calendário HTML simples a fazer algo para o qual ele nunca foi projetado.
