Calendário: as 52 vendas, coloridas por status.
O calendário abaixo roda no app de exemplo, publicado no Teste Online. Cada evento é uma venda, com o nome do cliente e a cor do status: verde para pago, laranja para pendente, azul para enviado e vermelho para cancelado.
O mês de vendas, cada uma com a cor do status
Aqui, julho de 2026 com as vendas nos seus dias. O título de cada evento é o nome do cliente ({cliente->nome}), e a cor vem do status da venda (statusRel->cor). Mude o status e o evento muda de cor.
Aponte a tabela e os campos, e o calendário se preenche
Você informa a tabela e quais campos são título, início, fim e cor. O calendário busca os eventos sozinho, porque a rota que entrega esses dados é gerada junto:
<mad-calendarmodel="Venda"title-field="{cliente->nome}"start-field="data_venda"end-field="data_venda"color-field="statusRel->cor"default-view="month"popover-title="{cliente->nome}"popover-content="{vendedor} · {forma_pagamento}"click-target="VendaForm::onEdit({id})"editable>Dia, semana, mês e lista
As quatro visões já vêm prontas, em português:
Quando usar o calendário
O calendário serve quando a data é o que importa no registro. Cada linha da tabela vira um evento no dia certo, e remarcar é arrastar.
- Visitas comerciais. Cada visita no seu dia e horário, com o cliente no título e a cor do status.
- Reserva de salas. Na linha do tempo por recurso, cada sala vira uma linha, e os horários ocupados ficam lado a lado.
- Entregas do estoque. Se o fornecedor atrasar, você arrasta a entrega para a nova data.
- Férias no RH. Eventos de dia inteiro que você estica para aumentar o período.
Quando o registro tem fases, dependências e progresso, o Gantt mostra melhor. Quando só interessa a ordem dos acontecimentos, sem grade de dias, use a timeline. O calendário, como o Gantt, sai como código nativo do projeto Laravel.
O que você configura
Alguns atributos ajustam a grade ao jeito que a sua equipe trabalha.
- Visão inicial
default-view - A visão que abre primeiro. O padrão é a semana, e este exemplo abre no mês.
- Horário visível
time-range - A faixa de horas das visões de dia e semana, como
08:00-18:00. Sem ele, aparecem as 24 horas. - Tamanho da linha
slot-duration - Quanto tempo vale cada linha de horário. Uma hora por padrão, meia hora com
00:30. - Sem fim de semana
no-weekend - Esconde sábado e domingo. Para escolher outros dias, use o
enable-days. - Dia inteiro
all-day-field - Um campo de sim ou não que marca o evento como dia inteiro, sem horário.
- Nome do recurso
resource-title-field - Na linha do tempo por recurso, o nome de cada linha. Pode juntar campos, como
{nome} - andar {andar}.
O que vai para o projeto Laravel
O calendário vira arquivos comuns: a classe em app/Control, a view com <mad-calendar> em resources/views e a rota em routes/modules/generated.php. O que é específico dele:
- Gravar a nova data já vem pronto. Ao arrastar ou esticar um evento, a data muda no banco sem código seu (
auto-update). Antes, o calendário pode fazer uma pergunta de confirmação (confirm-update). - O clique leva os dados do recurso. Na linha do tempo por recurso, o
slot-click-targetrecebe a data, o id e o nome do recurso clicado. - Recarregar pelo código. Com um identificador (
calendar-id), o calendário busca os eventos de novo pelorefetchCalendar(), por exemplo depois de salvar em outra tela.
Como toda tela do MadBuilder, esses arquivos abrem no seu editor, vão para o seu Git e aceitam código à mão em blocos protegidos, que continuam lá quando a tela é gerada de novo. Veja como o código é gerado.
Perguntas sobre o calendário
O calendário funciona com qualquer tabela que tenha data?
Funciona com a tabela que tiver um campo de data, ou de data e hora, para o início e outro para o fim. Os dois podem ser o mesmo campo, como a data da venda neste exemplo.
Dá pra ver a agenda de várias salas ou pessoas ao mesmo tempo?
Dá, na linha do tempo por recurso. Cada sala, pessoa ou equipamento vira uma linha, ligada ao evento por um campo da tabela.
Como impedir que alguém mude a data de um evento?
Você pode deixar o calendário todo sem edição ou bloquear só o arrasto ou só o ajuste de duração. Para travar evento por evento, aponte um campo de sim ou não na tabela.
E mais
Crie a conta, monte uma tela, baixe o projeto.
Sem demo agendada e sem call de descoberta. Se o Laravel que sair não passar na revisão do seu time, você perdeu uma tarde.
- Crie a contaBeta aberto, sem cartão.
- Monte uma telaNo visual, no código ou pedindo à IA.
- Baixe o .zipUm projeto Laravel que roda onde você quiser.