Aprenda como codificar um calendário JavaScript simples e um selecionador de data

Construir um calendário JavaScript é a melhor maneira de entender as funcionalidades de datas em JavaScript. Este tutorial criará um calendário em tempo real semelhante ao dos seus dispositivos digitais. No final, você terá algo assim:

Estrutura HTML

Começaremos nosso calendário JavaScript construindo a estrutura com HTML e CSS. Assim que a interface estiver concluída, substituiremos a funcionalidade por JavaScript.

A estrutura HTML conterá um cabeçalho mostrando o mês e ano atuais. A seguir teremos setas para navegar para o mês seguinte ou anterior e, por último, teremos uma grade mostrando os nomes dos dias da semana e de cada dia do mês.

1

 class="container">

2

   class="calendar">

3

4

       class="left">◀

5

       class="header-display">

6

         class="display">""

7

8

       class="right">▶

9

10

11

     class="week">

12

      
Su

13

      
Mo

14

      
Tu

15

      
We

16

      
Th

17

      
Fr

18

      
Sa

19

20

     class="days">

21

22

23

24

    class="display-selected">

25

         class="selected">

26

27

Dentro de div com os dias de aula, preencheremos nossos dias dinamicamente com JavaScript.

Estilizando calendário com CSS

Vamos começar aplicando alguns estilos ao corpo e ao elemento contêiner.

Começaremos definindo algumas variáveis ​​para nossas cores. Em seguida, o calendário será centralizado no elemento contêiner e terá um raio de borda para torná-lo arredondado.

1

/*variables*/

2

:root {

3

  --white: #fff;

4

  --main: #eaedf0;

5

  --accent: #0041ff;

6

  --accent-2: #ebedf0;

7

}

8

9

/*styles*/

10

body {

11

  background-color: var(--main);

12

  display: flex;

13

  align-items: center;

14

  justify-content: center;

15

}

16

.container {

17

  display: inline-block;

18

  background-color: var(--white);

19

  border-radius: 35px;

20

  padding: 0 1em;

21

  margin-top: 2em;

22

}

Os elementos do cabeçalho, incluindo um p tag e duas setas, usará o Flexbox com os itens espalhados no eixo x e espaçados uniformemente.

1

header {

2

  margin: 20px;

3

  display: flex;

4

  justify-content: space-between;

5

  align-items: center;

6

  padding: 10px;

7

}

8

.header-display {

9

  display: flex;

10

  align-items: center;

11

}

12

13

.header-display p {

14

  color: var(--accent);

15

  margin: 5px;

16

  font-size: 1.2rem;

17

  word-spacing: 0.5rem;

18

}

19

20

pre {

21

  padding: 10px;

22

  margin: 0;

23

  cursor: pointer;

24

  font-size: 1.2rem;

25

  color: var(--accent);

26

}

Layout de grade de calendário

O divs contendo os nomes dos dias de uma semana e dos dias de um mês usarão um layout de grade de 7 colunas iguais e serão centralizados horizontalmente.

1

.days,

2

.week {

3

  display: grid;

4

  grid-template-columns: repeat(7, 1fr);

5

  margin: auto;

6

  padding: 0 20px;

7

  justify-content: space-between;

8

}

9

.week div,

10

.days div {

11

  display: flex;

12

  justify-content: center;

13

  align-items: center;

14

  height: 3rem;

15

  width: 3em;

16

  border-radius: 100%;

17

}

Também adicionaremos um efeito de foco em cada dia da semana e uma opacidade nos nomes dos dias da semana.

1

.days div:hover {

2

  background: var(--accent-2);

3

  color: rgb(25, 25, 201);

4

  cursor: pointer;

5

}

6

.week div {

7

  opacity: 0.5;

8

}

Também exibiremos a data quando um dia do calendário for clicado e aplicaremos uma cor de fundo à data de hoje.

1

.current-date {

2

  background-color: var(--accent);

3

  color: var(--white);

4

}

5

.display-selected {

6

  margin-bottom: 10px;

7

  padding: 20px 20px;

8

  text-align: center;

9

}

Funcionalidade de calendário JavaScript

Ok, isso nos deu a nossa estrutura, agora vamos nos concentrar no comportamento. Começaremos selecionando todos os elementos que precisarão ser atualizados.

1

let display = document.querySelector(".display");

2

let previous = document.querySelector(".left");

3

let next = document.querySelector(".right");

4

let days = document.querySelector(".days");

5

let selected = document.querySelector(".selected");

Objeto Data()

JavaScript vem com um recurso embutido Date() objeto que facilita o trabalho com datas. Para obter a data atual, você pode usar o new Date() objeto assim:

1

let dateToday = new Date();

2

let dateToday = new Date()

3

console.log(dateToday);

Você também pode usar os métodos do objeto de data para obter várias partes da data, como ano, mês, dia da semana, etc.

1

console.log(dateToday.getFullYear()); //2023

2

console.log(dateToday.getMonth()); //11  

3

console.log(dateToday.getDate());  //12

4

console.log(dateToday.getHours()); //13

5

console.log(dateToday.getMinutes()); //9

6

console.log(dateToday.getSeconds());//35

Comece definindo uma variável date usando o objeto Date e obtenha os valores do mês e do ano.

1

let year = date.getFullYear();

2

let month = date.getMonth();

Crie uma função chamada displayCalendar e atualize o cabeçalho para mostrar o mês e ano atuais.

1

let formattedDate = date.toLocaleString("en-US", {

2

  month: "long",

3

  year: "numeric",

4

});

5

display.innerHTML = `${formattedDate}`;

Invoque o displayCalendar() função para exibir a funcionalidade do cabeçalho. Agora, o cabeçalho exibe o mês e ano atuais.

Exibindo o calendário

