deploy: calendarEvent.vercel.app
O calendário é uma ferramenta visual intuitiva e personalizável que permite aos usuários navegar facilmente pelos dias e meses, identificar eventos e marcar atividades concluídas. Com uma interface adaptada para diferentes dispositivos, o calendário se adapta a várias larguras de tela, mantendo sua funcionalidade central, seja em um desktop, tablet ou smartphone. Esse calendário funciona bem tanto para uso pessoal quanto para propósitos organizacionais, onde o acompanhamento visual de eventos e tarefas ajuda a manter o fluxo de trabalho organizado e produtivo.
ScreenRecording_12-03-2024.20-04-04_1.MP4
◾Eventos com Marcação de Conclusão: Os eventos podem ser marcados como concluídos, aplicando um estilo de riscado no texto, que ajuda o usuário a acompanhar tarefas concluídas e pendentes.
◾ Design Atraente: O calendário usa uma paleta de cores suaves e naturais, como tons de marrom claro e bege, proporcionando uma experiência visual agradável e harmoniosa.
◾ Interatividade: Cada dia no calendário é interativo. Ao passar o mouse ou tocar nos dias e eventos, o usuário recebe um feedback visual, indicando a presença de eventos.
◾ Modal para Detalhes: Ao clicar em um evento, uma janela modal pode aparecer, exibindo detalhes adicionais do evento, permitindo que os usuários vejam descrições e informações extras.
◾ Responsividade: A interface é adaptável para diferentes tamanhos de tela, assegurando uma navegação confortável em qualquer dispositivo.
Important
npm install react-calendarnpm install react-icons
Clone o repositório:
git clone https://github.com/oblipix/Calendar.gitAgora você tem uma cópia local do repositório que pode ser modificada conforme necessário.
deploy: calendarEvent.vercel.app
Description
The calendar is an intuitive and customizable visual tool that allows users to easily navigate through days and months, identify events, and mark completed activities. With an interface adapted for different devices, the calendar adjusts to various screen widths, maintaining its core functionality whether on a desktop, tablet, or smartphone. This calendar works well for both personal use and organizational purposes, where visual tracking of events and tasks helps keep the workflow organized and productive.
◾ Events with Completion Mark: Events can be marked as completed, applying a strikethrough style to the text, which helps the user track completed and pending tasks.
◾ Attractive Design: The calendar uses a soft and natural color palette, such as light brown and beige tones, providing a pleasant and harmonious visual experience.
◾ Interactivity: Each day on the calendar is interactive. When hovering over or tapping on days and events, the user receives visual feedback, indicating the presence of events.
◾ Modal for Details: By clicking on an event, a modal window may appear, displaying additional event details, allowing users to see descriptions and extra information.
◾ Responsiveness: The interface is adaptable to different screen sizes, ensuring comfortable navigation on any device.
Important
npm install react-calendarnpm install react-icons
Clone the repository:
git clone https://github.com/oblipix/Calendar.gitEsse projeto está licenciado sob a MIT License.