Kern 0.12.0 GitHub
Date & time

<kern-calendar>

Month view for picking a date or a range, inline or inside a picker. Values are ISO dates (2026-10-19). Keyboard (one tab stop): arrows move by day/week, Home/End to the start/end of the week, Page Up/Down by month, with Shift by year, Enter or Space picks. In range mode the first pick sets start, the second end (swapped if earlier); the range is previewed on hover and focus until then, Escape discards it.

Examples

Pick a date

An inline month view; value is an ISO date and kernChange reports { value }. show-week-numbers adds ISO weeks (column header label-week), and the footer slot takes actions such as a “Today” button that uses goTo().

Today 

  

  
<kern-calendar label="Maintenance day" show-week-numbers>
  <kern-button slot="footer" size="sm" variant="ghost">Today</kern-button>
</kern-calendar>
<pre class="out" style="font:12px var(--font-mono);color:var(--text-muted)"></pre>
  
  
const cal = root.querySelector('kern-calendar');
const out = root.querySelector('.out');
const iso = (d) => new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10);
root.querySelector('kern-button').addEventListener('click', () => {
  cal.value = iso(new Date());
  cal.goTo(cal.value);
});
cal.addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + JSON.stringify(e.detail)));
  
  
  




  
Pick a range

  
With range the first pick sets start, the second end, and kernChange reports { start, end }. months="2" shows two months side by side; max-days locks days farther than that from start.

  




  

  
<kern-calendar range months="2" max-days="14" label="Evaluation period"></kern-calendar>
<pre class="out" style="font:12px var(--font-mono);color:var(--text-muted)"></pre>
  
  
const out = root.querySelector('.out');
root.querySelector('kern-calendar').addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + JSON.stringify(e.detail)));
  
  
  




  
Limits and disabled days

  
min and max bound the selectable dates; isDateDisabled is a property taking a function from ISO date to boolean, e.g. to block weekends. Here only workdays in the last three months can be picked.

  


  

  
<kern-calendar label="Report day"></kern-calendar>
  
  
const cal = root.querySelector('kern-calendar');
const iso = (d) => new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10);
const today = new Date();
cal.min = iso(new Date(today.getFullYear(), today.getMonth() - 3, today.getDate()));
cal.max = iso(today);
cal.isDateDisabled = (d) => [0, 6].includes(new Date(d + 'T00:00').getDay());
  
  
  



Properties

  
endmutable

  string | undefined
  
Range end (range mode).



  
firstDayOfWeekattribute first-day-of-week

  number | undefined
  
0 = Sunday … 6 = Saturday; defaults to the locale (Monday for de).



  
isDateDisabled

  ((iso: string) => boolean) | undefined
  
Additional rule for unselectable days, e.g. weekends.



  
labeldefault Calendar · de Kalender

  string | undefined
  
Accessible name of the calendar.



  
labelNextattribute label-next · default Next month · de Nächster Monat

  string | undefined
  


  
labelPrevattribute label-prev · default Previous month · de Vorheriger Monat

  string | undefined
  


  
labelWeekattribute label-week · default Wk · de KW

  string | undefined
  
Column header of the week numbers.



  
locale

  string | undefined
  
BCP 47 locale; defaults to <html lang>, then the browser language.



  
max

  string | undefined
  
Latest selectable date.



  
maxDaysattribute max-days

  number | undefined
  
Range mode: longest range in days (inclusive); farther days are locked once start is picked.



  
min

  string | undefined
  
Earliest selectable date.



  
monthsdefault 1

  1 | 2
  
Months shown side by side.



  
rangedefault false

  boolean
  
Pick a range (start/end) instead of a single value.



  
showWeekNumbersattribute show-week-numbers · default false

  boolean
  
ISO week numbers in front of each row.



  
startmutable

  string | undefined
  
Range start (range mode).



  
valuemutable

  string | undefined
  
Selected date (single mode).




Events

  
kernChange

  CustomEvent<{ start: string; end: string; } | { value: string; }>
  
A date was picked ({ value }), or a range completed ({ start, end }).



  
kernMonthChange

  CustomEvent<{ year: number; month: number; }>
  
The shown month changed (month 1–12).




Methods

  
goTo()

  goTo(iso: string) => Promise<void>
  
Show the month of an ISO date and move the tab stop there (does not select).



  
setFocus()

  setFocus() => Promise<void>
  
Focus the active day.




Slots

  
footer

  
  
Actions below the month, e.g. a „Heute“ button




CSS parts

  
day

  
  
Each day button