nycki/nycki.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

week day formatting options
All checks were successful
/ build (push) Successful in 41s
Details

Browse source
This commit is contained in:
Nycki 2025-11-18 12:14:57 -08:00
parent 3d13f65dd3
commit ffbf98ca60
1 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
content/papermod/index.njk
View file

@ -37,6 +37,18 @@
#settings :first-child {
margin: 0;
}
#settings .form {
margin-top: var(--m2);
width: fit-content;
}
#settings .form div {
display: flex;
flex-direction: row;
}
#settings .form div * {
flex: 1;
float: left;
}
#document {
display: flex;
@ -163,26 +175,36 @@
<h2>the analog organizer</h2>
<p>I <a href="/blogette/1/#2025-11-14-bullent-journal">used to use</a> 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 to pdf" 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 or <a href="https://pocketverter.pages.dev/">Pocketverter</a> by <a href="https://github.com/Laur401/pocketverter">Laur401</a>.</p>
<div>
<label for="date">start date:</label>
<input id="settings-date" type="date" name="date">
</div>
<div>
<label for="settings-has-week">show week number</label>
<input id="settings-has-week" type="checkbox" name="settings-has-week" checked>
</div>
<div>
<label for="settings-start-monday">always start on monday</label>
<input id="settings-start-monday" type="checkbox" name="settings-start-monday" checked>
</div>
<div>
<label for="name">your name:</label>
<input id="settings-name" type="text" name="name">
</div>
<div class="form">
<div>
<label for="date">start date:</label>
<input id="settings-date" type="date" name="date">
</div>
<div>
<label for="settings-dateformat">format:</label>
<select id="settings-dateformat" name="settings-dateformat">
<option value="mm-dd" default>mm-dd</option>
<option value="mm/dd">mm/dd</option>
<option value="dd/mm">dd/mm</option>
</select>
</div>
<div>
<label for="settings-has-week">show week number:</label>
<span><input id="settings-has-week" type="checkbox" name="settings-has-week" checked></span>
</div>
<div>
<label for="settings-start-monday">always start on monday:</label>
<span><input id="settings-start-monday" type="checkbox" name="settings-start-monday" checked></span>
</div>
<div>
<label for="name">your name:</label>
<input id="settings-name" type="text" name="name">
</div>
<div>
<label for="contact">contact (email, phone, etc):</label>
<input id="settings-contact" type="text" name="contact">
</div>
</div>
<button id="settings-update">generate</button>
<button id="settings-clear">clear all</button>
<button onclick="window.print()">print</button>
@ -339,6 +361,14 @@
return Math.ceil((((date - januaryFirst) / 86_400_000) + januaryFirst.getDay()+1) / 7);
}
function formatDate(date) {
const formatStr = document.querySelector('#settings-dateformat').value;
return (formatStr
.replace('mm', date.getMonth() + 1)
.replace('dd', date.getDate())
);
}
function update() {
document.querySelector('#user-name').textContent = document.querySelector('#settings-name').value;
document.querySelector('#user-contact').textContent = document.querySelector('#settings-contact').value;
@ -356,13 +386,9 @@
document.querySelector('.week').textContent += `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}`
document.querySelector('.date').textContent = `${formatDate(startDate)} ⋯ ${formatDate(d)}`
/* set up month */
const startDay = startDate.getDay();
@ -378,7 +404,7 @@
/* 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()]}`
el.textContent = `${formatDate(d)} ${weekday[d.getDay()]}`
d.setDate(d.getDate() + 1);
}
}