Table of Contents
A month-grid calendar widget for selecting a single date. The value is an ISO YYYY-MM-DD string. Use the month and year dropdowns in the header to jump around quickly.
<k-calendar></k-calendar>
Set an initial date with the value attribute. The calendar opens on that month.
<k-calendar value="2026-07-04"></k-calendar>
Set mode="range" to enable range selection. The first click sets the start date, the second sets the end. Hovering after the start shows a preview range. Clicking again starts a new range.
<k-calendar mode="range"></k-calendar>
In range mode the value is two ISO dates separated by a comma. Both bounds are included in the range.
<k-calendar mode="range" value="2026-04-10,2026-04-20"></k-calendar>
Constrain the selectable range with the min and max attributes. Both accept an ISO date (YYYY-MM-DD) or one of the keywords today, tomorrow, yesterday. When omitted, min defaults to 1900-01-01 and max defaults to December 31st of the year 10 years from now. Dates outside the range are shown disabled, and the year dropdown is scoped to the available years.
<k-calendar value="2026-04-15" min="2026-04-05" max="2026-04-25"></k-calendar>
Appointment Scheduler (no past dates)
Use min="today" or min="tomorrow" to lock out past dates in scheduling flows.
<k-calendar min="tomorrow"></k-calendar>
Listen for the change event. The detail.value is the selected date (or comma-separated range).
<k-calendar id="jsCal"></k-calendar>
<p>Selected: <span id="jsCalOutput">(none)</span></p>
<script>
const $cal = document.getElementById('jsCal');
const $out = document.getElementById('jsCalOutput');
$cal.addEventListener('change', (e) => {
$out.textContent = e.detail.value || '(none)';
});
</script>
The calendar is form-associated. Set a name so it participates in form submission. In range mode the submitted value is the comma-separated pair.
<form id="calForm">
<label>Checkin / Checkout:</label>
<k-calendar name="stay" mode="range" value="2026-05-01,2026-05-07"></k-calendar>
<button type="submit">Submit</button>
</form>
<p>Form Data: <span id="calFormOutput"></span></p>
<script>
document.getElementById('calForm').addEventListener('submit', (e) => {
e.preventDefault();
const fd = new FormData(e.target);
const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
document.getElementById('calFormOutput').textContent = entries.join(', ');
});
</script>
The disabled attribute prevents user interaction.
<k-calendar disabled value="2026-04-15"></k-calendar>
new Calendar()
value: String
In single mode, the selected date as YYYY-MM-DD. In range mode, two comma-separated ISO dates (e.g. "2026-05-01,2026-05-07"). Empty string when no selection. Syncs to value attribute.
name: String
The form field name. When set inside a <form>, the component participates in form submission. Syncs to name attribute.
mode: String
Either "single" (default) or "range". Controls how clicks build the value. Syncs to mode attribute.
min: String
Lower bound (inclusive) as YYYY-MM-DD or the keyword today, tomorrow, or yesterday. Dates before this are disabled and removed from the year dropdown. Default is "1900-01-01". Syncs to min attribute.
max: String
Upper bound (inclusive) as YYYY-MM-DD or the keyword today, tomorrow, or yesterday. Dates after this are disabled. Defaults to December 31st of the year 10 years from now. Syncs to max attribute.
disabled: Boolean
When true, the calendar cannot be changed by user interaction. Syncs to disabled attribute.
required: Boolean
When true and no date is set, the element reports a valueMissing validity error for form validation. Syncs to required attribute.
prevMonth(): void
Navigates the view to the previous month.
nextMonth(): void
Navigates the view to the next month.
goToMonth(year, month): void
Navigates the view to the given year and zero-based month (e.g. goToMonth(2026, 0) for January 2026).
goToToday(): void
Navigates the view back to the current month.
| Variable | Default | Description |
|---|
--day_size | 2rem | Width/height of each day cell |
--day_radius | var(--radius) | Border radius of day cells |
--day_bg__selected | var(--c_primary) | Background color of the selected day (or range endpoints) |
--day_tc__selected | white | Text color of the selected day |
--day_bg__range | var(--c_bg__alt) | Background color of days inside a range |
--day_bg__hover | var(--c_bg__alt) | Background color of days on hover |
change
Fired when the selected date (or range) changes. The event detail contains { value: String } — an ISO date for single mode, a comma-separated pair for range mode, or an empty string when cleared.
Kempo UI