From: Lady <redacted>
Date: Thu, 18 Jan 2024 13:46:07 +0000 (-0500)
Subject: Improve calendar display
X-Git-Url: https://git.ladys.computer/WWW/commitdiff_plain/b7a8fbe61828b4d29232904326281ca6b85031e0?ds=sidebyside

Improve calendar display
---

diff --git a/sources/calendar/index.xhtml b/sources/calendar/index.xhtml
index cf55a00..2de0292 100644
--- 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()