templ-calendar

Calendar components for a-h/templ. Copy the source into your project and bring your own Tailwind build.

Getting started

go run github.com/codypotter/templ-calendar/cmd/templ-calendar@latest add all ./components/calendar

templ generate

Demo

Click the violet event to see an HTMX interaction. Click "Lunch with design" or "Retro" to see Alpine popovers.

June 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
Team standup
6
7
8
9
10
Lunch with design
11
12
13
14
15
Sprint review
16
Sprint review
17
Sprint review
18
19
20
21
22
Retro
23
24
25
26
27
28
29
30

Calendar

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
Team standup
6
7
8
9
10
Lunch with design
11
12
13
14
15
Sprint review
16
Sprint review
17
Sprint review
18
19
20
21
22
Retro
23
24
25
26
27
28
29
30
@calendar.Calendar(calendar.Props{
    Year:        2026,
    Month:       time.June,
    Location:    time.Local,
    HideHeading: false,
    Events: []calendar.Event{
        {
            ID:    "1",
            Title: "Sprint review",
            Start: time.Date(2026, time.June, 15, 14, 0, 0, 0, time.Local),
            End:   time.Date(2026, time.June, 17, 15, 0, 0, 0, time.Local),
        },
    },
})

Navigator

June 2026 
@calendar.Navigator(calendar.NavigatorProps{
    Year:  2026,
    Month: time.June,
    PrevAttributes: templ.Attributes{
        "hx-get":    "/?year=2026&month=5",
        "hx-target": "#calendar-container",
        "hx-select": "#calendar-container",
        "hx-swap":   "outerHTML",
    },
    NextAttributes: templ.Attributes{
        "hx-get":    "/?year=2026&month=7",
        "hx-target": "#calendar-container",
        "hx-select": "#calendar-container",
        "hx-swap":   "outerHTML",
    },
})

Jumper

@calendar.Jumper(calendar.JumperProps{
    Year:  2026,
    Month: time.June,
    FormAttributes: templ.Attributes{
        "hx-get":     "/",
        "hx-target":  "#calendar-container",
        "hx-select":  "#calendar-container",
        "hx-swap":    "outerHTML",
        "hx-trigger": "change",
    },
})