121 lines
3.5 KiB
Text
121 lines
3.5 KiB
Text
// templui component calendar - version: v0.84.0 installed by templui v0.84.0
|
|
package calendar
|
|
|
|
import (
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/components/icon"
|
|
"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
|
|
"strconv"
|
|
"time"
|
|
)
|
|
|
|
type LocaleTag string
|
|
|
|
var (
|
|
LocaleDefaultTag = LocaleTag("en-US")
|
|
LocaleTagChinese = LocaleTag("zh-CN")
|
|
LocaleTagFrench = LocaleTag("fr-FR")
|
|
LocaleTagGerman = LocaleTag("de-DE")
|
|
LocaleTagItalian = LocaleTag("it-IT")
|
|
LocaleTagJapanese = LocaleTag("ja-JP")
|
|
LocaleTagPortuguese = LocaleTag("pt-PT")
|
|
LocaleTagSpanish = LocaleTag("es-ES")
|
|
)
|
|
|
|
type Props struct {
|
|
ID string
|
|
Class string
|
|
LocaleTag LocaleTag
|
|
Value *time.Time
|
|
Name string
|
|
InitialMonth int // Optional: 0-11 (Default: current or from Value). Controls the initially displayed month view.
|
|
InitialYear int // Optional: (Default: current or from Value). Controls the initially displayed year view.
|
|
}
|
|
|
|
templ Calendar(props ...Props) {
|
|
{{
|
|
var p Props
|
|
if len(props) > 0 {
|
|
p = props[0]
|
|
}
|
|
if p.ID == "" {
|
|
p.ID = utils.RandomID() + "-calendar"
|
|
}
|
|
if p.Name == "" {
|
|
// Should be provided by parent (e.g., DatePicker or in standalone usage)
|
|
p.Name = p.ID + "-value" // Fallback name
|
|
}
|
|
if p.LocaleTag == "" {
|
|
p.LocaleTag = LocaleDefaultTag
|
|
}
|
|
|
|
initialView := time.Now()
|
|
if p.Value != nil {
|
|
initialView = *p.Value
|
|
}
|
|
|
|
initialMonth := p.InitialMonth
|
|
initialYear := p.InitialYear
|
|
|
|
// Use year from initialView if InitialYear prop is invalid/unset (<= 0)
|
|
if initialYear <= 0 {
|
|
initialYear = initialView.Year()
|
|
}
|
|
|
|
// Use month from initialView if InitialMonth prop is invalid OR
|
|
// if InitialMonth is default 0 AND InitialYear was also defaulted (meaning neither was likely set explicitly)
|
|
if (initialMonth < 0 || initialMonth > 11) || (initialMonth == 0 && p.InitialYear <= 0) {
|
|
initialMonth = int(initialView.Month()) - 1 // time.Month is 1-12
|
|
}
|
|
|
|
initialSelectedISO := ""
|
|
if p.Value != nil {
|
|
initialSelectedISO = p.Value.Format("2006-01-02")
|
|
}
|
|
}}
|
|
<div class={ p.Class } id={ p.ID + "-wrapper" } data-calendar-wrapper="true">
|
|
<input
|
|
type="hidden"
|
|
name={ p.Name }
|
|
value={ initialSelectedISO }
|
|
id={ p.ID + "-hidden" }
|
|
data-calendar-hidden-input
|
|
/>
|
|
<div
|
|
id={ p.ID }
|
|
data-calendar-container="true"
|
|
data-locale-tag={ string(p.LocaleTag) }
|
|
data-initial-month={ strconv.Itoa(initialMonth) }
|
|
data-initial-year={ strconv.Itoa(initialYear) }
|
|
data-selected-date={ initialSelectedISO }
|
|
>
|
|
<!-- Calendar Header -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span data-calendar-month-display class="text-sm font-medium"></span>
|
|
<div class="flex gap-1">
|
|
<button
|
|
type="button"
|
|
data-calendar-prev
|
|
class="inline-flex items-center justify-center rounded-md text-sm font-medium h-7 w-7 hover:bg-accent hover:text-accent-foreground focus:outline-none disabled:opacity-50"
|
|
>
|
|
@icon.ChevronLeft()
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-calendar-next
|
|
class="inline-flex items-center justify-center rounded-md text-sm font-medium h-7 w-7 hover:bg-accent hover:text-accent-foreground focus:outline-none disabled:opacity-50"
|
|
>
|
|
@icon.ChevronRight()
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Weekday Headers -->
|
|
<div data-calendar-weekdays class="grid grid-cols-7 gap-1 mb-1 place-items-center"></div>
|
|
<!-- Calendar Day Grid -->
|
|
<div data-calendar-days class="grid grid-cols-7 gap-1 place-items-center"></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ Script() {
|
|
<script defer src="/assets/js/calendar.min.js"></script>
|
|
}
|