hugo-theme/layouts/shortcodes/calendar.html

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

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

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


{{ $daysInMonth := 27 }}


<div class="calendar">
  <a class="month">{{ time.Format "January 2006" "01 Dec 2024" }}</a>
  <div class="days">
    {{ $padding := 4 }}
    {{ range seq 1 1}}
      <div class="pad-day"></div>
    {{ end }}
    {{ range seq 1 $daysInMonth }}
      <div class="day">{{ . }}</div>
    {{ end }}
  </div>
</div>


<style>
 .calendar {
  width: 100%;
  margin: 20px 0;
  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>