Como ele é
Pense num calendário de bolso dentro de um cartão de cantos arredondados. No alto, o nome do dia escolhido aparece grande, em negrito; embaixo, uma fileira de botões mostra mês, número e dia da semana. Ao clicar em outro dia, o nome antigo se desmancha num borrão e o novo se forma no lugar, como letras líquidas que se fundem. Se o dia tem compromissos, surge entre o nome e os botões uma lista de eventos com título e horário, que entra deslizando da direita, e o cartão cresce com um quique de mola; num dia vazio, ele encolhe. Os botões crescem no hover e afundam no clique.
Você pode estar procurando isto se pediu algo assim
- calendário bonitinho que mostra os eventos quando clico no dia
- agenda da semana num cartão para o site do meu curso
- lista de compromissos do dia com animação de mola
- mostrar as próximas aulas ou consultas de um jeito animado
- cartão de datas que cresce para mostrar o que tem no dia
- calendário estilo app de iPhone para a página de eventos
Também chamado de
- calendário animado
- event calendar
- agenda de eventos
- calendar widget
- calendário de eventos
- spring animation
- seletor de dias
Quando usar
- Agenda de eventos, aulas ou consultas em sites de cursos e clínicas
- Programação de um evento ou de uma conferência dividida por dia
- Painel de app com os compromissos da semana
- Página de lançamento com as datas de lives ou de turmas
Quando evitar
- Agendas com meses inteiros, já que o componente mostra só uma fileira de dias
- Quando a pessoa precisa marcar horário: o componente exibe eventos, sem formulário
Como pedir para a sua IA
Quero um calendário animado com efeito de mola na página de aulas: botões com os dias da semana e, ao escolher um, o cartão se expande e lista os eventos daquele dia, com textos em português, cores do meu tema, navegação por teclado e versão sem animação.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Trampolim
Como coloco meus eventos em Trampolim?
Pela prop calendarData: uma lista de dias, cada um com mês, número, dia da semana e, se quiser, eventos com título, dia e horário. Trampolim abre no dia indicado por initialIndex e emite update:activeIndex quando a pessoa escolhe outro, o que permite sincronizar com o resto do app.
Trampolim está em português?
Os dias, os meses e os eventos vêm dos seus dados, então ficam no idioma em que você escrever. O título da lista, Upcoming Events, está fixo em inglês no código de Trampolim; basta pedir à IA que o traduza na instalação. O ícone usa o componente Icon do Nuxt e, em Vue puro, precisa ser trocado.
Trampolim funciona com teclado e no celular?
Sim. Os dias de Trampolim são botões nativos, então recebem foco pelo Tab, ativam com Enter ou espaço e respondem ao toque. As cores vêm de tokens do tema, como muted e primary, e acompanham o claro e o escuro do projeto. A animação de mola não muda com a preferência de menos movimento, e o prompt pede à IA uma versão estática.
