Calendar

Configure a calendar, inspect its markup and events, then verify the exact same setup inside a modal.

bk-custom-calendarDate and timeAngular

Preview

A working preview of Calendar in the Brickclay style. Try it.

November 2026

SuMoTuWeThFrSa

Selected: Nov 17, 2026

Interact with the preview to see events here.

Applied to the div wrapping the calendar above, handy for reproducing layout bugs (narrow columns, stretched containers, etc.) around it. Standard scale utilities (max-w-sm, w-64, bg-slate-50, p-4, …) are safelisted so they work; arbitrary-value classes like w-[350px] can't, Tailwind only compiles those when it sees the literal bracket text in a source file at build time, never from a runtime string.

Event log

Open, select a date, or apply to see emitted events.

Markup

<bk-custom-calendar
  [(ngModel)]="value"
  [dualCalendar]="true"
  [singleDatePicker]="false"
  [enableTimepicker]="false"
  [autoApply]="false"
  [showCancelApply]="true"
  [showRanges]="true"
  placeholder="Select a date range"
  [appendToBody]="true"
  [opens]="'left'"
  [drop]="'down'">
</bk-custom-calendar>

API reference

Inputs and outputs available on <bk-custom-calendar>.

Inputs

Name	Type	Default	Description
`singleDatePicker`	`boolean`	`false`	Select one date instead of a range.
`dualCalendar`	`boolean`	`false`	Display two calendar months side by side.
`multiDateSelection`	`boolean`	`false`	Allow multiple individual dates to be selected.
`enableTimepicker`	`boolean`	`false`	Add time controls to the calendar.
`timeFormat`	`12 \| 24`	`12`	Choose 12-hour or 24-hour time display.
`enableSeconds`	`boolean`	`false`	Include seconds in time selection.
`clearableTime`	`boolean`	`false`	Allow the selected time to be cleared.
`autoApply`	`boolean`	`false`	Commit a complete selection without an Apply action.
`closeOnAutoApply`	`boolean`	`false`	Close the popup after an automatic commit.
`showCancelApply`	`boolean`	`true`	Show the footer containing Cancel and Apply actions.
`showCancel`	`boolean`	`true`	Show the Cancel action in the footer.
`showRanges`	`boolean`	`true`	Display predefined range shortcuts.
`customRanges`	`Record<string, CalendarRange>`	`undefined`	Provide named custom date ranges.
`rangeOrder`	`string[]`	`[]`	Control the display order of range shortcuts.
`minDate`	`Date`	`undefined`	Earliest selectable date.
`maxDate`	`Date`	`undefined`	Latest selectable date.
`displayFormat`	`string`	`'MM/DD/YYYY'`	Format used in the calendar input.
`placeholder`	`string`	`'Select date range'`	Input placeholder text.
`inline`	`boolean`	`false`	Always display the calendar without an input popup.
`compact`	`boolean`	`false`	Use the smaller calendar layout (popup only). Does not affect the trigger input, see chartInput.
`chartInput`	`boolean`	`false`	Shrink the trigger input to roughly `bk-time-picker`'s compact height and style it to match the chart-filter controls (`bk-slicer`, the matrix chart's page-size select), for use inline in a chart toolbar/slicer bar. Also compacts the popup (same effect as compact). compact alone still only shrinks the popup.
`accentColor`	`string`	`'#4f46e5'`	Accent color for chartInput's has-value/selected-day/today-day styling. No effect unless chartInput is also true.
`selectedTextColor`	`string`	`'#000000'`	Text color for chartInput's has-value trigger text and the popup's selected-day cell. Separate from accentColor since not every accent has enough contrast with black text. No effect unless chartInput is also true.
`opens`	`'left' \| 'right' \| 'center'`	`'left'`	Horizontal direction of the popup.
`drop`	`'up' \| 'down'`	`'down'`	Preferred vertical popup direction.
`autoPosition`	`boolean`	`false`	Flip the popup to remain inside the viewport.
`appendToBody`	`boolean`	`false`	Move the open popup to the document body to escape clipping.
`weekDayLabels`	`string[]`	`['Mon', … 'Sun']`	Override weekday column labels.
`required`	`boolean`	`false`	Mark the form control as required.
`hasError`	`boolean`	`false`	Apply the error state to the input.
`errorMessage`	`string`	`''`	Error message associated with the calendar.
`isDisplayCrossIcon`	`boolean`	`true`	Show the clear-selection icon.

Outputs

Name	Event type	Description
`selected`	`EventEmitter<CalendarSelection>`	Emits when a date or range is committed.
`opened`	`EventEmitter<void>`	Emits after the calendar popup opens.
`closed`	`EventEmitter<void>`	Emits after the calendar popup closes.