styling for calendar

diff --git a/index.cgi b/index.cgi
index 363e969e1a5f82b6adda9456fa0ca265e48327d7..51a7c0f312995245e071a5b7e97ea535b73d82e0 100755 (executable)
--- 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 (file)
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 02f7cb2a9fe86f21f05540a49dfee59150158b89..248749535423255dba66c7144dffb1d6f9061f8b 100755 (executable)
--- 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 ']]'
 }