Easily create nice looking calendar.
You can build your calendar manually using server-side rendering with the following classes, or use our web components that have been built from scratch with the <uk-calendar> markup.
Use the following classes to create your calendar:
| Class | Description |
|---|---|
uk-cal | The calendar wrapper |
uk-cal-oom | For dates that are out-of-month |
uk-active | To show the active date |
uk-disabled | To disable a date (add disabled attribute to the button for full disablement) |
uk-cal-marked | To add an indicator for “marked dates” (dates with events) |
uk-cal-divider | To add a divider between calendar weeks. |
Alternatively, you can use our web components with the <uk-calendar> markup.
To automatically set today’s date as the active date in the calendar, use the today attribute. This will highlight the current day in the calendar, making it easy for users to quickly identify the current date.
By default, this attribute is set to false, meaning today’s date will not be automatically highlighted.
To allow month and year selection, use the jumpable attribute. This will enable a dropdown menu for selecting the month and a text input field for entering the year, allowing users to quickly “jump” to a specific date.
By default, this attribute is set to false, meaning the calendar will not provide month and year selection options.
To customize the starting day of the week in the calendar, use the starts-with attribute. This allows you to specify whether the week should start on Sunday (0) or Monday (1). By default, the week starts on Sunday (0).
To disable specific dates in the calendar, use the disabled-dates attribute. This attribute accepts a comma-separated list of dates. Please note that dates must be in the format YYYY-MM-DD (e.g. 2022-07-25). Dates that do not follow this format will be ignored and a console error will be thrown. The calendar will still render, but the invalid dates will not be disabled.
To add an indicator to specific dates in the calendar, use the marked-dates attribute. This attribute accepts a comma-separated list of dates. Please note that dates must be in the format YYYY-MM-DD (e.g. 2022-07-25). Dates that do not follow this format will be ignored and a console error will be thrown. The calendar will still render, but the invalid dates will not be marked.
To customize the initial view date of the calendar, use the view-date attribute. By default, the calendar will display the current date. To set a custom view date, provide a date in the format YYYY-MM-DD (e.g. 2023-06-30). This will cause the calendar to display the specified month and year.
To set the minimum and maximum date that can be selected in the calendar, use the min and max attributes. These attributes accept dates in the format YYYY-MM-DD (e.g. 2022-07-25).
To set the current value of the calendar, use the value attribute. This attribute accepts a date in the format YYYY-MM-DD (e.g. 2020-05-06). Please note that this attribute takes precedence over view-date and today, so setting value will override any settings made with those attributes.
There are several ways to capture values from the <uk-calendar> component. The simplest approach is to add a name attribute to the component. When you do this, a hidden input field with the specified name will be automatically generated, allowing you to easily capture the selected value on your server.
This is useful when you need to include the calendar component in a form and capture the selected date as part of the form submission.
The Calendar component supports internationalization through multiple methods with the following priority order (highest to lowest):
i18n attribute or script tag)<script id="uk-i18n">)Place this in your document <head> or before any components:
| Key | Default | Description |
|---|---|---|
prev-month | Previous month | Aria-label for the previous month navigation button |
next-month | Next month | Aria-label for the next month navigation button |
prev-year | Previous year | Aria-label for the previous year navigation button |
next-year | Next year | Aria-label for the next year navigation button |
select-month | Select month | Aria-label for the month dropdown selector |
select-year | Select year | Aria-label for the year input field |
The Calendar component supports custom CSS classes through the cls attribute. This allows you to style specific elements within the calendar without modifying the component’s internal structure.
Apply a class to the default element (host-inner):
Target specific elements within the calendar:
| Target | Description |
|---|---|
host-inner | The main calendar wrapper element |
header | The calendar header containing navigation and title |
previous-button | Previous month/year navigation button |
next-button | Next month/year navigation button |
title | The calendar title (month and year display) |
jumper | The jumper container (when jumpable is enabled) |
month-select | Month dropdown selector (when jumpable is enabled) |
year-input | Year input field (when jumpable is enabled) |
grid | The calendar grid table element |
weekdays | The weekdays header row |
weekday | Individual weekday header cell |
week | Individual week row |
day | Individual day cell |
day-button | Day button element |
jumper-month | Month jumper wrapper |
jumper-year | Year jumper wrapper |
jumper-button | Jumper navigation buttons |
day-outside-month | Class for days outside current month |
day-selected | Class for the selected day cell |
day-today | Class for today’s day cell |
day-marked | Class for marked day cells |
button-outside-month | Class for day buttons outside current month |
button-selected | Class for the selected day button |
button-today | Class for today’s day button |
button-marked | Class for marked day buttons |
The Calendar component supports custom inline styles through the stl attribute. This allows you to apply specific CSS styles to individual elements within the calendar.
Apply styles to the default element (host-inner):
Target specific elements with custom styles:
The stl attribute supports the same targets as the cls attribute. See the Available cls targets table above for a complete list of targetable elements.
The Calendar component allows you to customize navigation icons through the template system:
| Key | Description |
|---|---|
chevron-left | Left navigation arrow icon |
chevron-right | Right navigation arrow icon |
The following attributes are available for this component:
| Name | Type | Default | Description |
|---|---|---|---|
today | Boolean | false | Automatically sets today as the active date. |
jumpable | Boolean | false | Enables month dropdown and year input for quick date navigation. |
starts-with | Number | 0 (Sunday) | Sets the starting day of the week. 0 for Sunday, 1 for Monday. |
disabled-dates | String | Comma-separated list of dates to disable. Dates must be in format YYYY-MM-DD. | |
marked-dates | String | Comma-separated list of dates to mark with indicator. Dates must be in format YYYY-MM-DD. | |
view-date | String | Current date | Sets the initial view date of the calendar. Must be in format YYYY-MM-DD. |
min | String | Sets the minimum selectable date (inclusive). Must be in format YYYY-MM-DD. | |
max | String | Sets the maximum selectable date (exclusive). Must be in format YYYY-MM-DD. | |
value | String | Sets the selected date value. Must be in format YYYY-MM-DD. Takes precedence over today. | |
weekday-format | String | short | Format for weekday labels: long, short, or narrow. |
lang | String | en-us | Locale string for date formatting (e.g., “en-US”, “fr-FR”, “de-DE”). |
name | String | Name attribute for the hidden input field, enabling form submission. | |
disabled | Boolean | false | Disables the entire calendar, preventing user interaction. |
required | Boolean | false | Marks the calendar as required for form validation. |
placeholder | String | Placeholder text (used in parent components like input-date). | |
cls | String | Custom CSS classes. Can be a simple string or JSON object for targeting specific elements. | |
stl | String | Custom inline styles. Can be a simple string or JSON object for targeting specific elements. | |
i18n | String | Internationalization strings as JSON object or via configuration script. | |
force-prevent-rerender | Boolean | false | Prevents component rerendering (useful for HTMX or SPA scenarios). |
The Calendar component triggers the following event:
| Name | Description |
|---|---|
uk-calendar:change | Fired when the selected date changes. Event detail contains {value: string}. |