Calendar

Just a calendar.

Example

Props

🕹️ standard props
type
'singleDate' | 'dateRange'
Choose either a single date or a date range.
singleDate
selectedDate
Date
Currently selected date.
undefined
selectedDateTo
Date
The second currently selected date for date ranges.
undefined
visibleMonth
number
Currently visible month (0-11).
new Date().getMonth()
visibleYear
number
Currently visible year.
new Date().getFullYear()
locale
Locale
Locale used for day names.
"it"
showExtraMonthDays
boolean
Determines if days from adjacent months should be displayed.
true
showHeader
boolean
Controls visibility of the week header.
true
animationDuration
number
Duration of the calendar transition animation in milliseconds.
200
disabled
boolean
Disables interaction with the calendar.
false
class
{ container?: string, weekHeader?: string, day?: string }
CSS classes for various calendar elements.
{}
🎨 style props
--calendar-height
size
The height of the calendar.
100%
--calendar-width
size
The width of the calendar.
100%
--calendar-day-width
size
The width of each day in the calendar.
100%
--calendar-day-height
size
The height of each day in the calendar.
100%
--calendar-day-border-radius
size
The border radius of each day in the calendar.
0px
--calendar-day-hover-background-color
color
The background color of a day when hovered.
rgb(var(--global-color-primary-600), .3)
--calendar-selected-day-background-color
color
The background color of a selected day.
rgb(var(--global-color-primary-600))
--calendar-selected-day-color
color
The text color of a selected day.
rgb(var(--global-color-grey-50))
--calendar-selected-day-border-radius
size
The border radius of a selected day.
4px
--calendar-grid-gap
size
The gap between calendar grid cells.
0px
--calendar-today-background-color
color
The background color of the current day.
rgb(var(--global-color-error-200), .7)
--calendar-today-color
color
The text color of the current day.
rgb(var(--global-color-contrast-800))
--calendar-today-border-radius
color
The bored radius of the current day.
9999px
--calendar-today-height
color
The height of the current day.
30px
--calendar-today-width
color
The width of the current day.
30px
--calendar-between-range-background-color
color
The background color of the days between the selected range.
rgb(var(--global-color-primary-400), .4)
--calendar-between-range-color
color
The text color of the days between the selected range.
rgb(var(--global-color-contrast-800))
--calendar-range-start-border-radius
size
The border radius of the first day of the range.
4px 0px 0px 0px
--calendar-range-end-border-radius
size
The border radius of the last day of the range.
0px 0px 4px 0px

Slots

weekHeaderSnippet

Custom rendering for week headers.

Default content:

<div class="week-header-slot {clazz.weekHeader || ''}">{weekHeader}</div>

Available variables:

Name	Type	Description
header	string	The name of the week header.
index	number	The index of the week header.

daySnippet

Custom rendering for individual days.

Default content:

        <div class="day-slot {clazz.day || ''}" 
          class:extra-month={extraMonth} 
          class:selected 
          class:not-selected={!selected}
          onclick={() => handleDayClick(day, extraMonth)}
          onkeydown={() => handleDayClick(day, extraMonth)}
          role="presentation"
        >
          {day.dayOfMonth}
        </div>
      

Available variables:

Name	Type	Description
dayStat	DateStat	Details of the day's date.
extraMonth	boolean	Indicates if the day belongs to an adjacent month.
selected	boolean	Indicates if the day is currently selected.

Events

ondayClick

Triggered when a day in the calendar is clicked.

Attribute	Type	Description
dateStat	DateStat	Details of the clicked date.
selected	boolean	Indicates if the clicked date is selected.
extraMonth	boolean	Indicates if the clicked date is from an adjacent month.