Skip to content

Event Calendar

Build and inspect a populated App Connect Event Calendar with views, a calendar source, styled events, and a real scheduling page around it.

A calendar with a real job on the page

The Real Estate inquiry page uses Event Calendar to show available and booked appointment windows beside a working Server Connect inquiry form. This makes the component, its source, and the surrounding user journey visible together.

Multiple views
Offer month, week, and list views from one calendar component.
Event sources
Keep event records inside a source that can later be replaced or fed by dynamic data.
Clear status
Use event labels and colors to distinguish availability from booked time.

Configure the calendar in full page context

Select showing_calendar in the expanded Structure tree. The populated Properties panel exposes its theme, default view, available views, sizing, and calendar behavior while Design View keeps the complete inquiry page visible.

Organize events in a calendar source

showing_calendar_source groups the event records beneath the calendar. Keeping the source explicit in Structure makes it easier to inspect, replace, or connect the schedule to live application data later.

Inspect a complete event record

Each event has a title, start and end time, plus optional styling. The selected open-showing event demonstrates a fully populated inspector, including the green status color used to distinguish available time from booked or blocked slots.

Review the calendar beside the workflow it supports

The final page pairs scheduling context with the inquiry form. Test the different calendar views, confirm event colors remain legible in the dark and light application themes, and verify that dates match the timezone expectations of the backend workflow.

From static schedule to live booking data

Start with clearly modeled event records, choose only the calendar views the audience needs, and use consistent status colors. When the workflow grows, keep the same calendar component and feed its source from App Connect or Server Connect data.