Pular para o conteúdo
Faculdade PhorteDesign System

EventDate

Em andamento

Data e duração de um evento numa linha: ícone de calendário, a data em pt-BR no fuso de São Paulo ("5 de dezembro às 09:00") num <time> com o valor de máquina, e a duração com ícone de relógio.

Função
Eventos
Também chamado de
data do evento, quando, data e hora
Mora em
app/components/molecules/EventDate.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Sem Duracao
  3. Datas do catálogo
  4. A definir

Quando usar

Junto do título de um evento — no cartão, na página do evento, na programação.

Faça

  • Passe date em ISO (2026-12-05T09:00-03:00), só o dia (2026-12-05) ou um Date (E72): é o que vai no dateTime.
  • Escreva a duração como a pessoa lê ("16h", "2 dias").

Evite

  • Data em texto livre ("5 de dezembro") quando a data exata existe: ela aparece como veio, mas o <time> fica sem dateTime e a máquina não a lê.

Quando não usar. Para uma sequência de marcos com ano, use o TimelineItem. Para a previsão de início de uma turma, o TurmaCard já traz a dela.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Calendário — Ícone vermelho de 14px, decorativo.
  2. Data — `<time dateTime>` com dia, mês por extenso e hora — sem a hora quando a data vem só com o dia (E72).
  3. Duração — Ponto separador, ícone de relógio e o texto.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Com duraçãoData, separador e duração.
Sem duraçãoSó a data.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Data em ISOFormata em pt-BR, sempre no fuso de São Paulo (E72): 01:30 UTC do dia 13 é "12 de outubro, 22:30" — conferido no teste da ficha. Sem o fuso, servidor e navegador divergiam (erro de hidratação).
Só o dia (`2026-10-12`)"12 de outubro", sem hora — conferido no teste da ficha.
Data que o `Date` não entendeMostra o texto como veio ("A definir"), sem dateTime no <time> — ficha "A definir".

Relacionados