Components/Data display

ECalendar Calendar

import EUI 1.0

Examples

Date ranges and custom date cells

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECalendar { value: "2026-10-10" controllerType: "select" width: Math.min(620, parent.width) dateCellDelegate: Component { EText { padding: 10 wrapMode: Text.WordWrap text: parent.day.slice(-2) + (parent.day === "2026-10-10" ? qsTr("\nRelease day") : "") color: parent.isSelected ? EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) : EPaletteManager.ThemePalette.textRegular(ETheme.dark) } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Calendar

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECalendar { value: "2026-10-10" maxDate: "2026-12-31" minDate: "2026-01-01" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

calendarLocalevar

Locale used for date/time parsing, formatting and panels.

Default

Show default value

Qt.locale(PickerFormats.localeName( EControlConfig.valueFor(control, "locale", ELocale.language), ELocale.language ))

cellComponentComponent

Component slot for custom table cell or date cell; null uses the default content. See this page’s examples for delegate context.

Defaultnull

controllerTypestring

Month navigation control style.

"button" / "select"
"none"

Default"button"

dateCellDelegateComponent

Component slot for custom calendar date cell; null uses the default content. See this page’s examples for delegate context.

Defaultnull

disabledDatevar

Date disabling callback receiving a JavaScript Date and returning whether it is disabled.

Defaultnull

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fixedViewbool

Lock the date panel view instead of switching levels through its title.

Defaultfalse

focusedDatedate

Date focused by keyboard navigation in the date panel.

Defaultnew Date(year, month, 1)

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

headerDelegateComponent

Component slot for custom header; null uses the default content. See this page’s examples for delegate context.

Defaultnull

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hoverValuestring

Hovered date or rating used for preview.

Default""

maxDatestring

Selectable date bounds in yyyy-MM-dd; an empty string imposes no bound.

Default""

minDatestring

Selectable date bounds in yyyy-MM-dd; an empty string imposes no bound.

Default""

monthint

Displayed month from 1 to 12.

Defaultnew Date().getMonth()

nextMonthIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_RIGHT

nextYearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRONS_RIGHT

prevMonthIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_LEFT

prevYearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRONS_LEFT

rangevar

Calendar display range as a start/end date array.

Default[]

rangeStartstring

Start of the date range being selected.

Default""

showConfirmbool

Show the confirm button.

Defaultfalse

showFooterbool

Show the footer action area.

Defaulttrue

showWeekNumberbool

Show week numbers.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

typestring

Date selection unit and single, multiple or range selection mode.

"date" / "dates"
"week" / "month"
"months" / "year"
"years" / "quarter"
"quarters" / "daterange"
"monthrange" / "yearrange"
"quarterrange"

Default"date"

valuevar

Selected date in yyyy-MM-dd; month, year or range panels use the corresponding format.

Default""

viewModestring

Date level currently displayed in the panel.

"date" / "month"
"year"

Default

Show default value

type.indexOf("year") === 0 ? "year" : type.indexOf("month") === 0 || type.indexOf("quarter") === 0 ? "month" : "date"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

yearint

Displayed year.

Defaultnew Date().getFullYear()

displayedMonthsintRead only

Month data displayed within the calendar range.

DefaultComputed at runtime

periodViewboolRead only

Whether the date panel shows month or year periods.

DefaultComputed at runtime

selectedDatevarRead only

Current selected Date parsed by the date panel.

DefaultComputed at runtime

selectedDayvarRead only

Currently selected calendar day.

DefaultComputed at runtime

validatedRangevarRead only

Validated start/end dates of the calendar range.

DefaultComputed at runtime

Signals

SignaturePurpose

picked(var value)

Emitted after choosing a value; value is the chosen value.

calendarChanged(var value)

Emitted when the calendar selection changes; value is the current selection.

panelChanged(var date, string mode)

Emitted when the calendar view changes; date is the displayed date and mode is the view mode.

dateSelected(string value)

Emitted after selecting a date; value contains the selected date.

Methods

SignaturePurpose

focusCalendar()

Move keyboard focus to the calendar.

setView(date)

Change the displayed calendar position to date.

shiftMonth(offset)

Shift the displayed calendar by offset months; negative values move backward.

selectDate(input)

Select the date specified by input.

navigate(offset)

Navigate to the specified step or relative time range.