Calendar

Calendars present single-date or range selection in a compact month view.

Single Date

Use single mode when the interface needs one chosen day with minimal extra UI.

Disabled Days

Disabled ranges are useful for unavailable dates.

Date Ranges

Range mode works well for reporting, booking, and filtering flows where a start and end date belong together.

Dropdown Captions

Dropdown month and year captions help when users need to move quickly across larger time spans.

Two-Month Display

months="2" shows two months side by side — useful for ranges and booking-style UIs.

Week Numbers

with-week-numbers adds an ISO 8601 week column.

View Stepper

Click the month/year title to step between day, month, and year views.

Days of Week

disabled-days-of-week takes space-separated weekday names (sun, mon, …).

API

Slots

Name	Description
previous-icon	—
next-icon	—
footer	—
day-YYYY-MM-DD	Custom content for a specific day cell

Attributes & Properties

Name	Description
bordered	When false, omits the outer frame — use inside popovers (e.g. pk-date-picker). Type boolean Default true
disabled	Type boolean Default false
disabledDatesRaw disabled-dates	Type string
disabledDaysOfWeek disabled-days-of-week	Type string
disableFuture disable-future	Type boolean Default false
disablePast disable-past	Type boolean Default false
firstDayOfWeek first-day-of-week	Type PkCalendarFirstDayOfWeek Default auto
focusedDate focused-date	Type string
locale	Type string
max	Type string
maxRange max-range	Type number Default 0
min	Type string
minRange min-range	Type number Default 0
mode	Type PkCalendarMode Default single
months	Type 1 | 2 Default 1
pageBy page-by	Type PkCalendarPageBy Default months
readonly	Type boolean Default false
size	Type PkCalendarSize Default default
today	Type string
value	Type string
view	Type PkCalendarView Default days
weekdayFormat weekday-format	Type 'narrow' | 'short' | 'long' Default narrow
withOutsideDays with-outside-days	Type boolean Default true
withWeekNumbers with-week-numbers	Type boolean Default false

Events

Name	Description
change	User commits a new value
input	Value changes during interaction
pk-focus-day	Focused day changed; detail.date
pk-view-change	View changed; detail.view, detail.date