CalendarPanel

The CalendarPanel is a data panel controller that renders an interactive calendar using EventCalendar. It displays a ViewTable's records as events on a calendar with month, week, and day views.

The CalendarPanel is typically used as a CenterController inside a List controller, following the same pattern as ChartPanel. The calendar auto-fetches events from the server based on the visible date range.

Basic usage

Controller: List
  CenterController: CalendarPanel
    EventTemplate: CalendarActivity.html
MainTable:
  Model: ACTIVITY_CALENDAR
    CalendarId: EventId
    CalendarStartDate: StartDate
    CalendarEndDate: EndDate
    CalendarEventType: EventType
    CalendarEventNotes: Notes
  EditController:
    Width: 800
    Height: 600

The MainTable/Model node contains the field mappings that tell the calendar which model fields to use for the event ID, start/end dates, title, type (for color-coding), and notes.

Field mapping

Field mappings are defined under the MainTable/Model node. All mappings are optional — sensible defaults are used when a mapping is not specified:

Property	Default	Description
CalendarId	First key field of the model	Field containing the unique event identifier
CalendarStartDate	StartDate	Field containing the event start date/time
CalendarEndDate	EndDate	Field containing the event end date/time (if omitted, events are treated as point-in-time)
CalendarTitle	Title	Field displayed as the event title in the calendar
CalendarEventType	EventType	Field used for automatic color grouping (optional)
CalendarEventNotes	EventNotes	Field displayed as a secondary line below the title (optional, auto-detected)

If CalendarEventNotes is not explicitly mapped, the controller looks for a field named EventNotes in the model. If no such field exists, notes are simply not shown.

Calendar options

Calendar display options are set in the CenterController node:

Property	Default	Description
DefaultView	timeGridWeek	Initial calendar view: dayGridMonth, timeGridWeek, or timeGridDay
SlotMinTime	00:00	Earliest time displayed in week/day views (e.g., 08:00 to hide night hours)
SlotMaxTime	24:00	Latest time displayed in week/day views (e.g., 20:00)
EventTemplate		HTML template file (from Home/Resources/) used to render event content inside calendar cells. The template can use field placeholders to display custom event details

Example with custom options:

Controller: List
  CenterController: CalendarPanel
    DefaultView: dayGridMonth
    SlotMinTime: 08:00
    SlotMaxTime: 20:00

Event colors

When a CalendarEventType field is mapped (or an EventType field exists in the model), each distinct value receives a color from a built-in palette of 10 colors. Colors are assigned automatically in order of first appearance — no manual color configuration is required.

The palette provides visually distinct colors that work well on both light and dark themes.

Event selection and CRUD

The CalendarPanel supports the same CRUD operations as List, with a toolbar containing Add, Edit, Delete, and View buttons. Button visibility and permissions follow the standard action rules (IsActionVisible, IsActionAllowed).

Event interaction follows the same pattern as grid row selection:

• Single click on an event selects it (visual highlight) and enables the Edit/Delete/View toolbar buttons.
• Double click on an event opens the Edit form (or View form if editing is not allowed).
• Click on an empty cell opens the Add form.
• Toolbar buttons work on the currently selected event.

After a form save or delete, the calendar refreshes automatically and the selection is cleared.

Edit form

The calendar uses the same Form controller as List views. Configure the form layout via EditController:

MainTable:
  Model: ACTIVITY_CALENDAR
    CalendarId: EventId
    CalendarStartDate: StartDate
    CalendarEndDate: EndDate
  EditController:
    Width: 800
    Height: 600
    CloneButton:

All EditController options (Width, Height, CloneButton, layout nodes, etc.) work exactly as they do in List views.

Theme integration

The calendar automatically adapts to the current Kitto^x theme (light, dark, or auto). All EventCalendar colors are mapped to Kitto^x CSS custom properties:

• Background, text, and borders follow --kx-surface, --kx-text, --kx-border
• Active buttons and today's column highlight use --kx-accent
• Selected event outline uses --kx-accent (same style as grid row selection)
• The "now" indicator line uses --kx-accent

No additional configuration is needed for theme support.

Model example

A typical model for calendar events combines date and time fields into DateTime expressions:

ModelName: ACTIVITY_CALENDAR
PhysicalName: ACTIVITY
Fields:
  Title:
    Expression: CONCAT(Employee.EMPLOYEE_NAME, ' - ', Phase.PHASE_NAME)
  EventId: String(32) primary key
    PhysicalName: ACTIVITY_ID
  StartDate: DateTime
    Expression: CAST({Q}ACTIVITY_DATE AS datetime) + CAST({Q}START_TIME AS datetime)
  EndDate: DateTime
    Expression: CAST({Q}ACTIVITY_DATE AS datetime) + CAST({Q}END_TIME AS datetime)
  Notes: String(80)
    PhysicalName: DESCRIPTION
  EventType: Reference(ACTIVITY_TYPE) not null
    Fields:
      TYPE_ID:

The {Q} prefix is the standard Kitto^x table qualification marker, resolved automatically in SQL queries.

Data endpoint

The calendar fetches events from the server via an automatic JSON endpoint:

kx/view/{ViewName}/calendar-data?start=...&end=...

EventCalendar sends the start and end parameters automatically as the user navigates between dates. The server builds a parameterized query (using ftDateTime parameters for database independence) and returns a JSON array of events.

This endpoint is handled internally — no configuration is needed.