A maioria dos aplicativos do mundo real inclui uma maneira de gerenciar e manipular datas. Em tais casos de uso, ter um calendário geralmente é a solução mais eficaz.

Neste tutorial, mostraremos como criar um calendário simples no React usando o React-Calendar. Cobriremos o seguinte com exemplos práticos:

O que é React-Calendar? Criando um projeto React Adicionando um calendário com React-Calendar Estilo seu calendário Selecionando um intervalo de datas Personalizando React-Calendar

O que é React-Calendar?

React-Calendar é um calendário simples biblioteca que oferece a capacidade de escolher dias, meses, anos ou mesmo décadas. Ele também oferece suporte à seleção de intervalo de datas e uma variedade de linguagens para casos de uso mais complexos.

Como o React-Calendar não depende do moment.js, é uma biblioteca muito flexível e versátil que você pode usar em praticamente qualquer aplicativo.

Criando um projeto React

Vamos criar um novo projeto react para este tutorial usando Criar aplicativo React . Certifique-se de ter Node.js ≥v10.16 e npm ≥v5.6 instalado em sua máquina.

Para criar um novo projeto, execute o seguinte comando:

npx create-react-app calendar-example

Agora, adicione a biblioteca React-Calendar ao nosso projeto usando npm:

npm install react-calendar

Agora temos uma configuração mínima. Remova o código clichê básico adicionado pelo Create React App e vamos começar.

Adicionando um calendário com React-Calendar

A primeira etapa é adicionar o calendário ao nosso aplicativo React. Importe o componente Calendar do react-calendar e adicione-o ao arquivo app.js. O arquivo terá a seguinte aparência:

//App.js import {useState} from’react’; importar calendário de’react-calendar’; import’./App.css’; função App () {const [data, setDate]=useState (new Date ()); return (

); } exportar aplicativo padrão;

Aqui, adicionamos um componente Calendar ao nosso arquivo app.js e adicionamos duas propriedades a ele. Criamos um estado para armazenar uma data e passamos a data atual como seu valor inicial usando o objeto Date do JavaScript.

Com essa estrutura básica pronta, nosso calendário inicial será semelhante a este:

Basic React Calendar.

Se você verificar o código do arquivo app.js, criamos um estado denominado date e o passamos como um valor para o componente Calendar. Outro objeto, onChange, é passado para o Calendário, que define o estado da data para o valor clicado pelo usuário.

O valor inicial passado para o calendário é a data atual. Quando um usuário clica na agenda, seu valor é definido de acordo com a seleção do usuário. Para este aplicativo, estamos imprimindo o valor da data abaixo de nosso calendário.

Estilizando seu calendário

Concluímos a implementação básica do calendário. Mas, como você pode ver, o estilo ainda não foi aplicado ao calendário, por isso parece muito chato.

O React-Calendar fornece algum estilo padrão, que você pode aplicar importando sua folha de estilo. Para fazer isso, adicione a seguinte linha ao seu arquivo app.js:

import’react-calendar/dist/Calendar.css’;

Depois de aplicar o estilo, o calendário parecerá assim:

React Calendar com estilo padrão.

Se quiser adicionar seu próprio estilo, você pode substituir essas classes e adicionar suas propriedades CSS personalizadas.

Selecionando um intervalo de datas

Considere um caso de uso em que você precisa fornecer alguns dados entre um intervalo de datas personalizado. O usuário seleciona o intervalo de datas desejado, que você pode pegar e depois fazer o resto das operações. O React-Calendar oferece suporte a esse recurso de forma muito eficaz.

Vamos pegar esse caso de uso e melhorar nosso aplicativo para selecionar o intervalo de datas. Imprimiremos o início e o fim do intervalo na parte inferior do calendário.

O app.js modificado terá a seguinte aparência:

//App.js import {useState} from’react’; importar calendário de’react-calendar’; importar’react-calendar/dist/Calendar.css’; import’./App.css’; função App () {const [data, setDate]=useState (new Date ()); return (

); } exportar aplicativo padrão;

