2 <article xmlns=
"http://www.w3.org/1999/xhtml" xmlns:
xlink=
"http://www.w3.org/1999/xlink" xmlns:书社=
"urn:fdc:ladys.computer:20231231:Shu1She4" lang=
"en" xml:
lang=
"en">
3 <style><![CDATA[@charset
"UTF-8";
4 #widget h2{ Margin-Inline: Auto; Margin-Block-End:
1REM; Border-Block-End: Thin Solid; Padding-Inline:
1CH; Max-Inline-Size: Max-Content }
5 #widget
>footer{ Display: Grid; Margin-Block:
1REM; Margin-Inline: Auto; Max-Inline-Size: Max-Content; Grid-Template-Columns:
1FR
1FR
1FR; Gap:
1CH }
6 #widget
>div{ Display: Flex; Margin-Block:
1REM; Flex-Flow: Row Wrap; Gap:
1REM }
7 #widget
>div
>div:First-Child{ Min-Inline-Size: Max-Content; Inline-Size:
27REM; Flex: Auto;}
8 #widget
>div
>div:First-Child
>table{ Margin-Inline: Auto; Font-Variant-Numeric: Lining-Nums Tabular-Nums; Text-Align-Last: Auto }
9 #widget
>div
>div:First-Child
>table th{ Border-Block-End: Thin Solid; Text-Align: Center }
10 #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 }
11 #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) }
12 #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 }
13 #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 }
14 #widget
>div
>div:First-Child
>table td
>small.weekend{ Text-Decoration: Underline }
15 #widget
>div
>div:First-Child
>table td.today{ Box-Shadow:
1PX
1PX #
700020 }
16 #widget
>div
>div:First-Child
>table td.today
>b{ Color: #
992244 }
17 #widget
>div
>div:First-Child
>table td.today
>small{ Background: #
700020 }
18 #widget
>div
>div{ Width:
16REM Flex: None}
20 <meta itemprop=
"urn:fdc:ladys.computer:20231231:Shu1She4:title" content=
"Calendar | Lady’s Computer"/>
21 <h1><small><a href=
"/">Lady’s Computer
</a> ∷
</small>Calendar
</h1>
23 <summary>About this calendar…</summary>
33 <th scope=
"col">Ⅰ
</th>
34 <th scope=
"col">Ⅱ
</th>
35 <th scope=
"col">Ⅲ
</th>
36 <th scope=
"col">Ⅳ
</th>
37 <th scope=
"col">Ⅴ
</th>
38 <th scope=
"col">Ⅵ
</th>
39 <th scope=
"col">Ⅶ
</th>
40 <th scope=
"col">Ⅷ
</th>
55 <button type=
"button">Previous
</button>
56 <button type=
"button">Current
</button>
57 <button type=
"button">Next
</button>
60 <noscript>Calendar widget requires Javascript!
</noscript>
62 const widget= document.getElementById(
"widget")
63 const template= widget.querySelector(
"#widget>template")
64 const day= +Date.UTC(
1970,
0,
2)
65 const today= new Date();
66 const lmn= (name, atts, ...children) =
>
67 { const elt= document.createElement(name)
68 elt.replaceChildren(...children)
69 for (const att in (atts ?? {}))
70 { elt.setAttribute(att, atts[att])}
72 const dateForDay= (start, month, dayInMonth) =
> new Date
73 ( +start + ((month -
1) *
40 + dayInMonth -
1) * day)
74 const td= (start, month, dayInMonth) =
>
75 { const elt= document.createElement(
"td")
76 const date= dateForDay(start, month, dayInMonth)
77 const label= lmn(
"b", null, `${dayInMonth}`.padStart(
2,
"0"))
80 , date.getUTCDay() ==
0 || date.getUTCDay() ==
6
92 ,
"Saturday"][date.getUTCDay()]}
93 ,
"SMTWÞFL"[date.getUTCDay()])
94 ,
" " + `${date.getUTCDate()}`.padStart(
2,
"0") +
" "
95 , [ lmn(
"abbr", {title:
"January"},
"Jan")
96 , lmn(
"abbr", {title:
"February"},
"Feb")
97 , lmn(
"abbr", {title:
"March"},
"Mar")
98 , lmn(
"abbr", {title:
"April"},
"Apr")
99 , lmn(
"abbr", {title:
"May"},
"May")
100 , lmn(
"abbr", {title:
"June"},
"Jun")
101 , lmn(
"abbr", {title:
"July"},
"Jul")
102 , lmn(
"abbr", {title:
"August"},
"Aug")
103 , lmn(
"abbr", {title:
"September"},
"Sep")
104 , lmn(
"abbr", {title:
"October"},
"Oct")
105 , lmn(
"abbr", {title:
"November"},
"Nov")
106 , lmn(
"abbr", {title:
"December"},
"Dec")][date.getUTCMonth()])
107 elt.replaceChildren(label,
" ", caption)
109 ( date.getUTCFullYear() == today.getFullYear()
110 && date.getUTCMonth() == today.getMonth()
111 && date.getUTCDate() == today.getDate())
112 { elt.className=
"today"}
114 const renderCalendarIncludingDate= (date) =
>
115 { const start= new Date
117 ( date.getUTCFullYear()
118 - ! ( date.getUTCMonth()
> 8
119 || date.getUTCMonth() ==
8 && date.getUTCDate()
>=
22)
122 const dayInYear= Math.floor
124 ( date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
127 const month= Math.floor(dayInYear /
40) +
1
128 const view= template.content.cloneNode(true)
129 const year= start.getUTCFullYear() -
1999
131 { const title= document.createElement(
"i")
132 title.textContent=
"Fetes"
133 view.querySelector(
"h2").replaceChildren(title, ` ${year}`)}
135 { const tide= document.createElement(
"i")
136 tide.textContent= month ==
5 ?
"·en·tide" :
"·tide"
137 view.querySelector(
"h2").replaceChildren
146 ,
"Weod"][month -
1] ?? month
149 const calendar= view.querySelector(
"table")
150 const intercalaryDays=
5
152 ( Date.UTC(start.getUTCFullYear() +
1) + Date.UTC(
1970,
2,
1))
156 { calendar.tHead.rows[
0].replaceChildren
157 ( ...[ ...calendar.tHead.rows[
0].cells].slice(
0, intercalaryDays))
158 calendar.tBodies[
0].rows[
0].replaceChildren
159 ( ...new Array(intercalaryDays).fill().map
160 ( (_, n) =
> td(start,
10, n +
1)))
161 calendar.tBodies[
0].replaceChildren(calendar.tBodies[
0].rows[
0])}
163 { [...calendar.tBodies[
0].rows].forEach
164 ( (row, m) =
> row.replaceChildren
165 ( ...new Array(
8).fill().map
166 ( (_, n) =
> td(start, month, m *
8 + n +
1))))}
167 view.querySelector(
"button:First-Child").addEventListener
169 , () =
> renderCalendarIncludingDate
170 ( new Date(+dateForDay(start, month,
1) -
1 * day)))
172 (
"button:Not(:First-Child):Not(:Last-Child)")
175 , () =
> renderCalendarIncludingDate
178 ( today.getFullYear(), today.getMonth(), today.getDate()))))
179 view.querySelector(
"button:Last-Child").addEventListener
181 , () =
> renderCalendarIncludingDate
183 ( +dateForDay(start, month,
1)
184 + (month ==
10 ? intercalaryDays :
40) * day)))
185 widget.replaceChildren(view)}
186 renderCalendarIncludingDate
188 ( Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())))