Como ele é
Parece a agenda do celular aberta na semana. No topo ficam o botão Hoje, as setas de navegação e a troca entre Dia e Semana. À esquerda, um mini-calendário do mês e a lista de profissionais, cada um com sua cor, uma caixa para esconder e o total de consultas. A grade vai das 7h às 20h, com o fora do expediente sombreado e uma linha vermelha na hora atual. Cada consulta é um bloco claro com faixa na cor do profissional; conflitos ganham listras e um alerta. Arrastar no vazio desenha um bloco tracejado e abre o editor ao lado, ou como painel inferior em telas estreitas.
Você pode estar procurando isto se pediu algo assim
- uma agenda tipo Google Agenda para marcar consultas no meu sistema
- calendário semanal em que eu arrasto para criar um horário
- agenda de clínica com uma cor diferente para cada médico
- tela de agendamento onde dá para mover a consulta arrastando
- aquela grade de horários da semana com a linha da hora atual
- agenda que avisa quando dois pacientes caem no mesmo horário
- marcação de horário para consultório que funcione pelo teclado
Também chamado de
- agenda de consultas
- calendário semanal
- agenda arrastável
- appointment scheduler
- event calendar
- calendar week view
- drag and drop calendar
- booking calendar
Quando usar
- Sistemas de clínica, consultório ou telemedicina que marcam consultas por profissional
- ERPs e painéis internos que reservam salas, equipamentos ou outros recursos
- Telas de recepção em que a equipe remarca horários arrastando ao longo do dia
- Produtos que precisam de uma agenda operável só pelo teclado e por leitor de tela
Quando evitar
- Páginas de venda em que o cliente só escolhe um horário, onde um seletor simples resolve
- Calendários baseados em eventos recorrentes ou de dia inteiro, que o componente não traz prontos
Como pedir para a sua IA
Crie uma agenda de consultas com visões Dia e Semana no painel da clínica: criar horário arrastando no vazio, mover e redimensionar com encaixe de 15 minutos, uma cor por profissional, aviso de conflito, uso completo pelo teclado e editor que vira painel inferior no celular.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Expediente
Expediente funciona no celular?
Funciona com toque: tocar num horário vazio abre o editor de uma nova consulta, e os blocos podem ser arrastados para mover ou redimensionar. Em telas estreitas, Expediente esconde a lateral com mini-calendário e profissionais, e o editor abre como painel inferior. Na visão Semana, as sete colunas rolam para o lado, então a visão Dia costuma servir melhor no celular.
Dá para usar Expediente só pelo teclado?
Sim. Em Expediente, as setas movem um cursor de horário pela grade, Shift com setas muda a duração e Enter cria a consulta. Numa consulta, Enter edita, Delete exclui e Alt com setas move. T volta para hoje, D e S trocam a visão e Ctrl+Z desfaz. O leitor de tela anuncia o horário em foco e se ele está livre ou ocupado.
Como ligo Expediente aos meus dados no Nuxt?
As consultas entram e saem por v-model, com início e fim em data e hora locais, e Expediente emite eventos ao criar, alterar e excluir, prontos para salvar na sua API. Em Nuxt, o prompt do THM Componentes orienta a IA a envolver o componente em ClientOnly, com um fallback estático, e a carregar sob demanda.
