139 lines
3.6 KiB
Markdown
139 lines
3.6 KiB
Markdown
# 3D Wall Calendar Component
|
|
|
|
## 📦 Componente Integrado
|
|
|
|
Um calendário interativo 3D com efeitos de parede para visualização de eventos.
|
|
|
|
## 🎯 Localização
|
|
|
|
- **Componente**: `components/ui/three-dwall-calendar.tsx`
|
|
- **Página**: `app/(main-routes)/calendar/page.tsx`
|
|
|
|
## 🚀 Funcionalidades
|
|
|
|
- ✅ Visualização 3D interativa com efeito de perspectiva
|
|
- ✅ Controle de rotação via mouse (drag) e scroll
|
|
- ✅ Navegação entre meses
|
|
- ✅ Adição e remoção de eventos
|
|
- ✅ Visualização de eventos por dia
|
|
- ✅ Popover com detalhes do evento
|
|
- ✅ Hover card para preview rápido
|
|
- ✅ Suporte a localização pt-BR
|
|
- ✅ Design responsivo
|
|
|
|
## 🎮 Como Usar
|
|
|
|
### Na Página de Calendário
|
|
|
|
Acesse a página de calendário e clique no botão **"3D"** ou pressione a tecla **"3"** para alternar para a visualização 3D.
|
|
|
|
### Atalhos de Teclado
|
|
|
|
- **C**: Calendário tradicional (FullCalendar)
|
|
- **3**: Calendário 3D
|
|
- **F**: Fila de espera
|
|
|
|
### Interação 3D
|
|
|
|
- **Arrastar (drag)**: Rotaciona o calendário
|
|
- **Scroll do mouse**: Ajusta a inclinação vertical/horizontal
|
|
- **Clique nos eventos**: Abre detalhes com opção de remover
|
|
|
|
## 📝 API do Componente
|
|
|
|
```tsx
|
|
interface CalendarEvent {
|
|
id: string
|
|
title: string
|
|
date: string // ISO format
|
|
}
|
|
|
|
interface ThreeDWallCalendarProps {
|
|
events: CalendarEvent[]
|
|
onAddEvent?: (e: CalendarEvent) => void
|
|
onRemoveEvent?: (id: string) => void
|
|
panelWidth?: number // default: 160
|
|
panelHeight?: number // default: 120
|
|
columns?: number // default: 7
|
|
}
|
|
```
|
|
|
|
## 🔧 Dependências Instaladas
|
|
|
|
- `uuid` - Geração de IDs únicos
|
|
- `date-fns` - Manipulação de datas
|
|
- `@radix-ui/react-popover` - Popovers
|
|
- `@radix-ui/react-hover-card` - Hover cards
|
|
- `lucide-react` - Ícones
|
|
|
|
## 🎨 Personalização
|
|
|
|
O componente utiliza as variáveis CSS do tema shadcn/ui:
|
|
- `bg-blue-500` / `dark:bg-blue-600` para eventos
|
|
- Componentes shadcn/ui: `Card`, `Button`, `Input`, `Popover`, `HoverCard`
|
|
|
|
## 📱 Responsividade
|
|
|
|
O calendário ajusta automaticamente:
|
|
- 7 colunas para desktop (padrão)
|
|
- Scroll horizontal para telas menores
|
|
- Cards responsivos com overflow visível
|
|
|
|
## 🔄 Integração com Backend
|
|
|
|
Os eventos são convertidos automaticamente dos agendamentos do sistema:
|
|
|
|
```tsx
|
|
// Conversão automática de agendamentos para eventos 3D
|
|
const threeDEvents: CalendarEvent[] = appointments.map((obj: any) => ({
|
|
id: obj.id || String(Date.now()),
|
|
title: `${patient}: ${appointment_type}`,
|
|
date: new Date(scheduled_at).toISOString(),
|
|
}))
|
|
```
|
|
|
|
## ✨ Exemplo de Uso
|
|
|
|
```tsx
|
|
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"
|
|
|
|
export default function MyPage() {
|
|
const [events, setEvents] = useState<CalendarEvent[]>([])
|
|
|
|
const handleAddEvent = (event: CalendarEvent) => {
|
|
setEvents((prev) => [...prev, event])
|
|
}
|
|
|
|
const handleRemoveEvent = (id: string) => {
|
|
setEvents((prev) => prev.filter((e) => e.id !== id))
|
|
}
|
|
|
|
return (
|
|
<ThreeDWallCalendar
|
|
events={events}
|
|
onAddEvent={handleAddEvent}
|
|
onRemoveEvent={handleRemoveEvent}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Eventos não aparecem
|
|
- Verifique se o formato da data está em ISO (`new Date().toISOString()`)
|
|
- Confirme que o array `events` está sendo passado corretamente
|
|
|
|
### Rotação não funciona
|
|
- Certifique-se de que o navegador suporta `transform-style: preserve-3d`
|
|
- Verifique se não há conflitos de CSS sobrescrevendo as propriedades 3D
|
|
|
|
### Performance
|
|
- Limite o número de eventos por dia para melhor performance
|
|
- Considere virtualização para calendários com muitos meses
|
|
|
|
---
|
|
|
|
**Data de Integração**: 30 de outubro de 2025
|
|
**Versão**: 1.0.0
|