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-Child(n+
6){ 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.today{ Box-Shadow:
1PX
1PX #
700020 }
15 #widget
>div
>div:First-Child
>table td.today
>b{ Color: #
992244 }
16 #widget
>div
>div:First-Child
>table td.today
>small{ Background: #
700020 }
17 #widget
>div
>div{ Width:
16REM Flex: None}
19 <meta itemprop=
"urn:fdc:ladys.computer:20231231:Shu1She4:title" content=
"Calendar | Lady’s Computer"/>
20 <h1><small><a href=
"/">Lady’s Computer
</a> ∷
</small>Calendar
</h1>
22 <summary>About this calendar…</summary>
32 <th scope=
"col">Ⅰ
</th>
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>
54 <button type=
"button">Previous
</button>
55 <button type=
"button">Current
</button>
56 <button type=
"button">Next
</button>
59 <noscript>Calendar widget requires Javascript!
</noscript>
61 const widget= document.getElementById(
"widget")
62 const template= widget.querySelector(
"#widget>template")
63 const day= +Date.UTC(
1970,
0,
2)
64 const today = new Date();
65 const dateForDay= (start, month, dayInMonth) =
> new Date
66 ( +start + ((month -
1) *
40 + dayInMonth -
1) * day)
67 const td= (start, month, dayInMonth) =
>
68 { const elt= document.createElement(
"td")
69 const date= dateForDay(start, month, dayInMonth)
70 const label= document.createElement(
"b")
71 label.textContent= `${dayInMonth}`.padStart(
2,
"0")
72 const caption= document.createElement(
"small")
73 caption.textContent= `${date.getUTCDate()}`.padStart(
2,
"0")
85 ,
" Dec"][date.getUTCMonth()]
86 elt.replaceChildren(label,
" ", caption)
88 ( date.getUTCFullYear() == today.getFullYear()
89 && date.getUTCMonth() == today.getMonth()
90 && date.getUTCDate() == today.getDate())
91 { elt.className=
"today"}
93 const renderCalendarIncludingDate= (date) =
>
94 { const start= new Date
96 ( date.getUTCFullYear()
97 - ! ( date.getUTCMonth()
> 8
98 || date.getUTCMonth() ==
8 && date.getUTCDate()
>=
22)
101 const dayInYear= Math.floor
103 ( date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
106 const month= Math.floor(dayInYear /
40) +
1
107 const view= template.content.cloneNode(true)
108 const year= start.getUTCFullYear() -
1999
110 { const title= document.createElement(
"i")
111 title.textContent=
"Fetes"
112 view.querySelector(
"h2").replaceChildren(title, ` ${year}`)}
114 { const tide= document.createElement(
"i")
115 tide.textContent= month ==
5 ?
"·en·tide" :
"·tide"
116 view.querySelector(
"h2").replaceChildren
125 ,
"Weod"][month -
1] ?? month
128 const calendar= view.querySelector(
"table")
129 const intercalaryDays=
5
131 ( Date.UTC(start.getUTCFullYear() +
1) + Date.UTC(
1970,
2,
1))
135 { calendar.tHead.rows[
0].replaceChildren
136 ( ...[ ...calendar.tHead.rows[
0].cells].slice(
0, intercalaryDays))
137 calendar.tBodies[
0].rows[
0].replaceChildren
138 ( ...new Array(intercalaryDays).fill().map
139 ( (_, n) =
> td(start,
10, n +
1)))
140 calendar.tBodies[
0].replaceChildren(calendar.tBodies[
0].rows[
0])}
142 { [...calendar.tBodies[
0].rows].forEach
143 ( (row, m) =
> row.replaceChildren
144 ( ...new Array(
8).fill().map
145 ( (_, n) =
> td(start, month, m *
8 + n +
1))))}
146 view.querySelector(
"button:First-Child").addEventListener
148 , () =
> renderCalendarIncludingDate
149 ( new Date(+dateForDay(start, month,
1) -
1 * day)))
151 (
"button:Not(:First-Child):Not(:Last-Child)")
154 , () =
> renderCalendarIncludingDate
157 ( today.getFullYear(), today.getMonth(), today.getDate()))))
158 view.querySelector(
"button:Last-Child").addEventListener
160 , () =
> renderCalendarIncludingDate
162 ( +dateForDay(start, month,
1)
163 + (month ==
10 ? intercalaryDays :
40) * day)))
164 widget.replaceChildren(view)}
165 renderCalendarIncludingDate
167 ( Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())))