Calendar

A date field component that allows users to enter and edit date.

Source Tailwind CSS JavaScript

Installation

templui add calendar

Load the script once in your layout:

<head> @calendar.Script() </head>

Sizes

Range

Required parameter

Hover for description

Calendar component for date selection with internationalization support.

Name	Type	Default
`ID` Unique identifier for the calendar element.	`string`	-
`Class` Additional CSS classes to apply to the calendar, e.g. `[--cell-size:2.5rem]` to override the cell size.	`string`	-
`LocaleTag` Locale tag for internationalization. Options: 'en-US', 'zh-CN', 'fr-FR', 'de-DE', 'it-IT', 'ja-JP', 'pt-PT', 'es-ES'.	`LocaleTag`	`en-US`
`Value` Selected date value. Pointer to time.Time for optional selection.	`*time.Time`	`nil`
`Name` Name attribute for the hidden input field.	`string`	-
`InitialMonth` Initial month to display (0-11). Defaults to current month or Value's month.	`int`	-
`InitialYear` Initial year to display. Defaults to current year or Value's year.	`int`	-
`StartOfWeek` Optional start of week (0-6, Sun-Sat). When nil, defaults to Monday (1). Use calendar.Sunday through calendar.Saturday constants.	`*Day`	`nil`
`Mode` Selection mode. Use SelectionModeRange for two-date range selection (start and end).	`SelectionMode`	`single`
`EndValue` Range end date (range mode only).	`*time.Time`	`nil`
`EndName` Name attribute for the range end hidden input (range mode only).	`string`	`Name + "-end"`