Calendar

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

Source Tailwind CSS JavaScript

package showcase

import (
	"github.com/templui/templui/internal/components/calendar"
	"github.com/templui/templui/internal/components/card"
)

templ CalendarDefault() {
	<div class="w-full max-w-sm">
		@card.Card() {
			@card.Content() {
				@calendar.Calendar()
			}
		}
	</div>
}

Installation

Install the component
```
templui add calendar
```
Add the JavaScript to your layout
```
@calendar.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

API Reference

Required parameter

Hover for description

Calendar

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.	`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`

Menu

Getting Started

Components

Calendar

Installation

API Reference

Calendar