Calendar

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

Source Tailwind CSS JavaScript

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 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>
}

Range

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, 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"`

Menu

Getting Started

Components

Calendar

Installation

Examples

API Reference

Calendar