From 2cfdff52842b5c1ac1a4c42289f5bc67328d01d1 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Sat, 17 Jul 2021 01:32:17 +0200
Subject: [PATCH] styling for calendar

---
 index.cgi   |  7 ++++---
 widgets.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 widgets.sh  | 15 +++++++++++++--
 3 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 widgets.css

diff --git a/index.cgi b/index.cgi
index 363e969..51a7c0f 100755
--- a/index.cgi
+++ b/index.cgi
@@ -20,6 +20,7 @@ yield_page(){
     [head
       [meta name="viewport" content="width=device-width"]
       [link rel="stylesheet" type="text/css" href="common.css"]
+      [link rel="stylesheet" type="text/css" href="widgets.css"]
       [title %s]
     ] [body class="%s"
   ' "$title" "$page"
@@ -33,9 +34,9 @@ case ${PATH_INFO##*/} in
   common.css) FILE "$_EXEC/cgilite/common.css";;
   widgets.css) FILE "$_EXEC/widgets.css";;
   '') yield_page <<-EOF
-	$(w_month 2019-12 24)
-	$(w_month 2020-01)
-	$(w_month 2020-02)
+	$(w_month date1 2019-12 24)
+	$(w_month date2 2020-01)
+	$(w_month date3 2020-02)
 	EOF
     return 0
     ;;
diff --git a/widgets.css b/widgets.css
new file mode 100644
index 0000000..6763d40
--- /dev/null
+++ b/widgets.css
@@ -0,0 +1,51 @@
+table.calendar {
+  display: inline-block;
+  -border: 1pt solid;
+  border-collapse: collapse;
+  vertical-align: top;
+}
+table.calendar td {
+  border: 1pt solid;
+}
+
+table.calendar thead tr.monthname {
+  border-style: solid;
+  border-width: 1pt 1pt 1pt 1pt;
+}
+table.calendar thead tr.weekday th:first-of-type {
+  border-style: solid;
+  border-width: 0pt 0pt 0pt 1pt;
+}
+table.calendar thead tr.weekday th:last-child {
+  border-right: 1pt solid;
+}
+table.calendar tbody tr th {
+  border-left: 1pt solid #000;
+}
+table.calendar tbody tr:last-child th {
+  border-bottom: 1pt solid #000;
+}
+
+table.calendar tbody tr th.weekno {
+  width: 2em;
+  padding: 0 .25em;
+  text-align: right;
+  font-weight: normal;
+  color: #888;
+}
+
+table.calendar input[type=radio] {
+  display: none;
+}
+table.calendar td input + label {
+  display: inline-block;
+  width: 2em;
+  margin: 0; padding: .25em;
+  text-align: right;
+  line-height: 1em;
+}
+table.calendar td input:checked + label {
+  font-weight: bold;
+  line-height: .75em;
+  border: .125em solid;
+}
diff --git a/widgets.sh b/widgets.sh
index 02f7cb2..2487495 100755
--- a/widgets.sh
+++ b/widgets.sh
@@ -12,7 +12,12 @@ selected(){
 }
 
 w_month() {
-  local month="$1" selected="$2"
+  # Arguments:
+  # 1. (optional) Name of select box, default "date"
+  # 2. (optional) Month to display in format: YYYY-MM, default current month
+  # 3. (optional) Day to preselect in format: DD, default none
+
+  local input="${1:-date}" month="$2" selected="$3"
   local dow dom days n=1 Y m d V w B
   if [ $month ]; then
     read Y m d V w B<<-EOF
@@ -52,9 +57,15 @@ w_month() {
     dow=$(( (w - d + 35 + dom ) % 7))
     [ $dow = 1 -o $dom = 1 ] && printf '[tr [th .weekno . %i]' $V
     [ $dom = 1 ] && while [ $n -lt $(( ($dow + 6) % 7 + 1)) ]; do printf '[td ]'; n=$((n + 1)); done
-    printf '[td [label [input type=radio name=date value="%04i-%02i-%02i" %s] %i]]' $Y $m $dom "$(checked $dom $selected)" $dom
+    date="$(printf "%04i-%02i-%02i" $Y $m $dom)"
+    printf '[td [input type=radio id="%s_%s" name="%s" value="%s" %s][label for="%s_%s" . %i]]' \
+           "$input" "$date" "$input" "$date" "$(checked $dom $selected)" "$input" "$date" "$dom"
     [ $dow = 0 ] && printf ']\n'
     [ $dow = 0 ] && V=$(( V % 53 + 1))
   done
+  if [ $dow -le 6 ]; then
+    while [ $dow -le 6 ]; do printf '[td ]'; dow=$((dow + 1)) ; done
+    printf ']\n'
+  fi
   printf ']]'
 }
-- 
2.39.2