A seguir, atualize o displayCalendar() funcionar da seguinte forma:

1

function displayCalendar() {

2

3

    const firstDay = new Date(year, month, 1);

4

    const firstDayIndex = firstDay.getDay(); 

5

6

    const lastDay = new Date(year, month + 1, 0);

7

    const numberOfDays = lastDay.getDate(); 

8

9

}

• const firstDay = new Date(year, month, 1);: Cria um novo objeto Date representando o primeiro dia do mês atual.
• const firstDayIndex = firstDay.getDay();: Aqui, usamos o valor de firstDay para obter o índice do primeiro dia da semana. Por exemplo, 0 representa domingo, 1 representa segunda-feira e assim por diante.
• const lastDay = new Date(year, month + 1, 0);: Cria um novo objeto Date representando o último dia do mês atual.
• const numberOfDays = lastDay.getDate();: Aqui, usamos o valor de lastDay para obter o índice do último dia do mês. Este valor nos permitirá obter os dias exatos de um mês. Por exemplo, se um mês tiver 31 dias, numberOfDays terá 31

Do valor de firstDayIndex, sabemos quando começará o primeiro dia do mês. Por exemplo, para dezembro de 2023, o primeiro dia do mês começará no índice 5, numa sexta-feira. O calendário deverá ficar em branco do índice 0 (domingo) ao índice 4 (quinta-feira). Vamos usar firstDayIndex para criar um loop for que adicionará divs vazios ao início do calendário.

1

for (let x = 1; x <= firstDayIndex; x++) {

2

  let div = document.createElement("div");

3

  div.innerHTML += "";

4

5

  days.appendChild(div);

6

}

Para exibir os dias de um mês, criaremos outro loop for que adicionará divs iguais ao valor de numberOfDays. Cada div também conterá o dia do mês que corresponde corretamente ao dia da semana.

1

for (let i = 1; i <= numberOfDays; i++) {

2

  let div = document.createElement("div");

3

  let currentDate = new Date(year, month, i);

4

5

  div.dataset.date = currentDate.toDateString();

6

7

  div.innerHTML += i;

8

  days.appendChild(div);

9

  if (

10

    currentDate.getFullYear() === new Date().getFullYear() &&

11

    currentDate.getMonth() === new Date().getMonth() &&

12

    currentDate.getDate() === new Date().getDate()

13

  ) {

14

    div.classList.add("current-date");

15

  }

16

}

O for loop faz o seguinte:

• Cria elementos div representando cada dia de um mês
• Adiciona um atributo de conjunto de dados chamado data a cada div contendo uma data correspondente ao dia, mês e ano atuais. O atributo data será útil quando quisermos determinar em qual data foi clicado.
• Acrescenta cada div ao nosso elemento days.
• Também estamos adicionando uma classe CSS diferente ao div, que corresponde à data atual.

Agora, nosso calendário JavaScript está exibindo a data correta.

Selecionando uma data

Também queremos ouvir um evento de clique quando um dia é clicado e fazer o seguinte:

• recuperar o currentDate valor do atributo de dados do elemento clicado
• exibir a data selecionada na tela.

1

function displaySelected() {

2

  const dayElements = document.querySelectorAll(".days div");

3

  dayElements.forEach((day) => {

4

    day.addEventListener("click", (e) => {

5

      const selectedDate = e.target.dataset.date;

6

      selected.innerHTML = `Selected Date : ${selectedDate}`;

7

    });

8

  });

9

}

10

displaySelected();

No código acima, iteramos pelos elementos day, atribuindo um ouvinte de evento click a cada elemento div. Quando clicado, recuperamos a data atual do atributo data-date e atualizamos o elemento de exibição com a data atual formatada.

O displaySelected() a função é então invocada.

Você deverá ver o seguinte rótulo exibido na parte inferior da IU ao clicar em qualquer data.

Funcionalidade final do calendário JavaScript

A funcionalidade final é garantir que o mês e o ano corretos sejam exibidos quando os elementos anterior e seguinte forem clicados.

1

previous.addEventListener("click", () => {

2

  days.innerHTML = "";

3

  selected.innerHTML = "";

4

5

  if (month < 0) {

6

    month = 11;

7

    year = year - 1;

8

  }

9

10

  month = month - 1;

11

  console.log(month);

12

  date.setMonth(month);

13

14

15

  displayCalendar();

16

  displaySelected();

17

});

No código acima:

•  days.innerHTML = ""; : limpa o conteúdo dos elementos div HTML do mês atual.

• selected.innerHTML=""; : Limpa o conteúdo do currentDate.

• No loop for, primeiro verificamos se o mês atual é menor que 0 (janeiro). Se for verdadeiro, definimos o mês como dezembro (dezembro tem índice 11) e também diminuímos o ano em 1. Se for falso, decrementamos apenas o mês.
• dateToday.setMonth(month); : define o mês para o mês recém-atualizado. Por fim, invocamos o displayCalendar() e displaySelected() funções.

Para o próximo elemento, verificamos se o mês é maior que 11 (dezembro) e se for verdade, definimos o mês como 0 e incrementamos o ano para o próximo ano. Caso contrário, incrementamos o mês em 1.

1

next.addEventListener("click", () => {

2

  days.innerHTML = "";

3

  selected.innerHTML = "";

4

5

  if (month > 11) {

6

    month = 0;

7

    year = year + 1;

8

  }

9

10

  month = month + 1;

11

  date.setMonth(month);

12

13

  displayCalendar();

14

  displaySelected();

15

});

Conclusão

Este tutorial abordou como usar JavaScript para criar dinamicamente um calendário totalmente funcional. Esperamos que você tenha aprendido muito e agora esteja em condições de criar calendários JavaScript dinâmicos para diferentes finalidades!