MonthSelector

Just a month selector

Example

Props

🕹️ standard props
selectedMonth
number | undefined
The currently selected month (0-11).
undefined
locale
Locale
The locale for month names (default is 'it').
'it'
class
{ buttons?: string, container?: string, }
Custom CSS class for the buttons and container.
undefined
🎨 style props
--month-selector-height
size
The height of the month selector.
100%
--month-selector-width
size
The width of the month selector.
100%

Slots

selectorSnippet

A snippet for rendering the selector button for each month.

Default content:

<Button
  --button-background-color={monthIndex == selectedMonth ? "rgb(var(--global-color-primary-500))" : "trasparent"}
  --button-hover-background-color={monthIndex == selectedMonth ? "var(--button-background-color)" : "rgb(var(--global-color-primary-500), .2)"}
  --button-color={monthIndex == selectedMonth ?  "rgb(var(--global-color-grey-50))" : undefined}
  --button-font-weight="500"
  class={clazz.buttons}
  buttonType="text"
  onclick={() => handleMonthClick(monthIndex)}
>
  {#if labelSnippet}
    {@render labelSnippet({ month: monthIndex, monthName: getMonthName(monthIndex, locale) })}
  {:else}
    {getMonthName(monthIndex, locale)}
  {/if}
</Button>

Available variables:

Name	Type	Description
month	number	The month index (0-11).
monthName	string	The localized name of the month.

labelSnippet

A snippet for rendering a label for each month.

Default content:

{getMonthName(monthIndex, locale)}
    

Available variables:

Name	Type	Description
month	number	The month index (0-11).
monthName	string	The localized name of the month.

Events

onclick

Triggered when a month is clicked.

Attribute	Type	Description
monthIndex	number	The index of the clicked month (0-11).