Improve calendar display

[WWW] / sources / calendar / index.xhtml

diff --git a/sources/calendar/index.xhtml b/sources/calendar/index.xhtml
index cf55a00f39f1c8bf0541008610080dd0030e32d3..2de0292754dc091f4e782d4341f74fe998e49a92 100644 (file)
--- a/sources/calendar/index.xhtml
+++ b/sources/calendar/index.xhtml
@@ -8,9 +8,10 @@
 #widget>div>div:First-Child>table{ Margin-Inline: Auto; Font-Variant-Numeric: Lining-Nums Tabular-Nums; Text-Align-Last: Auto }
 #widget>div>div:First-Child>table th{ Border-Block-End: Thin Solid; Text-Align: Center }
 #widget>div>div:First-Child>table td{ Position: Relative; Border: Thin Solid; Padding: 0; Block-Size: 3.5EM; Inline-Size: 3.5EM; Vertical-Align: Top; Background: #1A1A1A; Text-Align: Start }
-#widget>div>div:First-Child>table td:Nth-Child(n+6){ Background-Image: Repeating-Linear-Gradient(To Bottom Right, Transparent 0PX, Transparent .5PX, #686868 1PX, #686868 1.5PX, Transparent 2PX) }
+#widget>div>div:First-Child>table td:Nth-Last-Child(-n+3),#widget>div>div:First-Child>table td:Nth-Child(-n+2):Nth-Last-Child(-n+6),#widget>div>div:First-Child>table td:Nth-Child(3):Nth-Last-Child(4){ Background-Image: Repeating-Linear-Gradient(To Bottom Right, Transparent 0PX, Transparent .5PX, #686868 1PX, #686868 1.5PX, Transparent 2PX) }
 #widget>div>div:First-Child>table td>b{ Display: Block; Margin-Inline-End: Auto; Border: Thin #F3DEE3 Solid; Padding: 2PX; Width: 3CH; Color: #1A1A1A; Background: #F3DEE3; Box-Shadow: Inset -1PX -1PX CurrentColor; Font-Style: Italic; Text-Align: Center }
 #widget>div>div:First-Child>table td>small{ Display: Block; Position: Absolute; Inset-Block-End: 0; Inset-Inline-End: 0; Margin-Block-Start: Auto; Margin-Inline-Start: Auto; Border-Block-Start: Thin Dashed; Border-Inline-Start: Thin Dashed; Padding-Inline: .5CH; Width: Max-Content; Max-Width: 100%; Color: #F3DEE3; Background: #1A1A1A; Font-Size: .75EM; Font-Style: Italic }
+#widget>div>div:First-Child>table td>small.weekend{ Text-Decoration: Underline }
 #widget>div>div:First-Child>table td.today{ Box-Shadow: 1PX 1PX #700020 }
 #widget>div>div:First-Child>table td.today>b{ Color: #992244 }
 #widget>div>div:First-Child>table td.today>small{ Background: #700020 }
@@ -61,28 +62,48 @@
 const widget= document.getElementById("widget")
 const template= widget.querySelector("#widget>template")
 const day= +Date.UTC(1970, 0, 2)
-const today = new Date();
+const today= new Date();
+const lmn= (name, atts, ...children) =>
+{      const elt= document.createElement(name)
+       elt.replaceChildren(...children)
+       for (const att in (atts ?? {}))
+       {       elt.setAttribute(att, atts[att])}
+       return elt}
 const dateForDay= (start, month, dayInMonth) => new Date
 (      +start + ((month - 1) * 40 + dayInMonth - 1) * day)
 const td= (start, month, dayInMonth) =>
 {      const elt= document.createElement("td")
        const date= dateForDay(start, month, dayInMonth)
-       const label= document.createElement("b")
-       label.textContent= `${dayInMonth}`.padStart(2, "0")
-       const caption= document.createElement("small")
-       caption.textContent= `${date.getUTCDate()}`.padStart(2, "0")
-       +       [       " Jan"
-               ,       " Feb"
-               ,       " Mar"
-               ,       " Apr"
-               ,       " May"
-               ,       " Jun"
-               ,       " Jul"
-               ,       " Aug"
-               ,       " Sep"
-               ,       " Oct"
-               ,       " Nov"
-               ,       " Dec"][date.getUTCMonth()]
+       const label= lmn("b", null, `${dayInMonth}`.padStart(2, "0"))
+       const caption= lmn
+       (       "small"
+       ,       date.getUTCDay() == 0 || date.getUTCDay() == 6
+       ?       {class: "weekend"}
+       : null
+       ,       lmn
+               (       "abbr"
+               ,       {       title
+                               :       [       "Sunday"
+                                       ,       "Monday"
+                                       ,       "Tuesday"
+                                       ,       "Wednesday"
+                                       ,       "Thursday"
+                                       ,       "Friday"
+                                       ,       "Saturday"][date.getUTCDay()]}
+               ,       "SMTWÞFL"[date.getUTCDay()])
+       ,       " " + `${date.getUTCDate()}`.padStart(2, "0") + " "
+       ,       [       lmn("abbr", {title: "January"}, "Jan")
+               ,       lmn("abbr", {title: "February"}, "Feb")
+               ,       lmn("abbr", {title: "March"}, "Mar")
+               ,       lmn("abbr", {title: "April"}, "Apr")
+               ,       lmn("abbr", {title: "May"}, "May")
+               ,       lmn("abbr", {title: "June"}, "Jun")
+               ,       lmn("abbr", {title: "July"}, "Jul")
+               ,       lmn("abbr", {title: "August"}, "Aug")
+               ,       lmn("abbr", {title: "September"}, "Sep")
+               ,       lmn("abbr", {title: "October"}, "Oct")
+               ,       lmn("abbr", {title: "November"}, "Nov")
+               ,       lmn("abbr", {title: "December"}, "Dec")][date.getUTCMonth()])
        elt.replaceChildren(label, " ", caption)
        if
        (       date.getUTCFullYear() == today.getFullYear()