Page type

Calendar: the 52 sales, color-coded by status.

The calendar below runs in the sample app, published on the Online Test. Each event is a sale, with the customer's name and the status color: green for paid, orange for pending, blue for shipped and red for canceled.

The month of sales, each with its status color

Here, July 2026 with the sales on their days. Each event's title is the customer's name ({cliente->nome}), and the color comes from the sale's status (statusRel->cor). Change the status and the event changes color.

Monthly calendar with sales color-coded by status — Month view: each sale with the customer's name and the status color.

Point to the table and the fields, and the calendar fills itself in

You tell it the table and which fields are the title, start, end and color. The calendar fetches the events on its own, because the route that serves that data is generated along with it:

resources/views/…blade.php

<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>

Day, week, month and list

All four views come ready out of the box, in English:

Weekly view of the sales calendar — Week view: the all-day strip groups each day's sales, already with the status color.

List view of the sales calendar — List view: the same events in agenda format.

When to use the calendar

Use the calendar when the date is what matters in the record. Each row of the table becomes an event on the right day, and rescheduling is a drag.

Sales visits. Each visit on its day and time, with the customer in the title and the status color.
Room booking. In the resource timeline, each room becomes a row, and the booked slots sit side by side.
Inventory deliveries. If the supplier runs late, you drag the delivery to the new date.
Vacations in HR. All-day events you stretch to extend the period.

When the record has phases, dependencies and progress, the Gantt shows it better. When only the order of events matters, with no day grid, use the timeline. The calendar, like the Gantt, comes out as native code in the Laravel project.

What you configure

A few attributes tune the grid to the way your team works.

Initial view default-view: The view that opens first. The default is week, and this example opens on month.
Visible hours time-range: The range of hours in the day and week views, such as 08:00-18:00. Without it, all 24 hours show.
Row size slot-duration: How much time each time row is worth. One hour by default, half an hour with 00:30.
No weekends no-weekend: Hides Saturday and Sunday. To pick other days, use enable-days.
All day all-day-field: A yes/no field that marks the event as all-day, with no time.
Resource name resource-title-field: In the resource timeline, the name of each row. It can combine fields, such as {nome} - andar {andar}.

What goes into the Laravel project

The calendar becomes regular files: the class in app/Control, the view with <mad-calendar> in resources/views and the route in routes/modules/generated.php. What is specific to it:

Saving the new date comes built in. When you drag or stretch an event, the date changes in the database with no code from you (auto-update). Before that, the calendar can ask a confirmation question (confirm-update).
The click carries the resource data. In the resource timeline, slot-click-target receives the date, the id and the name of the clicked resource.
Reload from code. With an identifier (calendar-id), the calendar fetches the events again through refetchCalendar(), for example after saving on another screen.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the calendar

Does the calendar work with any table that has a date?

It works with any table that has a date or date-time field for the start and another for the end. Both can be the same field, like the sale date in this example.

Can I see the schedule of several rooms or people at once?

Yes, in the resource timeline. Each room, person or piece of equipment becomes a row, linked to the event through a field in the table.

How do I stop someone from changing an event's date?

You can make the whole calendar read-only, or block just dragging or just resizing. To lock events one by one, point to a yes/no field in the table.

And more

Drag or stretch an event and the date changes in the databaseSale details on hoverOne click on an event opens the form, in a side panel or a windowOne click on a day creates a recordResource timeline, such as rooms or peopleFilters just like the ones in the list view

See the kanban in detail or explore the page types.

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

Try the app now See the generated code

Create an accountOpen beta, no credit card.
Build a screenVisually, in code, or by asking the AI.
Download the .zipA Laravel project that runs wherever you want.