Calendar

To use the Calendar component, compose it with the provided children.

• CalendarNavigation - provides year/month dropdowns and forward/back controls for the visible month.
• CalendarWeekHeader - provides a header for CalendarGrid indicating the day of the week.
• CalendarGrid - provides a grid of buttons that represent the days from a calendar month.

Alternatively, you can compose it with your own calendar controls or add additional content.

Use the Calendar component when you need a versatile date selection tool that supports single, range, multiselect, or offset dates. This flexibility makes it ideal for financial applications, event scheduling, project timelines, and other scenarios where different date selection modes are necessary.

• For tasks other than selecting a date, such as picking a time or displaying event information.
• If the date or range is pre-determined and cannot be specified by the user. In such cases, consider showing date options in a dropdown instead.

To import Calendar from the Salt lab package, use:

To import CalendarNavigation from the Salt lab package, use:

To import CalendarWeekHeader from the Salt lab package, use:

To import CalendarGrid from the Salt lab package, use:

The default locale for Salt's date adapters is "enUS".

Calendar uses the locale of the configured date adapter provided by the nearest LocalizationProvider. Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

Refer to the documentation of the date library you are using for information on how to configure other locales.

Calendar accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".

To use the Calendar component, compose it with the provided children.

• CalendarNavigation - provides year/month dropdowns and forward/back controls for the visible month.
• CalendarWeekHeader - provides a header for CalendarGrid indicating the day of the week.
• CalendarGrid - provides a grid of buttons that represent the days from a calendar month.

Alternatively, you can compose it with your own calendar controls or add additional content.

Use the Calendar component when you need a versatile date selection tool that supports single, range, multiselect, or offset dates. This flexibility makes it ideal for financial applications, event scheduling, project timelines, and other scenarios where different date selection modes are necessary.

• For tasks other than selecting a date, such as picking a time or displaying event information.
• If the date or range is pre-determined and cannot be specified by the user. In such cases, consider showing date options in a dropdown instead.

To import Calendar from the Salt lab package, use:

To import CalendarNavigation from the Salt lab package, use:

To import CalendarWeekHeader from the Salt lab package, use:

To import CalendarGrid from the Salt lab package, use:

The default locale for Salt's date adapters is "enUS".

Calendar uses the locale of the configured date adapter provided by the nearest LocalizationProvider. Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

Refer to the documentation of the date library you are using for information on how to configure other locales.

Calendar accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".

To use the Calendar component, compose it with the provided children.

• CalendarNavigation - provides year/month dropdowns and forward/back controls for the visible month.
• CalendarWeekHeader - provides a header for CalendarGrid indicating the day of the week.
• CalendarGrid - provides a grid of buttons that represent the days from a calendar month.

Alternatively, you can compose it with your own calendar controls or add additional content.

Use the Calendar component when you need a versatile date selection tool that supports single, range, multiselect, or offset dates. This flexibility makes it ideal for financial applications, event scheduling, project timelines, and other scenarios where different date selection modes are necessary.

• For tasks other than selecting a date, such as picking a time or displaying event information.
• If the date or range is pre-determined and cannot be specified by the user. In such cases, consider showing date options in a dropdown instead.

To import Calendar from the Salt lab package, use:

To import CalendarNavigation from the Salt lab package, use:

To import CalendarWeekHeader from the Salt lab package, use:

To import CalendarGrid from the Salt lab package, use:

The default locale for Salt's date adapters is "enUS".

Calendar uses the locale of the configured date adapter provided by the nearest LocalizationProvider. Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

Refer to the documentation of the date library you are using for information on how to configure other locales.

Calendar accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".