z-uiDesign system
Componentes · z-ui

Scheduler

Agenda de prazos de envelopes e reuniões de assinatura presencial, com visões de dia, semana e mês. Eventos que se sobrepõem ficam lado a lado. Os rótulos e as datas são em português, com date-fns e o locale ptBR.

Semana

Cada evento tem início, fim, título, tom e, quando houver, o signatário com a cor da ordem no envelope. Clique num evento para abrir.

11 a 17 de outubro de 2026

  • Envelope concluído: procuração, segunda-feira, 12 de outubro, das 16:00 às 16:30
  • Reunião de assinatura com a diretoria, terça-feira, 13 de outubro, das 14:00 às 15:30, signatário Helena Prado
  • Prazo: contrato de locação Rua das Acácias, quarta-feira, 14 de outubro, das 09:00 às 09:30
  • Assinatura presencial: compra e venda do imóvel, quarta-feira, 14 de outubro, das 10:00 às 11:30, signatário Mariana Couto
  • Reconhecimento de firma no cartório, quarta-feira, 14 de outubro, das 10:30 às 11:00, signatário Rafael Nunes
  • Revisão do aditivo contratual 02, quarta-feira, 14 de outubro, das 11:00 às 12:00
  • Envelope expira: termo de confidencialidade, quinta-feira, 15 de outubro, das 17:00 às 18:00
  • Assinatura presencial: contrato social, sexta-feira, 16 de outubro, das 09:00 às 10:00, signatário Carlos Mendes
  • Conferência de documentos do signatário, sexta-feira, 16 de outubro, das 09:30 às 10:30, signatário Beatriz Lima

Nenhum evento aberto.

Mês

Até três eventos por dia, com o restante resumido. Dias fora do mês ficam em fundo sutil. Clique no número do dia para abrir a visão de dia.

Outubro de 2026

domingo
segunda
terça
quarta
quinta
sexta
sábado
  • Prazo: distrato do contrato de prestação, sexta-feira, 2 de outubro, das 18:00 às 18:30
  • Envelope enviado: acordo de sócios, terça-feira, 6 de outubro, das 11:00 às 11:30
  • Envelope concluído: procuração, segunda-feira, 12 de outubro, das 16:00 às 16:30
  • Reunião de assinatura com a diretoria, terça-feira, 13 de outubro, das 14:00 às 15:30, signatário Helena Prado
  • Prazo: contrato de locação Rua das Acácias, quarta-feira, 14 de outubro, das 09:00 às 09:30
  • Assinatura presencial: compra e venda do imóvel, quarta-feira, 14 de outubro, das 10:00 às 11:30, signatário Mariana Couto
  • Reconhecimento de firma no cartório, quarta-feira, 14 de outubro, das 10:30 às 11:00, signatário Rafael Nunes
  • Revisão do aditivo contratual 02, quarta-feira, 14 de outubro, das 11:00 às 12:00
  • Envelope expira: termo de confidencialidade, quinta-feira, 15 de outubro, das 17:00 às 18:00
  • Assinatura presencial: contrato social, sexta-feira, 16 de outubro, das 09:00 às 10:00, signatário Carlos Mendes
  • Conferência de documentos do signatário, sexta-feira, 16 de outubro, das 09:30 às 10:30, signatário Beatriz Lima
  • Assinatura presencial: escritura de doação, terça-feira, 20 de outubro, das 15:00 às 16:00, signatário João Ribeiro
  • Envelope expira: aditivo de prazo, quinta-feira, 22 de outubro, das 23:00 às 23:30
  • Reunião de fechamento do contrato de fornecimento, terça-feira, 27 de outubro, das 10:00 às 11:00, signatário Ana Souza
  • Prazo: renovação do seguro empresarial, quinta-feira, 29 de outubro, das 09:00 às 09:30

Dia com horários livres

Com onSlotClick, cada intervalo vira um botão. Aqui os intervalos são de 30 minutos e o clique agenda uma nova assinatura presencial.

Quarta-feira, 14 de outubro de 2026

  • Prazo: contrato de locação Rua das Acácias, quarta-feira, 14 de outubro, das 09:00 às 09:30
  • Assinatura presencial: compra e venda do imóvel, quarta-feira, 14 de outubro, das 10:00 às 11:30, signatário Mariana Couto
  • Reconhecimento de firma no cartório, quarta-feira, 14 de outubro, das 10:30 às 11:00, signatário Rafael Nunes
  • Revisão do aditivo contratual 02, quarta-feira, 14 de outubro, das 11:00 às 12:00

Clique num horário livre.

Teclado

O dia em foco usa tabindex itinerante: só ele entra na ordem de tabulação.

PropTipoPadrãoDescrição
← →tecla—Dia anterior e próximo dia. Ao sair do período, a agenda navega junto.
↑ ↓tecla—Mesma posição na semana anterior e na seguinte.
Home / Endtecla—Primeiro e último dia da semana.
PageUp / PageDowntecla—Período anterior e seguinte, conforme a visão.
Enter / Espaçotecla—Abre o dia em foco na visão de dia.

Props

PropTipoPadrãoDescrição
eventsSchedulerEvent[]—{ id, title, start, end, tone?, signer?: { name, slot } }.
view"day" | "week" | "month"—Visão controlada. Use com onViewChange.
defaultView"day" | "week" | "month""week"Visão inicial quando não controlada.
dateDate—Data de referência controlada. Use com onDateChange.
defaultDateDate—Data inicial quando não controlada.
todayDatenew Date()Data usada para marcar hoje, a linha do horário atual e o botão Hoje.
startHour / endHournumber7 / 20Faixa de horas exibida nas visões de dia e semana.
slotMinutes30 | 6060Tamanho de cada intervalo da grade.
weekStartsOn0 | 10Domingo ou segunda como primeiro dia.
onEventClick(event) => void—Torna os eventos botões.
onSlotClick({ start, end }) => void—Torna os intervalos livres botões. No mês, recebe o dia inteiro.
labelstring"Agenda"Nome acessível da região.