(mostly) finish calendar. needs some stylework but its fully func

i18n/en.toml

@@ -0,0 +1,8 @@
+[days]
+sun = "Sunday"
+mon = "Monday"
+tues = "Tuesday"
+wend = "Wednesday"
+thurs = "Thursday"
+fri = "Friday"
+sat = "Saturday"

layouts/shortcodes/calendar.html

@@ -15,101 +15,47 @@
 {{ $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>
+  <link rel="stylesheet" href="/css/calendar.css" type="text/css">
+  {{ 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 }}
+    <a class="month">{{ printf "%s %d" $label $year }}</a>
+  {{ else }}
+    <a class="month">{{ time.Format "January 2006" $t1 }}</a>
+  {{ end }}
+
+  <div class="weekdays" >
+    {{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
+    {{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
+  </div>
+
   <div class="days">
+  {{ $padding := $t1.Weekday | int }}
 	{{ if gt $padding 0 }}
     {{ range seq 1 $padding }}
       <div class="pad-day"></div>
     {{ end }}
 	{{ end }}
 
-
   {{ range seq 1 $daysInMonth }}
     <div class="day">
-      {{ $startDate := printf "%4d-%02d-%02dT00:00:00" $year $month . }}
+      {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
-      {{ $startDate := time.AsTime $startDate }}
+      {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
-      {{ $endDate := printf "%4d-%02d-%02dT23:59:59" $year $month . }}
+      <h3 class="day-num">{{ . }}</h3>
-      {{ $endDate := time.AsTime $endDate }}
 
-      {{ . }}
-    `
       {{ range where $.Site.RegularPages "Section" "eq" "events" }}
-      {{ $eventStart := time.AsTime .Params.start_date | int }}
+        {{ $eventStart := time.AsTime .Params.start_date }}
-      {{ if after $eventStart $startDate }}
+        {{ $eventEnd := time.AsTime .Params.end_date }}
-        <h2>{{ .Title }}</h2>
+        
+        {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
+          <div class="event" >
+            <a href="{{ .RelPermalink }}">{{.Title}}</a>
+          </div>
         {{ end }}        
-
-
     {{ end }}
-
+    </div>
-</div>
-{{ end }}
-
-
-
-
-{{ range where .Site.Pages "Type" "event" }}
-    {{ if (and (gt .Params.start_date $.Date) (lt .Params.end_date $.Date)) }}
-        <h2>{{ .Title }}</h2>
   {{ end }}
-{{ 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>

static/css/calendar.css

@@ -0,0 +1,113 @@
+:root {
+--cal-bg: darkslategray;
+--cal-fg: white;
+
+--cal-month-bg: black;
+--cal-month-fg: cyan;
+
+--cal-weekdays-bg: gray ;
+--cal-weekdays-fg: black;
+
+--cal-day-empty-fg: #888;
+--cal-day-empty-bg: #555;
+
+--cal-day-busy-fg:  #555;
+--cal-day-busy-bg:  #888;
+
+--cal-day-hover-fg: #555;
+--cal-day-hover-bg: black;
+
+--cal-event-fg: white;
+--cal-event-bg: var(--acc-1) ;
+}
+
+ .calendar {
+  width: 100%;
+	max-width: 1000px;
+  margin: 20px auto;
+  padding: 0;
+  background-color: var(--cal-bg);
+  color: var(--cal-fg);
+ }
+
+ a.month {
+  display: block;
+  width: 100%;
+  padding: 15px 0;
+  text-align: center;
+  background-color: var(--cal-month-bg);
+  color: var(--cal-month-fg);
+ }
+
+ .days {
+  width: calc(100% - 10 px) ;
+  padding: 5px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+ }
+
+ .weekdays {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+ }
+
+ .weekdays p {
+  display: inline-block;
+  width: calc(14.28%);
+  background-color: var(--cal-weekdays-bg);
+  color: var(--cal-weekdays-fg);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+	/* border: 0px solid var(--bg); */
+	/* border-collapse: collapse; */
+}
+
+ .pad-day, .day {
+  width: calc(14.28% - 3px - 10px);
+  padding: 0 5px;
+  margin: 1.5px;
+  aspect-ratio: 1;
+ }
+
+
+ .day {
+  background-color: var(--cal-day-empty-bg);
+  color: var(--cal-day-empty-fg);
+  transition: 400ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+ }
+
+
+ .day:has(>.event) {
+  display: block;
+  color: var(--cal-day-busy-fg);
+  background-color: var(--cal-day-busy-bg);
+ }
+
+.day:has(>.event):hover {
+  transform: scale(1.2);
+  background-color: var(--cal-day-hover-bg);
+  color: var(--cal-day-hover-fg);
+ }
+
+ .day-num {
+  font-size: 48px;
+ }
+
+.day:has(>.event) .day-num {
+  font-size: 32px;
+ }
+
+ .event, .event a {
+  color: var(--cal-event-fg);
+  background-color: var(--cal-event-bg);
+ }
+