Para ativar o recurso de intervalo de datas, passamos a propriedade selectRange para nosso componente Calendário. O valor padrão de selectRange é false. Depois de habilitar essa propriedade, o React-Calendar retorna uma matriz com duas datas: a data de início e a data de término. O intervalo selecionado é destacado para que o usuário entenda a seleção.

Depois de adicionar um intervalo de datas, o componente de calendário ficará assim:

React Calendar com intervalo de datas selecionado.

Personalizando o React-Calendar

Agora que conhecemos as funcionalidades mais úteis do React-Calendar, vamos mergulhar um pouco mais fundo e explorar as maneiras de personalizar seu calendário.

defaultValue

A prop defaultValue permite que você defina um valor padrão selecionado. Esta proposta também suporta a seleção de intervalo de datas padrão. Se você deseja selecionar uma única data, pode passar um objeto de data. Caso contrário, você pode passar uma matriz contendo valores de data de início e término.

Você pode adicionar defaultValue como este:

//App.js function App () {const [date, setDate]=useState ([nova data (2021, 6, 1), nova data (2021, 6, 10),]); return (

); }

<”View_default

Este prop é usado para definir a visualização da data do calendário. Por padrão, é definido como mês. Portanto, se esse acessório estiver faltando, o calendário mostra uma visualização do mês.

A visualização padrão oferece quatro opções: mês, ano, década e século. Mesmo se esta prop estiver definida para algum valor, você ainda pode navegar entre diferentes datas/meses.

Veja como implementar defaultView:

//Calendar component

Este prop mudará a renderização inicial do calendário, fazendo com que pareça algo assim:

React Calendar com visão de década.

maxDate e minDate

Se não quiser que o usuário selecione uma data após um determinado dia, você pode evitar essa ação adicionando uma proposta maxDate ao seu calendário. Como você provavelmente pode imaginar, o prop minDate define um limite para a data de início que o usuário tem permissão para selecionar.

Se o intervalo de datas estiver habilitado para o aplicativo, o usuário pode ser capaz de selecionar o data posterior a maxDate ou anterior a minDate. O React-Calendar evita isso passando o valor maxDate ou minDate apenas e nada além disso.

//componente de calendário

maxDetail e minDetail

Os adereços maxDetail e minDetail são importantes para restringir a granularidade do calendário. maxDetail define a quantidade máxima de detalhes que o usuário pode ver. Se o valor maxDetail for definido como ano , o usuário poderá ver os detalhes de um ano no calendário por vez.

Da mesma forma, se minDetail for definido como ano, o usuário irá não será capaz de ver detalhes além de um determinado ano.

//componente de calendário

Abaixo está um exemplo de maxDetail e minDetail:

Rótulos Próximo e Anterior

Os rótulos Próximo e Anterior permitem que você defina os nomes dos botões usados ​​para navegar entre as visualizações no calendário. Você também pode tornar isso acessível usando os atributos aria-label.

Os adereços usados ​​para alterar os próximos valores são nextLabel, nextAriaLabel, next2Label e next2AriaLabel. Você pode adicionar qualquer string a isso ou pode defini-la como nula se quiser desativar esta navegação.

Essas propriedades são semelhantes para os botões anteriores, exceto que prev é um prefixo-por exemplo, prevLabel, prevAriaLabel, prev2Label , prev2AriaLabel, etc.

Depois de adicionar os rótulos Próximo e Anterior, o código ficará assim:

//componente de calendário

Conclusão

O React-Calendar é uma biblioteca maravilhosa que oferece muita flexibilidade em sua implementação. É altamente personalizável e dependente do objeto Date JavaScript nativo, o que torna o React-Calendar fácil de implementar em qualquer aplicativo.

Vá para a documentação oficial de alguns exemplos complexos e casos de uso para React-Calendar . Espero que este tutorial forneça o conhecimento básico de que você precisa para implementar e personalizar o React-Calendar para se adequar ao seu aplicativo e ao seu público.

Se você tiver alguma dúvida sobre o uso do React-Calendar, sinta-se à vontade para perguntar. no comentário abaixo.