camper/web/templates/admin/season/calendar.gohtml

<article class="season-calendar" data-hx-target="this" data-hx-swap="outerHTML">
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.Calendar*/ -}}
    <header>
        <h3>{{ .Year }}</h3>
        <button type="button"
                data-hx-get="/admin/seasons/range?year={{ dec .Year }}"><span class="sr-only">{{ pgettext "Prev" "navigation" }}</span></button>
        <button type="button"
                data-hx-get="/admin/seasons/range?year={{ inc .Year }}"><span class="sr-only">{{ pgettext "Next" "navigation" }}</span></button>
    </header>
    <div>
        {{ range .Months -}}
            <table class="month">
                <caption>{{ pgettext .Name "month" }}</caption>
                <thead>
                <tr>
                    <th scope="col">{{(pgettext "Mon" "day" )}}</th>
                    <th scope="col">{{(pgettext "Tue" "day" )}}</th>
                    <th scope="col">{{(pgettext "Wed" "day" )}}</th>
                    <th scope="col">{{(pgettext "Thu" "day" )}}</th>
                    <th scope="col">{{(pgettext "Fri" "day" )}}</th>
                    <th scope="col">{{(pgettext "Sat" "day" )}}</th>
                    <th scope="col">{{(pgettext "Sun" "day" )}}</th>
                </tr>
                </thead>
                <tbody>
                {{ range .Weeks }}
                    <tr>
                        {{- range . }}
                            <td>
                                {{- if .Color -}}
                                    <time style="background-color: {{ .Color }}"
                                          datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2" }}</time>
                                {{- end -}}
                            </td>
                        {{- end }}
                    </tr>
                {{- end }}
                </tbody>
            </table>
        {{- end }}
        {{ with .Form }}
            <dialog>
                <form data-hx-put="/admin/seasons/range">
                    {{ CSRFInput }}
                    <input type="hidden" name="year" value="{{ $.Year }}">
                    {{ with .StartDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
                    {{ with .EndDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
                    <footer>
                        <button type="submit"><span class="sr-only">{{( pgettext "Cancel" "action" )}}</span></button>
                        {{ range .Seasons -}}
                            <button type="submit" name="season_id" value="{{ .ID }}">
                                <svg width="20px" height="20px">
                                    <circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000"
                                            stroke-width=".5"/>
                                </svg>
                                {{ .Name }}
                            </button>
                        {{- end }}
                    </footer>
                </form>
            </dialog>
        {{ end }}
    </div>
    <script type="module">
        import {setupCalendar} from "/static/camper.js";

        setupCalendar(document.querySelector('.season-calendar'))
    </script>
</article>