menu
0.11.5
Calendar
Calendar component to set specific date.
Module
import '@capitec/omni-components/calendar';
content_copy 
import { OmniCalendar } from "@capitec/omni-components-react/calendar";
content_copy
Source
Packages
Interactive
Value
Locale
Min Date
Max Date
Interactive Value Locale Min Date Max Date

Properties

Name Attribute Type Description
locale locale  
string
 The locale used for formatting the output of the Calendar.
minDate min-date  
string | undefined
 The minimum date inclusively allowed to be selected.
maxDate max-date  
string | undefined
 The maximum date inclusively allowed to be selected.
value value  
string | undefined
 The value of the Calendar component
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Events

Name Type Description
change 
CustomEvent<{}>
 Dispatched when a date is selected.

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
left-control
 Replaces the icon for the left control button. 
right-control
 Replaces the icon for the right control button.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-calendar-box-shadow
 Calendar container box shadow. 
--omni-calendar-border-radius
 Calendar container border radius. 
--omni-calendar-z-index
 Calendar container z-index. 
--omni-calendar-controls-padding
 Calendar control bar padding. 
--omni-calendar-controls-border-bottom
 Calendar control bar border bottom. 
--omni-calendar-controls-background-color
 Calendar control bar background color. 
--omni-calendar-controls-min-height
 Calendar control bar minimum height. 
--omni-calendar-control-color
 Calendar control bar control color. 
--omni-calendar-control-width
 Calendar control bar control width. 
--omni-calendar-control-label-width
 Calender month/year display width. 
--omni-calendar-control-label-color
 Calendar month/year display color. 
--omni-calendar-control-label-font-size
 Calendar month/year display font size. 
--omni-calendar-control-label-font-weight
 Calendar month/year display font weight. 
--omni-calendar-control-label-hover-background-color
 Calendar month/year display background color. 
--omni-calendar-day-grid-template-columns
 Calendar day grid template columns. 
--omni-calendar-day-grid-auto-rows
 Calendar day grid auto rows. 
--omni-calendar-day-grid-padding
 Calendar day grid padding. 
--omni-calendar-day-grid-line-height
 Calendar day grid line height. 
--omni-calendar-day-grid-background-color
 Calendar day grid background color. 
--omni-calendar-month-grid-template-columns
 Calendar month grid template columns. 
--omni-calendar-month-grid-auto-rows
 Calendar month grid auto rows. 
--omni-calendar-months-grid-padding
 Calendar month grid padding. 
--omni-calendar-months-grid-background-color
 Calendar month grid background color. 
--omni-calendar-year-grid-template-columns
 Calendar year grid template columns. 
--omni-calendar-year-grid-auto-rows
 Calendar year grid auto rows. 
--omni-calendar-year-grid-padding
 Calendar year grid padding. 
--omni-calendar-year-grid-background-color
 Calendar year grid background color. 
--omni-calendar-month-button-padding
 Calendar month button padding. 
--omni-calendar-month-button-background-color
 Calendar month button background color. 
--omni-calendar-month-button-border-color
 Calendar month button border color. 
--omni-calendar-month-button-border-width
 Calendar month button border width. 
--omni-calendar-month-button-border-radius
 Calendar month button border radius. 
--omni-calendar-month-button-margin-left
 Calendar month button margin left. 
--omni-calendar-month-button-margin-right
 Calendar month button margin right. 
--omni-calendar-month-button-color
 Calendar month button color 
--omni-calendar-month-button-font-family
 Calendar month button font family. 
--omni-calendar-month-button-font-size
 Calendar month button font size. 
--omni-calendar-month-button-font-weight
 Calendar month button font weight. 
--omni-calendar-month-button-line-height
 Calendar month button line height. 
--omni-calendar-month-button-selected-border-radius
 Calendar month selected border radius. 
--omni-calendar-month-button-selected-background-color
 Calendar month button selected background color. 
--omni-calendar-month-button-selected-border-color
 Calendar month button selected border color. 
--omni-calendar-month-button-selected-border-width
 Calendar month selected border width. 
--omni-calendar-month-button-selected-color
 Calendar month selected color. 
--omni-calendar-month-button-hover-background-color
 Calendar month button hover background color. 
--omni-calendar-year-button-padding
 Calendar year button padding. 
--omni-calendar-year-button-background-color
 Calendar year button background color. 
--omni-calendar-year-button-border-color
 Calendar year button border color. 
--omni-calendar-year-button-border-width
 Calendar year button border width. 
--omni-calendar-year-button-border-radius
 Calendar year button border radius. 
--omni-calendar-year-button-margin-left
 Calendar year button margin left. 
--omni-calendar-year-button-margin-right
 Calendar year button margin right. 
--omni-calendar-year-button-color
 Calendar year button color. 
--omni-calendar-year-button-font-family
 Calendar year button font family. 
--omni-calendar-year-button-font-size
 Calendar year button font size. 
--omni-calendar-year-button-font-weight
 Calendar year button font weight. 
--omni-calendar-year-button-line-height
 Calendar year button line height. 
--omni-calendar-year-button-selected-border-radius
 Calendar selected year button border radius. 
--omni-calendar-year-button-selected-background-color
 Calendar selected year button background color. 
--omni-calendar-year-button-selected-border-color
 Calendar selected year button border color. 
--omni-calendar-year-button-selected-border-width
 Calendar selected year button border width. 
--omni-calendar-year-button-selected-color
 Calendar year button selected color. 
--omni-calendar-year-button-hover-background-color
 Calendar year button hover background color. 
--omni-calendar-day-name-font-color
 Calendar day name font color. 
--omni-calendar-day-name-font-weight
 Calendar day name font weight. 
--omni-calendar-day-name-font-size
 Calendar day name font size. 
--omni-calendar-day-name-width
 Calendar day name width. 
--omni-calendar-day-name-height
 Calendar day name height. 
--omni-calendar-day-button-width
 Calendar day button width. 
--omni-calendar-day-button-height
 Calendar day button height. 
--omni-calendar-day-button-font-size
 Calendar day button font size. 
--omni-calendar-day-button-font-weight
 Calendar day button font weight. 
--omni-calendar-day-button-line-height
 Calendar day button line height. 
--omni-calendar-day-button-color
 Calendar day button color. 
--omni-calendar-day-button-hover-background-color
 Calendar day button hover background color. 
--omni-calendar-day-button-excluded-font-color
 Calendar day button excluded color. 
--omni-calendar-day-current-button-border
 Calendar day button current border. 
--omni-calendar-day-current-button-border-radius
 Calendar day button current border radius. 
--omni-calendar-day-current-button-width
 Calendar day button current width. 
--omni-calendar-day-current-button-height
 Calendar day button current height. 
--omni-calendar-day-selected-button-color
 Calendar day button selected color. 
--omni-calendar-day-selected-button-border-radius
 Calendar day button selected border radius. 
--omni-calendar-day-selected-button-background-color
 Calendar day button selected background color. 
--omni-calendar-day-selected-button-width
 Calendar day button selected width. 
--omni-calendar-day-selected-button-height
 Calendar day button selected height.