Tempo de leitura: 5 minutos
Construir um calendário com CSS Grid é algo fundamental para qualquer desenvolvedor, e não pode ser deixado de lado. Felizmente, construir um é algo muito simples, longe de ser qualquer bicho de sete cabeças.
Hoje vou te mostrar o passo a passo de como construir um calendário assim.
Aqui está o que você criará até o final deste artigo:
O que vamos aprender hoje?
Desenvolvendo o HTML
Você pode dizer pela imagem que o calendário contém três partes:
O indicador do mês;
O indicador de dia da semana / fim de semana;
As próprias datas;
A melhor maneira de estruturar o HTML é seguir o que parece certo. Criaremos o HTML de acordo com as três seções seguintes:
<div class="calendar">
<div class="month-indicator">...</div>
<div class="day-of-week">...</div>
<div class="date-grid">...</div>
</div>Além das sessões, vamos precisar obrigatoriamente de sete colunas para a grade. Elas serão para os dias da semana do calendário.
Vamos focar no .day-of-week e .date-grid já que estamos falando apenas de grade.
Estruturando a grade
Existem duas formas de criar a grade em CSS.
A primeira forma é mesclar elementos de .day-of-week e .date-grid em um seletor. Se fizermos isso, podemos definir o seletor display: grid. Aqui está a aparência do HTML se fizéssemos isso:
<div class="grid">
<!-- Day of week -->
<div>Seg</div>
<div>Ter</div>
<div>Qua</div>
<div>Qui</div>
<div>Sex</div>
<div>Sab</div>
<div>Dom</div>
<!-- Dates -->
<button><time datetime="2020-02-01">1</time></button>
<button><time datetime="2020-02-02">2</time></button>
<button><time datetime="2020-02-03">3</time></button>
<!-- ... -->
<button><time datetime="2020-02-28">28</time></button>
</div>Eu desencorajo esse método porque o HTML perde seu significado estrutural. Eu prefiro manter .day-of-week e .date-grid como elementos separados, se possível. Isso facilita a leitura / compreensão do código o desenvolvedor escreve.
Ou seja, mais simplicidade e agilidade para trabalhar.
Aqui está a estrutura HTML que escolho para trabalhar:
<div class="day-of-week">
<div>Seg</div>
<div>Ter</div>
<div>Qua</div>
<div>Qui</div>
<div>Sex</div>
<div>Sab</div>
<div>Dom</div>
</div>
<div class="date-grid">
<button><time datetime="2020-02-01">1</time></button>
<button><time datetime="2020-02-02">2</time></button>
<button><time datetime="2020-02-03">3</time></button>
<!-- ... -->
<button><time datetime="2020-02-28">28</time></button>
</div>A melhor maneira de criar uma grade CSS com a estrutura que propus é usar subgrid. Infelizmente, a maioria dos navegadores ainda não suporta subgrid. Enquanto isso, a melhor maneira é criar duas grades separadas – uma para .day-of-week e outra para .date-grid.
Ambos .day-of-week e .date-grid podem usar a mesma grade de sete colunas.
/* The grid */
.day-of-week,
.date-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
Empurrando as datas
Fevereiro de 2020 começa no sábado. Se queremos que o calendário esteja correto, precisamos garantir:
1 fev 2020 cai na sábado
2 fev 2020 cai em domingo
3 fev 2020 cai no segunda
E assim por diante…
Com CSS Grid, essa parte é fácil.
A CSS Grid possui um algoritmo de posicionamento que segue as seguintes regras (se você não definiu grid-auto-flow como dense):
- Coloque itens que tenham explícito grid-column ou grid-row primeiro
- Preencha o restante de acordo com o último item colocado
O que isso significa é:
Se o primeiro item estiver na coluna 6
O segundo item será colocado na coluna 7.
O terceiro item será colocado na próxima linha, na coluna 1 (porque existem apenas sete colunas).
O quarto item será colocado na coluna 2,
E assim por diante…
Portanto, se posicionarmos em 1º de fevereiro na sétima coluna (sábado), o restante das datas será colocada corretamente. Simples assim!
\/* Positioning the first day on a Friday */
.date-grid button:first-child {
grid-column: 6;
}
Aqui está o código para você brincar:
See the Pen
Calendario em CSS Grid – Danki Code by Danki Code (@Rabino)
on CodePen.
Conclusão de calendário com CSS Grid
Aprendeu a criar seu calendário com CSS Grid?
O próximo passo que você deve tomar para se aprofundar é construir comigo projetos reais, pois além de muitos anos no mercado de desenvolvimento Web, sou professor com vasta experiência para te conduzir nesta jornada e tirar todas as suas dúvidas.
E não sou eu que digo, são os mais de 14.000 alunos capacitados por mim na Danki Code, por isso sei bem do que eu estou falando.
A melhor forma de você começar a desenvolver projetos reais é adquirindo o Pacote Full-Stack. Com ele você vai desenvolver os projetos mais incríveis e cobiçados do mercado.
