Calendar
A date field component that allows users to enter and edit date.
package showcase
import (
"github.com/templui/templui/components/calendar"
"github.com/templui/templui/components/card"
)
templ CalendarDefault() {
<div>
@card.Card() {
@card.Content() {
@calendar.Calendar()
}
}
</div>
}
Installation
templui add calendarLoad the script once in your layout:
<head>
@calendar.Script()
</head>import "github.com/templui/templui/components/calendar"Load the script once in your layout:
<head>
@calendar.Script()
</head>Examples
Sizes
package showcase
import (
"github.com/templui/templui/components/calendar"
"github.com/templui/templui/components/card"
)
templ CalendarSizes() {
<div>
@card.Card() {
@card.Content() {
@calendar.Calendar(calendar.Props{
Class: "[--cell-size:2.5rem]",
})
}
}
</div>
}
API Reference
Calendar
Calendar component for date selection with internationalization support.
| Name | Type | Default |
|---|---|---|
Unique identifier for the calendar element. | | - |
Additional CSS classes to apply to the calendar, e.g. `[--cell-size:2.5rem]` to override the cell size. | | - |
Locale tag for internationalization. Options: 'en-US', 'zh-CN', 'fr-FR', 'de-DE', 'it-IT', 'ja-JP', 'pt-PT', 'es-ES'. | | |
Selected date value. Pointer to time.Time for optional selection. | | |
Name attribute for the hidden input field. | | - |
Initial month to display (0-11). Defaults to current month or Value's month. | | - |
Initial year to display. Defaults to current year or Value's year. | | - |
Optional start of week (0-6, Sun-Sat). When nil, defaults to Monday (1). Use calendar.Sunday through calendar.Saturday constants. | | |
