Índice da vitrine
Início
Ações
Formulários
Navegação
Autenticação
Retorno
Conteúdo
Calendário
A agenda nas quatro visões - mês, semana, dia e lista -, o mês pequeno do trilho e o drawer que cria um evento. Sem dependência nova: só os tokens do tema.
outubro de 2026
<echo-calendar v-model:view v-model:date :events @create @open />
As peças por dentro
O calendário grande é um componente; o mês pequeno é outro; a aritmética de datas é um arquivo de utilitários que os dois usam.
<echo-calendar-mini>
Não é o seletor de data com outra roupa: aquele é um CAMPO (preenche formulário, abre sobre a página), este é navegação, sempre visível. O ponto sob o dia diz que há algo ali.
outubro de 2026
app/utils/calendar.ts
Tudo em hora LOCAL e sem biblioteca de datas: somar dias, achar o início da semana e comparar dois dias é o serviço inteiro, e `toISOString()` leria UTC - a oeste de Greenwich, metade dos eventos andaria um dia para trás.
isoDay(date) // 2026-08-11, local
parseDay('2026-08-11T14:00')
monthGrid(month, weekStart) // 42 days, always
weekDays(date, weekStart)
eventsOfDay(events, day)Para agentes de IA
Especificação desta página
Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.
/agents/calendar.md