# Expediente A weekly appointment calendar where you create, move and stretch time slots by dragging, with a color per provider. > Expediente is an exclusive THM Componentes component that builds an appointment calendar with day and week views. People create a slot by dragging over empty space, move and resize it with a 15-minute snap and see conflicts for the same provider. Everything also works from the keyboard, which suits clinics, practices and booking systems. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/expediente/ ## What it looks like Picture a phone calendar on the week view. The top bar has a button to jump to today, back and forward arrows and a day or week switch. On the left, a mini month calendar and the provider list, each with a color, a checkbox and an appointment count. Hours run from 7 am to 8 pm, with off-hours shaded and a red line at the current time. Each appointment is a pale block marked in the provider color; conflicts get hatching and a warning badge. Dragging over empty space draws a dashed block and opens the editor beside it, or as a bottom sheet on small screens. ## You may be looking for this if you asked for something like - “a Google Calendar style scheduler for booking appointments in my app” - “a weekly calendar where I drag to create a time slot” - “a clinic calendar with a different color for each doctor” - “a booking screen where you can drag an appointment to another time” - “that week grid of hours with a line showing the current time” - “a calendar that warns when two bookings overlap for the same person” - “an appointment scheduler that works fully with the keyboard” ## Also known as appointment scheduler, event calendar, calendar week view, drag and drop calendar, booking calendar, time grid calendar ## When to use - Clinic, practice or telehealth systems that book appointments per provider - ERPs and internal dashboards that reserve rooms, equipment or other resources - Front desk screens where staff reschedule throughout the day by dragging - Products that need a calendar fully usable by keyboard and screen reader ## When to avoid - Sales pages where the customer only picks one time, where a simple picker is enough - Calendars built around recurring or all-day events, which it does not provide out of the box - Apps that need an English interface as is, since labels and dates come in Brazilian Portuguese ## How to ask your AI ```text Create an appointment calendar with day and week views in the clinic dashboard: drag over empty space to create a slot, move and resize with a 15-minute snap, a color per provider, conflict warnings, full keyboard support and an editor that becomes a bottom panel on phones. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Expediente ### Does Expediente work on phones? Yes, with touch: tapping an empty slot opens the editor for a new appointment, and blocks can be dragged to move or resize them. On narrow screens Expediente hides the side panel with the mini calendar and providers, and the editor opens as a bottom panel. In week view the seven columns scroll sideways, so the day view usually works better on a phone. ### Can I use Expediente with only a keyboard? Yes. In Expediente the arrow keys move a time cursor across the grid, Shift with arrows changes the duration and Enter creates the appointment. On an appointment, Enter edits, Delete removes it and Alt with arrows moves it. T jumps to today, D and W switch between day and week, and Ctrl+Z undoes. Screen readers announce the focused time and whether it is free or booked. ### How do I connect Expediente to my data in Nuxt? Appointments go in and out through v-model, with start and end as local date and time, and Expediente emits events when an appointment is created, changed or deleted, ready to save to your API. In Nuxt, the THM Componentes prompt tells your AI to wrap the component in ClientOnly with a static fallback and to load it on demand. ## Related components - [Canteiro](https://vibecode.thmtecnologia.com/en/components/canteiro/): A bar schedule you drag to change dates, with arrows between tasks and the critical path in red. - [Esteira](https://vibecode.thmtecnologia.com/en/components/esteira/): A board of columns with cards you drag between stages, with per-column limits, due dates and priorities. - [Folhinha](https://vibecode.thmtecnologia.com/en/components/folhinha/): A two-month calendar to pick a start and end date, with quick shortcuts, typed input and highlighted holidays. - [Trampolim](https://vibecode.thmtecnologia.com/en/components/trampolim/): A card with the days as buttons: pick a day and the card stretches with a spring and shows its events. - [Balancete](https://vibecode.thmtecnologia.com/en/components/balancete/): A table that scrolls through thousands of rows smoothly, with filters, sorting, editing and spreadsheet copy and paste. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).