# Expediente Agenda semanal de consultas em que você cria, move e estica horários arrastando, com uma cor por profissional. > Expediente é um componente exclusivo do THM Componentes que monta uma agenda de consultas com visões Dia e Semana. A pessoa cria um horário arrastando no espaço vazio, move e redimensiona com encaixe de 15 minutos e vê conflitos do mesmo profissional. Tudo também funciona pelo teclado, o que atende clínicas, consultórios e sistemas de agendamento. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/expediente/ ## 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 ```text 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. ## Componentes relacionados - [Canteiro](https://vibecode.thmtecnologia.com/componentes/canteiro/): Cronograma de barras que você arrasta para mudar datas, com setas entre as tarefas e o caminho crítico em vermelho. - [Esteira](https://vibecode.thmtecnologia.com/componentes/esteira/): Quadro de colunas com cartões que você arrasta entre etapas, com limite por coluna, prazos e prioridades. - [Folhinha](https://vibecode.thmtecnologia.com/componentes/folhinha/): Calendário em português com dois meses lado a lado para escolher data inicial e final, com atalhos e feriados. - [Trampolim](https://vibecode.thmtecnologia.com/componentes/trampolim/): Um cartão com os dias em botões: ao escolher um dia, o cartão se estica com efeito de mola e mostra os eventos. - [Balancete](https://vibecode.thmtecnologia.com/componentes/balancete/): Tabela que rola milhares de linhas sem travar, com filtros, ordenação, edição e copiar e colar com planilhas. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.