README.md

omni-calendar

Calendar component to set specific date.

Example

<omni-calendar
  value="2023-02-23"
  min-date="2023-02-07"
  max-date="2023-02-25"
  locale="en-US">
</omni-calendar>

Properties

Property	Attribute	Modifiers	Type	Default	Description
dir			string
lang			string
locale	locale		string	"defaultLocale"	The locale used for formatting the output of the Calendar.
maxDate	max-date		string | undefined		The maximum date inclusively allowed to be selected.
minDate	min-date		string | undefined		The minimum date inclusively allowed to be selected.
styles		readonly	CSSResultGroup[]
value	value		string | undefined		The value of the Calendar component

Events

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

Slots

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

CSS Custom Properties

Property	Description
--omni-calendar-border-radius	Calendar container border radius.
--omni-calendar-box-shadow	Calendar container box shadow.
--omni-calendar-control-color	Calendar control bar control color.
--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-control-label-width	Calender month/year display width.
--omni-calendar-control-width	Calendar control bar control width.
--omni-calendar-controls-background-color	Calendar control bar background color.
--omni-calendar-controls-border-bottom	Calendar control bar border bottom.
--omni-calendar-controls-min-height	Calendar control bar minimum height.
--omni-calendar-controls-padding	Calendar control bar padding.
--omni-calendar-day-button-color	Calendar day button color.
--omni-calendar-day-button-excluded-font-color	Calendar day button excluded color.
--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-height	Calendar day button height.
--omni-calendar-day-button-hover-background-color	Calendar day button hover background color.
--omni-calendar-day-button-line-height	Calendar day button line height.
--omni-calendar-day-button-width	Calendar day button width.
--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-height	Calendar day button current height.
--omni-calendar-day-current-button-width	Calendar day button current width.
--omni-calendar-day-grid-auto-rows	Calendar day grid auto rows.
--omni-calendar-day-grid-background-color	Calendar day grid background color.
--omni-calendar-day-grid-line-height	Calendar day grid line height.
--omni-calendar-day-grid-padding	Calendar day grid padding.
--omni-calendar-day-grid-template-columns	Calendar day grid template columns.
--omni-calendar-day-name-font-color	Calendar day name font color.
--omni-calendar-day-name-font-size	Calendar day name font size.
--omni-calendar-day-name-font-weight	Calendar day name font weight.
--omni-calendar-day-name-height	Calendar day name height.
--omni-calendar-day-name-width	Calendar day name width.
--omni-calendar-day-selected-button-background-color	Calendar day button selected background color.
--omni-calendar-day-selected-button-border-radius	Calendar day button selected border radius.
--omni-calendar-day-selected-button-color	Calendar day button selected color.
--omni-calendar-day-selected-button-height	Calendar day button selected height.
--omni-calendar-day-selected-button-width	Calendar day button selected width.
--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-radius	Calendar month button border radius.
--omni-calendar-month-button-border-width	Calendar month button border width.
--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-hover-background-color	Calendar month button hover background color.
--omni-calendar-month-button-line-height	Calendar month button line height.
--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-padding	Calendar month button padding.
--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-radius	Calendar month selected border radius.
--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-grid-auto-rows	Calendar month grid auto rows.
--omni-calendar-month-grid-template-columns	Calendar month grid template columns.
--omni-calendar-months-grid-background-color	Calendar month grid background color.
--omni-calendar-months-grid-padding	Calendar month grid 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-radius	Calendar year button border radius.
--omni-calendar-year-button-border-width	Calendar year button border width.
--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-hover-background-color	Calendar year button hover background color.
--omni-calendar-year-button-line-height	Calendar year button line height.
--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-padding	Calendar year button padding.
--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-radius	Calendar selected year button border radius.
--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-grid-auto-rows	Calendar year grid auto rows.
--omni-calendar-year-grid-background-color	Calendar year grid background color.
--omni-calendar-year-grid-padding	Calendar year grid padding.
--omni-calendar-year-grid-template-columns	Calendar year grid template columns.
--omni-calendar-z-index	Calendar container z-index.
--omni-theme-accent-active-color	Theme accent active color.
--omni-theme-accent-color	Theme accent color.
--omni-theme-accent-hover-color	Theme accent hover color.
--omni-theme-background-active-color	Theme background active color.
--omni-theme-background-color	Theme background color.
--omni-theme-background-hover-color	Theme background hover color.
--omni-theme-border-radius	Theme border radius.
--omni-theme-border-width	Theme border width.
--omni-theme-box-shadow	Theme box shadow.
--omni-theme-box-shadow-color	Theme inactive color.
--omni-theme-disabled-background-color	Theme disabled background color.
--omni-theme-disabled-border-color	Theme disabled border color.
--omni-theme-error-border-color	Theme error border color.
--omni-theme-error-font-color	Theme disabled background color.
--omni-theme-font-color	Theme font color.
--omni-theme-font-family	Theme font family.
--omni-theme-font-size	Theme font size.
--omni-theme-font-weight	Theme font weight.
--omni-theme-hint-font-color	Theme hint font color.
--omni-theme-inactive-color	Theme inactive color.
--omni-theme-primary-active-color	Theme primary active color.
--omni-theme-primary-color	Theme primary color.
--omni-theme-primary-hover-color	Theme primary hover color.