auto-number month and week

static/papermod/index.html

@@ -64,16 +64,12 @@
         }
 
         /* page 1 */
-        .year {
-            font-weight: bold;
-            font-size: 20mm;
-        }
         .week {
             font-weight: bold;
-            font-size: 20mm;
+            font-size: 14mm;
         }
         .date {
-            font-size: 10mm;
+            font-size: 8mm;
         }
         .return-addr {
             font-weight: bold;
@@ -107,6 +103,11 @@
         .month td {
             border: thin solid black;
         }
+        .month tbody td {
+            font-size: small;
+            text-align: left;
+            vertical-align: top;
+        }
 
         /* page 4-5 */
         .week table {
@@ -154,7 +155,7 @@
         <p>I used to use this thing called PocketMod to lay out my paper organizer every week. It's <a href="https://pocketmod.com/v2/">defunct</a> unless you can get Silverlight running somehow, so I made my own version with HTML and CSS.</p>
         <p>Just fill out the form, click "generate", and use your browser's "print" function to get an 8 page document. To convert it into a booklet, I recommend using <a href="https://nashhigh.itch.io/zinearranger">The Zine Arranger</a> by Nash High.</p> or <a href="https://pocketverter.pages.dev/">Pocketverter</a> by <a href="https://github.com/Laur401/pocketverter">Laur401</a>.
         <div>
-            <label for="date">date:</label>
+            <label for="date">start date:</label>
             <input id="settings-date" type="date" name="date">
         </div>
         <div>
@@ -169,12 +170,11 @@
     </div>
     <div id="document">
         <div class="page">
-            <div class="year" contenteditable> </div>
             <div class="week" contenteditable> </div>
             <div class="date" contenteditable> </div>
             <div class="return-addr" contenteditable>
-                <p id="user-name">papermod</p>
+                <p id="user-name"> </p>
-                <p id="user-contact"></p>
+                <p id="user-contact"> </p>
             </div>
             <div class="footer">nycki.net/papermod</div>
         </div>
@@ -308,30 +308,51 @@
         const elDate = document.querySelector('#settings-date');
         const elButton = document.querySelector('#settings-update');
 
+        const weekday = [
+            'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday',
+        ];
+
         function getWeek(date) {
             const januaryFirst = new Date(date.getFullYear(), 0, 1);
             return Math.ceil((((date - januaryFirst) / 86_400_000) + januaryFirst.getDay()+1) / 7);
         }
 
         function update() {
-            const date = new Date(elDate.value);
-            date.setHours(12); // I don't care about the time zone
-            document.querySelector('.year').textContent = date.getFullYear();
-            document.querySelector('.week').textContent = "W" + getWeek(date);
-
-            const monday = new Date(date);
-            monday.setDate(date.getDate() - date.getDay() + 1);
-            const mm1 = monday.getMonth() + 1;
-            const dd1 = monday.getDate();
-            const sunday = new Date(monday);
-            sunday.setDate(monday.getDate() + 6);
-            const mm2 = sunday.getMonth() + 1;
-            const dd2 = sunday.getDate();
-            document.querySelector('.date').textContent = `${mm1}-${dd1} ... ${mm2}-${dd2}`
-
             document.querySelector('#user-name').textContent = document.querySelector('#settings-name').value;
-
             document.querySelector('#user-contact').textContent = document.querySelector('#settings-contact').value;
+
+            let startDate = new Date(elDate.value);
+            if (isNaN(startDate)) startDate = new Date();
+            let d;
+
+            startDate.setHours(12); // I don't care about the time zone
+            document.querySelector('.week').textContent = startDate.getFullYear() + "W" + getWeek(startDate);
+
+            const mm1 = startDate.getMonth() + 1;
+            const dd1 = startDate.getDate();
+            d = new Date(startDate);
+            d.setDate(d.getDate() + 6);
+            const mm2 = d.getMonth() + 1;
+            const dd2 = d.getDate();
+            document.querySelector('.date').textContent = `${mm1}-${dd1} ⋯ ${mm2}-${dd2}`
+
+            /* set up month */
+            const startDay = startDate.getDay();
+            for (const [i, el] of document.querySelectorAll('.month thead td').entries()) {
+                el.textContent = weekday[(startDay + i) % 7].slice(0,3);
+            }
+            d = new Date(startDate);
+            for (const el of document.querySelectorAll('.month tbody td')) {
+                el.textContent = d.getDate();
+                d.setDate(d.getDate() + 1);
+            }
+
+            /* set up week */
+            d = new Date(startDate);
+            for (const [i, el] of document.querySelectorAll('.week tr:nth-child(odd) td').entries()) {
+                el.textContent = `${d.getMonth()+1}-${d.getDate()} ${weekday[d.getDay()]}`
+                d.setDate(d.getDate() + 1);
+            }
         }
 
         elButton.onclick = update;