hugo-theme/layouts/shortcodes/calendar.html

{{ $date:= .Get "date" }}
{{ if not $date }}
  {{ errorf "Error: 'date' is a required parameter." }}
{{ end }}
{{ $date := time.AsTime $date }}

{{ $month := $date.Month | int }}
{{ $year := $date.Year }}

{{ $t1 := printf "%4d-%02d-01" $year $month }}
{{ $t1 := time.AsTime $t1 }}
{{ $t2 := $t1.AddDate 0 1 0 }}

{{ $daysInMonth := $t2.Sub $t1 }}
{{ $daysInMonth := $daysInMonth.Hours }}
{{ $daysInMonth := div $daysInMonth 24 }}

{{ $padding := $t1.Weekday | int }}

<div class="calendar">
  <a class="month">{{ if eq .Site.Language.Lang "pl" }}{{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}{{ $month := sub $month 1}}{{ $label := index $polish_month_names $month }}{{ printf "%s %d" $label $year }}{{ else }}{{ time.Format "January 2006" $t1 }}{{ end }}</a>
  <div class="days">
		{{ if gt $padding 0 }}
    	{{ range seq 1 $padding }}
      	<div class="pad-day"></div>
    	{{ end }}
		{{ end }}

    {{ range seq 1 $daysInMonth }}
      <div class="day">{{ . }}</div>
    {{ end }}
  </div>
</div>



<style>
 .calendar {
  width: 100%;
	max-width: 1000px;
  margin: 20px auto;
  padding: 0;
  background-color: darkslategray;
 }



 a.month {
  display: block;
  padding: 15px 0;
  margin: 0;
  text-align: center;
  width: 100%;
  background-color: black;
 }

 .days {
  width: calc(100% - 10px) ;
  padding: 5px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
 }

 .pad-day, .day {
  width: calc(14.28% - 3px) ;
  margin: 1.5px;
  aspect-ratio: 1;
 }


 .day {
  background-color: gray;
  transition: 400ms;
 }

 .day:hover {
  transform: scale(1.2);
  background-color: black;
 }


 
</style>