?? Tela: Visualização em Calendário

?? Visão Geral da Tela

Tela simplificada focada exclusivamente na visualização em calendário dos eventos. Oferece uma interface mais limpa sem os filtros e estatísticas da tela Index.

?? Elementos da Interface

1. Header do Card

• Título: "Calendário de Eventos" com ícone ti-calendar
• Botões de toggle:
  • Lista (outline-primary) - Link para /Agenda/Index
  • Calendário (primary active) - Página atual

2. Calendário FullCalendar

• Container: #calendar
• Views disponíveis: dayGridMonth, timeGridWeek, timeGridDay, listMonth
• Locale: pt-br
• Toolbar:
  • Left: prev, next, today
  • Center: title (mês/ano atual)
  • Right: dayGridMonth, timeGridWeek, timeGridDay, listMonth
• Height: auto (min 650px)

3. Eventos no Calendário

• Cor: Cinza minimalista (#808080) - Sem diferenciação por tipo
• Padding: 2px-4px com border-radius de 4px
• Conteúdo: Título do evento
• Cursor: pointer (clicável)
• Hover: Opacidade reduzida (0.8)

?? Modal de Detalhes do Evento

Estrutura

• ID: #eventDetailModal
• Tamanho: modal-lg
• Trigger: Click em evento do calendário

Conteúdo do Modal

Campo	Ícone	Dados
Título	-	No header do modal
Data	ti-calendar	dd/MM/yyyy
Horário	ti-clock	HH:mm - HH:mm ou "Dia inteiro"
Tipo	ti-tag	Badge bg-light-primary com label traduzido
Local	ti-map-pin	String ou "Não definido"
Turma	ti-school	Badge bg-light-info com nome da turma ou "Geral"
Status	ti-activity	Badge colorido (primary/success/danger/secondary)
Descrição	ti-file-text	Texto ou "Sem descrição"
Participantes	ti-users	Progress bar (confirmados/capacidade) - Condicional

Participantes (Condicional)

Exibido apenas se capacidadeMaxima e participantesConfirmados estiverem disponíveis:

• Progress bar: Altura 20px
• Cores:
  • Verde (bg-success): < 70%
  • Amarelo (bg-warning): 70-89%
  • Vermelho (bg-danger): = 90%
• Label: "X/Y" (confirmados/capacidade)

?? Mapeamento de Dados

Modelo Evento (C#) ? FullCalendar Event

{
    id: evento.id,
    title: evento.titulo,
    start: startTime (Date com hora se disponível),
    allDay: !evento.horaInicio && !evento.horaEvento,
    className: "event-meeting" (sempre cinza nesta tela),
    extendedProps: {
        description: evento.descricao || "Sem descrição",
        location: evento.local || "Não definido",
        type: evento.tipo,
        turma: evento.turmaNome || "Geral",
        status: evento.status || "agendado",
        horaInicio: evento.horaInicio,
        horaFim: evento.horaFim,
        capacidade: evento.capacidadeMaxima,
        confirmados: evento.participantesConfirmados
    }
}
        

Tipos de Evento (typeMap)

Valor no DB	Label Exibido
meeting	Reunião
rehearsal	Ensaio
graduation	Formatura
party	Festa
workshop	Workshop
Outros	Valor original do DB

Status (statusMap)

Valor no DB	Label	Classe do Badge
agendado	Agendado	bg-light-primary
confirmado	Confirmado	bg-light-success
cancelado	Cancelado	bg-light-danger
concluido	Concluído	bg-light-secondary
Outros	Valor original	bg-light-warning

?? Funcionalidades JavaScript

Inicialização do Calendário

const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    locale: "pt-br",
    events: calendarEvents,
    eventClick: function(info) { showEventDetails(info.event); },
    eventMouseEnter: opacity 0.8,
    eventMouseLeave: opacity 1,
    height: "auto",
    contentHeight: 650
});
        

Função showEventDetails(event)

Preenche modal com dados do evento:

• Extrai extendedProps do evento FullCalendar
• Formata datas e horários para pt-BR
• Aplica badges com classes corretas
• Calcula % de ocupação para progress bar
• Exibe modal via Bootstrap

?? Regras de Negócio

• Eventos sem horário são marcados como allDay
• horaInicio tem prioridade sobre horaEvento
• Eventos sem descrição exibem "Sem descrição"
• Eventos sem local exibem "Não definido"
• Eventos sem turma exibem "Geral"
• Participantes só aparecem se capacidade for informada
• Cor é sempre cinza (#808080) - Design minimalista

?? Integração com API

GET /Agenda/Calendario: Retorna Model (List<Evento>) serializado como JSON no script

?? Navegação

• Ao clicar em "Lista": Redireciona para /Agenda/Index
• Ao clicar em "Calendário": Permanece na página atual
• Modal: Apenas visualização, sem botões de ação

?? Responsividade

• FullCalendar é responsivo por padrão
• Modal é modal-lg (adapta em mobile)
• Eventos com título longo quebram linha (white-space: normal)

?? Bibliotecas Externas

• FullCalendar 6.1.8: Calendário interativo
• Bootstrap 5: Modal e badges
• Tabler Icons: Ícones de interface