LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lunar phase styled

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-20 20:00:40 -06:00
parent 195520d66f
commit 8cf97f4c9f
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
calendar.js
View File

@ -331,14 +331,8 @@ class InfiniteCalendar {
labelYear = cur.getFullYear() labelYear = cur.getFullYear()
} }
const day = document.createElement('h1') const day = document.createElement('h1')
day.textContent = String(cur.getDate()) day.textContent = String(cur.getDate())
// lunar phase symbol (only for main phases)
const moon = document.createElement('span')
moon.className = 'lunar-phase'
moon.textContent = lunarPhaseSymbol(cur) || ''
if (moon.textContent) cell.appendChild(moon)
const date = toLocalString(cur) const date = toLocalString(cur)
cell.dataset.date = date cell.dataset.date = date
@ -386,6 +380,13 @@ class InfiniteCalendar {
} }
cell.appendChild(day) cell.appendChild(day)
const luna = lunarPhaseSymbol(cur)
if (luna) {
const moon = document.createElement('span')
moon.className = 'lunar-phase'
moon.textContent = luna
cell.appendChild(moon)
}
daysGrid.appendChild(cell) daysGrid.appendChild(cell)
cur.setDate(cur.getDate() + 1) cur.setDate(cur.getDate() + 1)
} }

9
cells.css
View File

@ -3,7 +3,7 @@
.cell { .cell {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
padding: .25em; padding: .25em;
@ -19,15 +19,10 @@
right: .25em; right: .25em;
padding: 0; padding: 0;
margin: 0; margin: 0;
min-width: 1.5em;
transition: background-color .15s ease; transition: background-color .15s ease;
font-size: 1em; font-size: 1em;
} }
.cell .lunar-phase {
position: absolute;
z-index: 1;
top: .25em;
left: 50%;
}
.cell.today h1 { .cell.today h1 {
border-radius: 2em; border-radius: 2em;
background: var(--today); background: var(--today);