Calendario: las 52 ventas, coloreadas por estado.
El calendario de abajo corre en la app de ejemplo, publicada en la Prueba online. Cada evento es una venta, con el nombre del cliente y el color del estado: verde para pagado, naranja para pendiente, azul para enviado y rojo para cancelado.
El mes de ventas, cada una con el color del estado
Aquí, julio de 2026 con las ventas en sus días. El título de cada evento es el nombre del cliente ({cliente->nome}), y el color viene del estado de la venta (statusRel->cor). Cambia el estado y el evento cambia de color.
Apunta la tabla y los campos, y el calendario se llena
Indicas la tabla y cuáles campos son título, inicio, fin y color. El calendario busca los eventos solo, porque la ruta que entrega esos datos se genera junto con él:
<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>Día, semana, mes y lista
Las cuatro vistas ya vienen listas, en español:
Cuándo usar el calendario
El calendario sirve cuando la fecha es lo que importa en el registro. Cada fila de la tabla se vuelve un evento en el día correcto, y reprogramar es arrastrar.
- Visitas comerciales. Cada visita en su día y horario, con el cliente en el título y el color del estado.
- Reserva de salas. En la línea de tiempo por recurso, cada sala se vuelve una fila, y los horarios ocupados quedan lado a lado.
- Entregas de inventario. Si el proveedor se atrasa, arrastras la entrega a la nueva fecha.
- Vacaciones en RR. HH. Eventos de día completo que estiras para ampliar el período.
Cuando el registro tiene fases, dependencias y progreso, el Gantt lo muestra mejor. Cuando solo importa el orden de los acontecimientos, sin cuadrícula de días, usa la timeline. El calendario, como el Gantt, sale como código nativo del proyecto Laravel.
Lo que configuras
Algunos atributos ajustan la cuadrícula a la forma en que trabaja tu equipo.
- Vista inicial
default-view - La vista que abre primero. Por defecto es la semana, y este ejemplo abre en el mes.
- Horario visible
time-range - El rango de horas de las vistas de día y semana, como
08:00-18:00. Sin él, aparecen las 24 horas. - Tamaño de la fila
slot-duration - Cuánto tiempo vale cada fila de horario. Una hora por defecto, media hora con
00:30. - Sin fin de semana
no-weekend - Oculta sábado y domingo. Para elegir otros días, usa
enable-days. - Día completo
all-day-field - Un campo de sí o no que marca el evento como de día completo, sin horario.
- Nombre del recurso
resource-title-field - En la línea de tiempo por recurso, el nombre de cada fila. Puede unir campos, como
{nome} - andar {andar}.
Lo que va al proyecto Laravel
El calendario se vuelve archivos comunes: la clase en app/Control, la vista con <mad-calendar> en resources/views y la ruta en routes/modules/generated.php. Lo que es específico de él:
- Guardar la nueva fecha ya viene listo. Al arrastrar o estirar un evento, la fecha cambia en la base de datos sin código tuyo (
auto-update). Antes, el calendario puede hacer una pregunta de confirmación (confirm-update). - El clic lleva los datos del recurso. En la línea de tiempo por recurso,
slot-click-targetrecibe la fecha, el id y el nombre del recurso en el que se hizo clic. - Recargar desde el código. Con un identificador (
calendar-id), el calendario busca los eventos de nuevo conrefetchCalendar(), por ejemplo después de guardar en otra pantalla.
Como toda pantalla de MadBuilder, esos archivos se abren en tu editor, van a tu Git y aceptan código a mano en bloques protegidos, que siguen ahí cuando la pantalla se genera de nuevo. Mira cómo se genera el código.
Preguntas sobre el calendario
¿El calendario funciona con cualquier tabla que tenga una fecha?
Funciona con la tabla que tenga un campo de fecha, o de fecha y hora, para el inicio y otro para el fin. Los dos pueden ser el mismo campo, como la fecha de la venta en este ejemplo.
¿Se puede ver la agenda de varias salas o personas a la vez?
Sí, en la línea de tiempo por recurso. Cada sala, persona o equipo se vuelve una fila, ligada al evento por un campo de la tabla.
¿Cómo impedir que alguien cambie la fecha de un evento?
Puedes dejar todo el calendario sin edición o bloquear solo el arrastre o solo el ajuste de duración. Para bloquear evento por evento, apunta a un campo de sí o no en la tabla.
Y más
Crea la cuenta, arma una pantalla, descarga el proyecto.
Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.
- Crea la cuentaBeta abierta, sin tarjeta.
- Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
- Descarga el .zipUn proyecto Laravel que corre donde quieras.
