Calender

Single Date

Empty State

<x-calendar data-icon="o-calendar" placeholder="Select Date"></x-calendar>

Pre-filled State

<x-calendar data-icon="o-calendar" selected-value="2024-09-09" placeholder="Select Date"></x-calendar>

Disabled Dates

<x-calendar data-icon="o-calendar" disabled-dates='["2024-10-09", "2024-10-08"]' placeholder="Select Date"></x-calendar>

Date Range

Empty State

<x-calendar data-icon="o-calendar" type="range" months-to-show="2" placeholder="Start Date - End Date"></x-calendar>

Pre-filled State

<x-calendar data-icon="o-calendar" selected-value="2024-09-09 to 2024-10-09" type="range" months-to-show="2" placeholder="Start Date - End Date"></x-calendar>

Date Style

Default

<x-calendar data-icon="o-calendar" placeholder="Select Date"></x-calendar>

Rounded

<x-calendar data-icon="o-calendar" placeholder="Select Date"></x-calendar>

The x-calendar component is a custom element for handling calendar inputs with a variety of configurable options. Below are the available attributes and their descriptions.

Attributes

Attribute	Type	Default	Description
name	string	""	Specifies the name for the calendar input. Useful for form submissions.
height	string	""	Defines the height of the calendar component.
disabled	boolean	false	Disables the calendar input if set.
fixed-dropdown	boolean	false	When true dropdown will be fixed on the screen
data-icon	string	undefined	Adds an icon to the calendar component. Specify the icon name.
show-indicator	boolean	"false"	Determines if an indicator should be shown. Set to "true" to display.
id	string	""	Unique identifier for the calendar component.
placeholder	string	""	Placeholder text for the calendar input field.
required	boolean	"false"	Marks the input as required. Set to "true" to enable.
dropdown-width	string	"max-content"	Sets the width of the dropdown calendar.
class	string	""	CSS classes to be applied to the calendar component.
selected-value	string	""	The initially selected item, e.g 2020-09-10.
type	string	"single"	Defines the selection type. Options: "single" or "range".
months-to-show	number	2	Number of months to display in the calendar view.
date-style	string	""	Additional styling for the date cells. "rounded" or ""
disabled-dates	array	[]	Dates to be disabled, specified in JSON format.