Compare commits
7 Commits
9bb3740b61
...
195520d66f
| Author | SHA1 | Date | |
|---|---|---|---|
|
195520d66f | ||
|
|
161c7987af | ||
|
|
fc0dc0c193 | ||
|
|
93c23c594c | ||
|
|
c0d76109a1 | ||
|
|
3b075e68e8 | ||
|
|
99b2d1a176 |
278
calendar.css
278
calendar.css
@ -1,272 +1,6 @@
|
||||
/* Color tokens */
|
||||
:root {
|
||||
--bg: #f6f7fb;
|
||||
--panel: #fff;
|
||||
--today: #f83;
|
||||
--ink: #111;
|
||||
--ink-rgb: 17, 17, 17;
|
||||
--muted: #888;
|
||||
--weekend: #888;
|
||||
--firstday: #000;
|
||||
--select: #aaf;
|
||||
--label-bg: #fafbfe;
|
||||
--label-bg-rgb: 250, 251, 254;
|
||||
}
|
||||
|
||||
/* Prevent text selection in calendar */
|
||||
#calendar-viewport, #calendar-content, .week-row, .cell,
|
||||
.calendar-header, .week-label, .month-name-label,
|
||||
.calendar-container, .jogwheel-viewport, .jogwheel-content {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Month tints (light) */
|
||||
.cell.dec { background: hsl(220 20% 95%) }
|
||||
.cell.jan { background: hsl(220 20% 88%) }
|
||||
.cell.feb { background: hsl(220 20% 95%) }
|
||||
.cell.mar { background: hsl(125 60% 88%) }
|
||||
.cell.apr { background: hsl(125 60% 95%) }
|
||||
.cell.may { background: hsl(125 60% 88%) }
|
||||
.cell.jun { background: hsl(45 85% 95%) }
|
||||
.cell.jul { background: hsl(45 85% 88%) }
|
||||
.cell.aug { background: hsl(45 85% 95%) }
|
||||
.cell.sep { background: hsl(18 78% 88%) }
|
||||
.cell.oct { background: hsl(18 78% 95%) }
|
||||
.cell.nov { background: hsl(18 78% 88%) }
|
||||
|
||||
/* Color tokens (dark) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: radial-gradient(1200px 800px at 20% -10%, #1c2130 0%, #0c0f16 35%, #0a0b11 100%);
|
||||
--panel: #111318;
|
||||
--today: #f83;
|
||||
--ink: #ddd;
|
||||
--ink-rgb: 221, 221, 221;
|
||||
--muted: #888;
|
||||
--weekend: #999;
|
||||
--firstday: #fff;
|
||||
--select: #44f;
|
||||
--label-bg: #1a1d25;
|
||||
--label-bg-rgb: 26, 29, 37;
|
||||
}
|
||||
|
||||
/* Month tints (dark) */
|
||||
.cell.dec { background: hsl(220 20% 22%) }
|
||||
.cell.jan { background: hsl(220 20% 16%) }
|
||||
.cell.feb { background: hsl(220 20% 22%) }
|
||||
.cell.mar { background: hsl(125 40% 18%) }
|
||||
.cell.apr { background: hsl(125 40% 26%) }
|
||||
.cell.may { background: hsl(125 40% 18%) }
|
||||
.cell.jun { background: hsl(45 70% 24%) }
|
||||
.cell.jul { background: hsl(45 70% 18%) }
|
||||
.cell.aug { background: hsl(45 70% 24%) }
|
||||
.cell.sep { background: hsl(18 70% 18%) }
|
||||
.cell.oct { background: hsl(18 70% 26%) }
|
||||
.cell.nov { background: hsl(18 70% 18%) }
|
||||
}
|
||||
|
||||
/* Layout & typography */
|
||||
:root {
|
||||
--row-h: 2.2em;
|
||||
--label-w: 4em;
|
||||
--cell-w: 6em;
|
||||
--cell-h: 6em;
|
||||
--overlay-w: 3rem;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: fit-content;
|
||||
margin: 2rem auto;
|
||||
background: var(--panel);
|
||||
height: calc(100vh - 4rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: calc(var(--label-w) + 7 * var(--cell-w) + 2.4rem);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: .75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.today-date {
|
||||
cursor: pointer;
|
||||
}
|
||||
.today-date::first-line {
|
||||
color: var(--today);
|
||||
}
|
||||
.today-button:hover { opacity: .8 }
|
||||
|
||||
.calendar-header {
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
|
||||
border-bottom: .1em solid var(--muted);
|
||||
align-items: last baseline;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar-viewport {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 0 0 auto;
|
||||
width: calc(var(--label-w) + 7 * var(--cell-w) + var(--overlay-w));
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.calendar-viewport::-webkit-scrollbar { display: none }
|
||||
|
||||
.jogwheel-viewport {
|
||||
position: absolute;
|
||||
inset: 0 0 0 auto;
|
||||
width: var(--overlay-w);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
z-index: 20;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.jogwheel-viewport::-webkit-scrollbar { display: none }
|
||||
|
||||
.jogwheel-content { position: relative; width: 100% }
|
||||
|
||||
.calendar-content { position: relative }
|
||||
|
||||
.week-row {
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
height: var(--cell-h);
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
/* Fixed heights for cells and labels */
|
||||
.week-row .cell,
|
||||
.week-row .week-label { height: var(--cell-h) }
|
||||
|
||||
header h1 { margin: 0; font-size: 1rem }
|
||||
|
||||
.dow-label,
|
||||
.week-label {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--label-w);
|
||||
height: var(--row-h);
|
||||
color: var(--muted);
|
||||
cursor: ns-resize;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.dow { text-transform: uppercase; }
|
||||
.cell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--cell-w);
|
||||
height: var(--row-h);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease;
|
||||
}
|
||||
|
||||
.weekend { color: var(--weekend) }
|
||||
.firstday { color: var(--firstday); text-shadow: 0 0 .1em rgba(var(--ink-rgb), .5) }
|
||||
|
||||
.today h1 {
|
||||
border-radius: 2em;
|
||||
border: .2em dotted var(--today);
|
||||
margin: -.2em;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ink);
|
||||
width: 11em;
|
||||
}
|
||||
label:has(input[value]) {
|
||||
display: block;
|
||||
}
|
||||
.selected {
|
||||
background: var(--select) !important;
|
||||
}
|
||||
.selected h1,
|
||||
:is(.range-start,.range-end,.range-middle,.range-single) h1 {
|
||||
background: transparent !important;
|
||||
color: var(--panel) !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell h1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: .25em;
|
||||
margin: 0;
|
||||
transition: background-color .15s ease;
|
||||
font-size: 1em;
|
||||
}
|
||||
.cell:hover h1 { text-shadow: 0 0 .2em; }
|
||||
|
||||
/* Month labels in jogwheel column */
|
||||
.month-name-label {
|
||||
grid-column: -2 / -1;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
z-index: 15;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: var(--overlay-w);
|
||||
}
|
||||
|
||||
.month-name-label > span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
/* Calendar CSS - Main file with imports */
|
||||
@import url('colors.css');
|
||||
@import url('layout.css');
|
||||
@import url('cells.css');
|
||||
@import url('events.css');
|
||||
@import url('utilities.css');
|
||||
|
||||
588
calendar.js
588
calendar.js
@ -1,30 +1,20 @@
|
||||
// calendar.js — Infinite scrolling week-by-week
|
||||
const monthAbbr = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']
|
||||
const DAY_MS = 86400000
|
||||
const WEEK_MS = 7 * DAY_MS
|
||||
|
||||
const isoWeekInfo = date => {
|
||||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
|
||||
const day = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - day)
|
||||
const year = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(year, 0, 1))
|
||||
const diffDays = Math.floor((d - yearStart) / DAY_MS) + 1
|
||||
return { week: Math.ceil(diffDays / 7), year }
|
||||
}
|
||||
|
||||
function toLocalString(date = new Date()) {
|
||||
const pad = n => String(Math.floor(Math.abs(n))).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
|
||||
function fromLocalString(dateString) {
|
||||
const [year, month, day] = dateString.split('-').map(Number)
|
||||
return new Date(year, month - 1, day)
|
||||
}
|
||||
|
||||
const mondayIndex = d => (d.getDay() + 6) % 7
|
||||
const pad = n => String(n).padStart(2, '0')
|
||||
// calendar.js — Infinite scrolling week-by-week with overlay event rendering
|
||||
import {
|
||||
monthAbbr,
|
||||
DAY_MS,
|
||||
WEEK_MS,
|
||||
isoWeekInfo,
|
||||
toLocalString,
|
||||
fromLocalString,
|
||||
mondayIndex,
|
||||
pad,
|
||||
daysInclusive,
|
||||
addDaysStr,
|
||||
getLocalizedWeekdayNames,
|
||||
getLocalizedMonthName,
|
||||
formatDateRange
|
||||
,lunarPhaseSymbol
|
||||
} from './date-utils.js'
|
||||
|
||||
class InfiniteCalendar {
|
||||
constructor(config = {}) {
|
||||
@ -37,6 +27,10 @@ class InfiniteCalendar {
|
||||
|
||||
this.weekend = [true, false, false, false, false, false, true]
|
||||
|
||||
// Event storage
|
||||
this.events = new Map() // Map of date strings to arrays of events
|
||||
this.eventIdCounter = 1
|
||||
|
||||
this.viewport = document.getElementById('calendar-viewport')
|
||||
this.content = document.getElementById('calendar-content')
|
||||
this.header = document.getElementById('calendar-header')
|
||||
@ -49,10 +43,10 @@ class InfiniteCalendar {
|
||||
this.baseDate = new Date(2024, 0, 1) // 2024 begins with Monday
|
||||
|
||||
// unified selection state (single or range)
|
||||
this.selStart = null // 'YYYY-MM-DD'
|
||||
this.selEnd = null // 'YYYY-MM-DD'
|
||||
this.selStart = null
|
||||
this.selEnd = null
|
||||
this.isDragging = false
|
||||
this.dragAnchor = null // 'YYYY-MM-DD'
|
||||
this.dragAnchor = null
|
||||
|
||||
this.init()
|
||||
}
|
||||
@ -64,6 +58,7 @@ class InfiniteCalendar {
|
||||
this.setupYearScroll()
|
||||
this.setupSelectionInput()
|
||||
this.setupCurrentDate()
|
||||
this.setupEventDialog()
|
||||
this.setupInitialView()
|
||||
}
|
||||
|
||||
@ -109,7 +104,7 @@ class InfiniteCalendar {
|
||||
const handleWheel = e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
const currentYear = parseInt(this.weekLabel.textContent)
|
||||
const currentYear = parseInt(this.yearLabel.textContent)
|
||||
const topDisplayIndex = Math.floor(this.viewport.scrollTop / this.rowHeight)
|
||||
const currentWeekIndex = topDisplayIndex + this.minVirtualWeek
|
||||
const sensitivity = 1/3
|
||||
@ -121,7 +116,7 @@ class InfiniteCalendar {
|
||||
this.navigateToYear(newYear, currentWeekIndex)
|
||||
setTimeout(() => throttled = false, 100)
|
||||
}
|
||||
this.weekLabel.addEventListener('wheel', handleWheel, { passive: false })
|
||||
this.yearLabel.addEventListener('wheel', handleWheel, { passive: false })
|
||||
}
|
||||
|
||||
navigateTo(date) {
|
||||
@ -185,32 +180,16 @@ class InfiniteCalendar {
|
||||
return Math.round(h)
|
||||
}
|
||||
|
||||
getLocalizedWeekdayNames() {
|
||||
const res = []
|
||||
const base = new Date(2025, 0, 6)
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(base)
|
||||
d.setDate(base.getDate() + i)
|
||||
res.push(d.toLocaleDateString(undefined, { weekday: 'short' }))
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
getLocalizedMonthName(idx, short = false) {
|
||||
const d = new Date(2025, idx, 1)
|
||||
return d.toLocaleDateString(undefined, { month: short ? 'short' : 'long' })
|
||||
}
|
||||
|
||||
createHeader() {
|
||||
this.weekLabel = document.createElement('div')
|
||||
this.weekLabel.className = 'dow-label'
|
||||
this.weekLabel.textContent = isoWeekInfo(new Date()).year
|
||||
this.header.appendChild(this.weekLabel)
|
||||
this.yearLabel = document.createElement('div')
|
||||
this.yearLabel.className = 'year-label'
|
||||
this.yearLabel.textContent = isoWeekInfo(new Date()).year
|
||||
this.header.appendChild(this.yearLabel)
|
||||
|
||||
const names = this.getLocalizedWeekdayNames()
|
||||
const names = getLocalizedWeekdayNames()
|
||||
names.forEach((name, i) => {
|
||||
const c = document.createElement('div')
|
||||
c.className = 'cell dow'
|
||||
c.classList.add('dow')
|
||||
const dayIdx = (i + 1) % 7
|
||||
if (this.weekend[dayIdx]) c.classList.add('weekend')
|
||||
c.textContent = name
|
||||
@ -279,6 +258,7 @@ class InfiniteCalendar {
|
||||
weekEl.style.height = `${this.rowHeight}px`
|
||||
this.content.appendChild(weekEl)
|
||||
this.visibleWeeks.set(vw, weekEl)
|
||||
this.addEventsToWeek(weekEl, vw)
|
||||
}
|
||||
|
||||
this.applySelectionToVisible()
|
||||
@ -289,7 +269,7 @@ class InfiniteCalendar {
|
||||
const topVW = topDisplayIndex + this.minVirtualWeek
|
||||
const monday = this.getMondayForVirtualWeek(topVW)
|
||||
const { year } = isoWeekInfo(monday)
|
||||
if (this.weekLabel.textContent !== String(year)) this.weekLabel.textContent = year
|
||||
if (this.yearLabel.textContent !== String(year)) this.yearLabel.textContent = year
|
||||
}
|
||||
|
||||
createWeekElement(virtualWeek) {
|
||||
@ -302,6 +282,31 @@ class InfiniteCalendar {
|
||||
wkLabel.textContent = `W${pad(isoWeekInfo(monday).week)}`
|
||||
weekDiv.appendChild(wkLabel)
|
||||
|
||||
// days grid container to host cells and overlay
|
||||
const daysGrid = document.createElement('div')
|
||||
daysGrid.className = 'days-grid'
|
||||
daysGrid.style.position = 'relative'
|
||||
daysGrid.style.display = 'grid'
|
||||
daysGrid.style.gridTemplateColumns = 'repeat(7, 1fr)'
|
||||
daysGrid.style.gridAutoRows = '1fr'
|
||||
daysGrid.style.height = '100%'
|
||||
daysGrid.style.width = '100%'
|
||||
weekDiv.appendChild(daysGrid)
|
||||
|
||||
// overlay positioned above cells, same 7-col grid
|
||||
const overlay = document.createElement('div')
|
||||
overlay.className = 'week-overlay'
|
||||
overlay.style.position = 'absolute'
|
||||
overlay.style.inset = '0'
|
||||
overlay.style.pointerEvents = 'none'
|
||||
overlay.style.display = 'grid'
|
||||
overlay.style.gridTemplateColumns = 'repeat(7, 1fr)'
|
||||
overlay.style.gridAutoRows = '1fr'
|
||||
overlay.style.zIndex = '15'
|
||||
daysGrid.appendChild(overlay)
|
||||
weekDiv._overlay = overlay
|
||||
weekDiv._daysGrid = daysGrid
|
||||
|
||||
const cur = new Date(monday)
|
||||
let hasFirst = false
|
||||
let monthToLabel = null
|
||||
@ -326,30 +331,30 @@ class InfiniteCalendar {
|
||||
labelYear = cur.getFullYear()
|
||||
}
|
||||
|
||||
const day = document.createElement('h1')
|
||||
day.textContent = String(cur.getDate())
|
||||
const day = document.createElement('h1')
|
||||
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)
|
||||
console.log(cur, date)
|
||||
cell.dataset.date = date
|
||||
if (this.today && date === this.today) cell.classList.add('today')
|
||||
|
||||
if (this.config.select_days > 0) {
|
||||
// Allow selection start from anywhere in the cell
|
||||
cell.addEventListener('mousedown', e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.startDrag(dateStr)
|
||||
})
|
||||
|
||||
// Touch events for mobile support
|
||||
cell.addEventListener('touchstart', e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.startDrag(dateStr)
|
||||
})
|
||||
|
||||
// Keep cell listeners for drag continuation
|
||||
cell.addEventListener('mouseenter', () => {
|
||||
if (this.isDragging) this.updateDrag(dateStr)
|
||||
})
|
||||
@ -357,12 +362,9 @@ class InfiniteCalendar {
|
||||
e.stopPropagation()
|
||||
if (this.isDragging) this.endDrag(dateStr)
|
||||
})
|
||||
|
||||
// Touch drag continuation
|
||||
cell.addEventListener('touchmove', e => {
|
||||
if (this.isDragging) {
|
||||
e.preventDefault()
|
||||
// Get touch position and find the element underneath
|
||||
const touch = e.touches[0]
|
||||
const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY)
|
||||
if (elementBelow && elementBelow.closest('.cell[data-date]')) {
|
||||
@ -372,7 +374,6 @@ class InfiniteCalendar {
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
cell.addEventListener('touchend', e => {
|
||||
e.stopPropagation()
|
||||
if (this.isDragging) this.endDrag(dateStr)
|
||||
@ -385,7 +386,7 @@ class InfiniteCalendar {
|
||||
}
|
||||
|
||||
cell.appendChild(day)
|
||||
weekDiv.appendChild(cell)
|
||||
daysGrid.appendChild(cell)
|
||||
cur.setDate(cur.getDate() + 1)
|
||||
}
|
||||
|
||||
@ -414,7 +415,7 @@ class InfiniteCalendar {
|
||||
|
||||
const label = document.createElement('span')
|
||||
const year = String((labelYear ?? monday.getFullYear())).slice(-2)
|
||||
label.textContent = `${this.getLocalizedMonthName(monthToLabel)} '${year}`
|
||||
label.textContent = `${getLocalizedMonthName(monthToLabel)} '${year}`
|
||||
overlayCell.appendChild(label)
|
||||
weekDiv.appendChild(overlayCell)
|
||||
weekDiv.style.zIndex = '18'
|
||||
@ -461,31 +462,17 @@ class InfiniteCalendar {
|
||||
|
||||
// -------- Selection --------
|
||||
|
||||
daysInclusive(aStr, bStr) {
|
||||
const a = fromLocalString(aStr)
|
||||
const b = fromLocalString(bStr)
|
||||
const A = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime()
|
||||
const B = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime()
|
||||
return Math.floor(Math.abs(B - A) / DAY_MS) + 1
|
||||
}
|
||||
|
||||
addDaysStr(str, n) {
|
||||
const d = fromLocalString(str)
|
||||
d.setDate(d.getDate() + n)
|
||||
return toLocalString(d)
|
||||
}
|
||||
|
||||
clampRange(anchorStr, otherStr) {
|
||||
if (this.config.select_days <= 1) return [otherStr, otherStr]
|
||||
const limit = this.config.select_days
|
||||
const forward = fromLocalString(otherStr) >= fromLocalString(anchorStr)
|
||||
const span = this.daysInclusive(anchorStr, otherStr)
|
||||
const span = daysInclusive(anchorStr, otherStr)
|
||||
if (span <= limit) {
|
||||
const a = [anchorStr, otherStr].sort()
|
||||
return [a[0], a[1]]
|
||||
}
|
||||
if (forward) return [anchorStr, this.addDaysStr(anchorStr, limit - 1)]
|
||||
return [this.addDaysStr(anchorStr, -(limit - 1)), anchorStr]
|
||||
if (forward) return [anchorStr, addDaysStr(anchorStr, limit - 1)]
|
||||
return [addDaysStr(anchorStr, -(limit - 1)), anchorStr]
|
||||
}
|
||||
|
||||
setSelection(aStr, bStr) {
|
||||
@ -493,7 +480,7 @@ class InfiniteCalendar {
|
||||
this.selStart = start
|
||||
this.selEnd = end
|
||||
this.applySelectionToVisible()
|
||||
this.selectedDateInput.value = this.formatDateRange(fromLocalString(start), fromLocalString(end))
|
||||
this.selectedDateInput.value = formatDateRange(fromLocalString(start), fromLocalString(end))
|
||||
}
|
||||
|
||||
clearSelection() {
|
||||
@ -520,33 +507,17 @@ class InfiniteCalendar {
|
||||
}
|
||||
}
|
||||
|
||||
formatDateRange(startDate, endDate) {
|
||||
if (toLocalString(startDate) === toLocalString(endDate)) return toLocalString(startDate)
|
||||
const startISO = toLocalString(startDate)
|
||||
const endISO = toLocalString(endDate)
|
||||
const [sy, sm] = startISO.split('-')
|
||||
const [ey, em, ed] = endISO.split('-')
|
||||
if (sy === ey && sm === em) return `${startISO}/${ed}`
|
||||
if (sy === ey) return `${startISO}/${em}-${ed}`
|
||||
return `${startISO}/${endISO}`
|
||||
}
|
||||
|
||||
setupGlobalDragHandlers() {
|
||||
// Mouse drag handlers
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (!this.isDragging) return
|
||||
this.isDragging = false
|
||||
document.body.style.cursor = 'default'
|
||||
})
|
||||
|
||||
// Touch drag handlers
|
||||
document.addEventListener('touchend', () => {
|
||||
if (!this.isDragging) return
|
||||
this.isDragging = false
|
||||
document.body.style.cursor = 'default'
|
||||
})
|
||||
|
||||
// Global touch move handler for smooth drag across elements
|
||||
document.addEventListener('touchmove', e => {
|
||||
if (!this.isDragging) return
|
||||
e.preventDefault()
|
||||
@ -558,13 +529,9 @@ class InfiniteCalendar {
|
||||
if (touchDateStr) this.updateDrag(touchDateStr)
|
||||
}
|
||||
}, { passive: false })
|
||||
|
||||
// Prevent text selection during drag
|
||||
document.addEventListener('selectstart', e => {
|
||||
if (this.isDragging) e.preventDefault()
|
||||
})
|
||||
|
||||
// Prevent context menu on long touch during drag
|
||||
document.addEventListener('contextmenu', e => {
|
||||
if (this.isDragging) e.preventDefault()
|
||||
})
|
||||
@ -588,12 +555,415 @@ class InfiniteCalendar {
|
||||
this.isDragging = false
|
||||
this.setSelection(this.dragAnchor, dateStr)
|
||||
document.body.style.cursor = 'default'
|
||||
if (this.selStart && this.selEnd) {
|
||||
setTimeout(() => this.showEventDialog('create'), 50)
|
||||
}
|
||||
}
|
||||
|
||||
// -------- Event Management (overlay-based) --------
|
||||
|
||||
// Build dialog DOM once
|
||||
setupEventDialog() {
|
||||
const tpl = document.createElement('template')
|
||||
tpl.innerHTML = `
|
||||
<div class="ec-modal-backdrop" part="backdrop" hidden>
|
||||
<div class="ec-modal" role="dialog" aria-modal="true" aria-labelledby="ec-modal-title">
|
||||
<form class="ec-form" novalidate>
|
||||
<header class="ec-header">
|
||||
<h2 id="ec-modal-title">Event</h2>
|
||||
</header>
|
||||
<div class="ec-body">
|
||||
<label class="ec-field">
|
||||
<span>Title</span>
|
||||
<input type="text" name="title" autocomplete="off" required />
|
||||
</label>
|
||||
<div class="ec-row">
|
||||
<label class="ec-field">
|
||||
<span>Start day</span>
|
||||
<input type="date" name="startDate" />
|
||||
</label>
|
||||
<label class="ec-field">
|
||||
<span>Duration</span>
|
||||
<select name="duration">
|
||||
<option value="15">15 minutes</option>
|
||||
<option value="30">30 minutes</option>
|
||||
<option value="45">45 minutes</option>
|
||||
<option value="60" selected>1 hour</option>
|
||||
<option value="90">1.5 hours</option>
|
||||
<option value="120">2 hours</option>
|
||||
<option value="180">3 hours</option>
|
||||
<option value="240">4 hours</option>
|
||||
<option value="480">8 hours</option>
|
||||
<option value="720">12 hours</option>
|
||||
<option value="1440">Full day</option>
|
||||
<option value="2880">2 days</option>
|
||||
<option value="4320">3 days</option>
|
||||
<option value="10080">7 days</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ec-row ec-time-row">
|
||||
<label class="ec-field">
|
||||
<span>Start time</span>
|
||||
<input type="time" name="startTime" step="300" />
|
||||
</label>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="ec-color-swatches">
|
||||
${Array.from({ length: 8 }, (_, i) => `
|
||||
<input class="swatch event-color-${i}" type="radio" name="colorId" value="${i}">
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<footer class="ec-footer">
|
||||
<button type="button" class="ec-btn" data-action="cancel">Cancel</button>
|
||||
<button type="submit" class="ec-btn primary">Save</button>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
document.body.appendChild(tpl.content)
|
||||
this.eventModal = document.querySelector('.ec-modal-backdrop')
|
||||
this.eventForm = this.eventModal.querySelector('form.ec-form')
|
||||
this.eventTitleInput = this.eventForm.elements['title']
|
||||
this.eventStartDateInput = this.eventForm.elements['startDate']
|
||||
this.eventStartTimeInput = this.eventForm.elements['startTime']
|
||||
this.eventDurationInput = this.eventForm.elements['duration']
|
||||
this.eventTimeRow = this.eventForm.querySelector('.ec-time-row')
|
||||
this.eventColorInputs = Array.from(this.eventForm.querySelectorAll('input[name="colorId"]'))
|
||||
// duration change toggles time visibility
|
||||
this.eventDurationInput.addEventListener('change', () => this.updateTimeVisibilityByDuration())
|
||||
// color selection visual state
|
||||
this.eventColorInputs.forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
const swatches = this.eventForm.querySelectorAll('.ec-color-swatches .swatch')
|
||||
swatches.forEach(s => s.classList.toggle('selected', s.checked))
|
||||
})
|
||||
})
|
||||
|
||||
this.eventForm.addEventListener('submit', e => {
|
||||
e.preventDefault()
|
||||
const data = this.readEventForm()
|
||||
if (!data.title.trim()) return
|
||||
if (this._dialogMode === 'create') {
|
||||
const computed = this.computeDatesFromForm(data)
|
||||
this.createEvent({
|
||||
title: data.title.trim(),
|
||||
startDate: computed.startDate,
|
||||
endDate: computed.endDate,
|
||||
colorId: data.colorId,
|
||||
startTime: data.startTime,
|
||||
durationMinutes: data.duration
|
||||
})
|
||||
this.clearSelection()
|
||||
} else if (this._dialogMode === 'edit' && this._editingEventId != null) {
|
||||
const computed = this.computeDatesFromForm(data)
|
||||
this.applyEventEdit(this._editingEventId, { ...data, ...computed })
|
||||
}
|
||||
this.hideEventDialog()
|
||||
})
|
||||
|
||||
this.eventForm.querySelector('[data-action="cancel"]').addEventListener('click', () => {
|
||||
this.hideEventDialog()
|
||||
if (this._dialogMode === 'create') this.clearSelection()
|
||||
})
|
||||
|
||||
this.eventModal.addEventListener('click', e => {
|
||||
if (e.target === this.eventModal) this.hideEventDialog()
|
||||
})
|
||||
document.addEventListener('keydown', e => {
|
||||
if (this.eventModal.hidden) return
|
||||
if (e.key === 'Escape') {
|
||||
this.hideEventDialog()
|
||||
if (this._dialogMode === 'create') this.clearSelection()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
showEventDialog(mode, opts = {}) {
|
||||
this._dialogMode = mode
|
||||
this._editingEventId = null
|
||||
|
||||
if (mode === 'create') {
|
||||
// Defaults for new event
|
||||
this.eventTitleInput.value = ''
|
||||
this.eventStartTimeInput.value = '09:00'
|
||||
// start date defaults
|
||||
this.eventStartDateInput.value = this.selStart || toLocalString(new Date())
|
||||
// duration defaults from selection (full days) or 60 min
|
||||
if (this.selStart && this.selEnd) {
|
||||
const days = daysInclusive(this.selStart, this.selEnd)
|
||||
this.setDurationValue(days * 1440)
|
||||
} else {
|
||||
this.setDurationValue(60)
|
||||
}
|
||||
// suggest least-used color across range
|
||||
const suggested = this.selectEventColorId(this.selStart, this.selEnd)
|
||||
this.eventColorInputs.forEach(r => r.checked = Number(r.value) === suggested)
|
||||
this.updateTimeVisibilityByDuration()
|
||||
} else if (mode === 'edit') {
|
||||
const ev = this.getEventById(opts.id)
|
||||
if (!ev) return
|
||||
this._editingEventId = ev.id
|
||||
this.eventTitleInput.value = ev.title || ''
|
||||
this.eventStartDateInput.value = ev.startDate
|
||||
if (ev.startDate !== ev.endDate) {
|
||||
const days = daysInclusive(ev.startDate, ev.endDate)
|
||||
this.setDurationValue(days * 1440)
|
||||
} else {
|
||||
this.setDurationValue(ev.durationMinutes || 60)
|
||||
}
|
||||
this.eventStartTimeInput.value = ev.startTime || '09:00'
|
||||
this.eventColorInputs.forEach(r => r.checked = Number(r.value) === (ev.colorId ?? 0))
|
||||
this.updateTimeVisibilityByDuration()
|
||||
}
|
||||
this.eventModal.hidden = false
|
||||
// simple focus
|
||||
setTimeout(() => this.eventTitleInput.focus(), 0)
|
||||
}
|
||||
|
||||
toggleTimeRow(show) {
|
||||
if (!this.eventTimeRow) return
|
||||
this.eventTimeRow.style.display = show ? '' : 'none'
|
||||
}
|
||||
|
||||
updateTimeVisibilityByDuration() {
|
||||
const minutes = Number(this.eventDurationInput.value || 0)
|
||||
const isFullDayOrMore = minutes >= 1440
|
||||
this.toggleTimeRow(!isFullDayOrMore)
|
||||
}
|
||||
|
||||
hideEventDialog() {
|
||||
this.eventModal.hidden = true
|
||||
}
|
||||
|
||||
readEventForm() {
|
||||
const colorId = Number(this.eventForm.querySelector('input[name="colorId"]:checked')?.value ?? 0)
|
||||
const timeRowVisible = this.eventTimeRow && this.eventTimeRow.style.display !== 'none'
|
||||
return {
|
||||
title: this.eventTitleInput.value,
|
||||
startDate: this.eventStartDateInput.value,
|
||||
startTime: timeRowVisible ? (this.eventStartTimeInput.value || '09:00') : null,
|
||||
duration: timeRowVisible ? Math.max(15, Number(this.eventDurationInput.value) || 60) : null,
|
||||
colorId
|
||||
}
|
||||
}
|
||||
|
||||
setDurationValue(minutes) {
|
||||
const v = String(minutes)
|
||||
const exists = Array.from(this.eventDurationInput.options).some(o => o.value === v)
|
||||
if (!exists) {
|
||||
const opt = document.createElement('option')
|
||||
opt.value = v
|
||||
const days = Math.floor(minutes / 1440)
|
||||
opt.textContent = days >= 1 ? `${days} day${days > 1 ? 's' : ''}` : `${minutes} minutes`
|
||||
this.eventDurationInput.appendChild(opt)
|
||||
}
|
||||
this.eventDurationInput.value = v
|
||||
}
|
||||
|
||||
computeDatesFromForm(data) {
|
||||
const minutes = Number(this.eventDurationInput.value || 0)
|
||||
if (minutes >= 1440) {
|
||||
const days = Math.max(1, Math.floor(minutes / 1440))
|
||||
return { startDate: data.startDate, endDate: addDaysStr(data.startDate, days - 1) }
|
||||
}
|
||||
return { startDate: data.startDate, endDate: data.startDate }
|
||||
}
|
||||
|
||||
createEvent(eventData) {
|
||||
const singleDay = eventData.startDate === eventData.endDate
|
||||
const event = {
|
||||
id: this.eventIdCounter++,
|
||||
title: eventData.title,
|
||||
startDate: eventData.startDate,
|
||||
endDate: eventData.endDate,
|
||||
colorId: eventData.colorId ?? this.selectEventColorId(eventData.startDate, eventData.endDate),
|
||||
startTime: singleDay ? (eventData.startTime || '09:00') : null,
|
||||
durationMinutes: singleDay ? (eventData.durationMinutes || 60) : null
|
||||
}
|
||||
|
||||
const startDate = new Date(fromLocalString(event.startDate))
|
||||
const endDate = new Date(fromLocalString(event.endDate))
|
||||
|
||||
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
|
||||
const dateStr = toLocalString(d)
|
||||
if (!this.events.has(dateStr)) this.events.set(dateStr, [])
|
||||
this.events.get(dateStr).push({ ...event, isSpanning: startDate < endDate })
|
||||
}
|
||||
|
||||
this.refreshEvents()
|
||||
}
|
||||
|
||||
applyEventEdit(eventId, data) {
|
||||
// Update all instances of this event across dates
|
||||
for (const [, list] of this.events) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].id === eventId) {
|
||||
const isMulti = list[i].startDate !== list[i].endDate
|
||||
list[i] = {
|
||||
...list[i],
|
||||
title: data.title.trim(),
|
||||
colorId: data.colorId,
|
||||
startTime: isMulti ? null : data.startTime,
|
||||
durationMinutes: isMulti ? null : data.duration
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.refreshEvents()
|
||||
}
|
||||
|
||||
getEventById(id) {
|
||||
for (const [, list] of this.events) {
|
||||
const found = list.find(e => e.id === id)
|
||||
if (found) return found
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
selectEventColorId(startDateStr, endDateStr) {
|
||||
// Count frequency of each color used on the date range
|
||||
const colorCounts = [0, 0, 0, 0, 0, 0, 0, 0]
|
||||
const startDate = new Date(fromLocalString(startDateStr))
|
||||
const endDate = new Date(fromLocalString(endDateStr))
|
||||
|
||||
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
|
||||
const dateStr = toLocalString(d)
|
||||
const dayEvents = this.events.get(dateStr) || []
|
||||
for (const event of dayEvents) {
|
||||
if (event.colorId >= 0 && event.colorId < 8) {
|
||||
colorCounts[event.colorId]++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Find the color with the lowest count
|
||||
// For equal counts, prefer the lowest color number
|
||||
let minCount = colorCounts[0]
|
||||
let selectedColor = 0
|
||||
|
||||
for (let colorId = 1; colorId < 8; colorId++) {
|
||||
if (colorCounts[colorId] < minCount) {
|
||||
minCount = colorCounts[colorId]
|
||||
selectedColor = colorId
|
||||
}
|
||||
}
|
||||
|
||||
return selectedColor
|
||||
}
|
||||
|
||||
refreshEvents() {
|
||||
for (const [, weekEl] of this.visibleWeeks) {
|
||||
this.addEventsToWeek(weekEl)
|
||||
}
|
||||
}
|
||||
|
||||
addEventsToWeek(weekEl) {
|
||||
const daysGrid = weekEl._daysGrid || weekEl.querySelector('.days-grid')
|
||||
const overlay = weekEl._overlay || weekEl.querySelector('.week-overlay')
|
||||
if (!daysGrid || !overlay) return
|
||||
|
||||
const cells = Array.from(daysGrid.querySelectorAll('.cell[data-date]'))
|
||||
|
||||
while (overlay.firstChild) overlay.removeChild(overlay.firstChild)
|
||||
|
||||
const weekEvents = new Map()
|
||||
for (const cell of cells) {
|
||||
const dateStr = cell.dataset.date
|
||||
const events = this.events.get(dateStr) || []
|
||||
for (const ev of events) {
|
||||
if (!weekEvents.has(ev.id)) {
|
||||
weekEvents.set(ev.id, {
|
||||
...ev,
|
||||
startDateInWeek: dateStr,
|
||||
endDateInWeek: dateStr,
|
||||
startIdx: cells.indexOf(cell),
|
||||
endIdx: cells.indexOf(cell)
|
||||
})
|
||||
} else {
|
||||
const w = weekEvents.get(ev.id)
|
||||
w.endDateInWeek = dateStr
|
||||
w.endIdx = cells.indexOf(cell)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const timeToMin = t => {
|
||||
if (typeof t !== 'string') return 1e9
|
||||
const m = t.match(/^(\d{2}):(\d{2})/)
|
||||
if (!m) return 1e9
|
||||
return Number(m[1]) * 60 + Number(m[2])
|
||||
}
|
||||
|
||||
const spans = Array.from(weekEvents.values()).sort((a, b) => {
|
||||
if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx
|
||||
// Prefer longer spans to be placed first for packing
|
||||
const aLen = a.endIdx - a.startIdx
|
||||
const bLen = b.endIdx - b.startIdx
|
||||
if (aLen !== bLen) return bLen - aLen
|
||||
// Within the same day and same span length, order by start time
|
||||
const at = timeToMin(a.startTime)
|
||||
const bt = timeToMin(b.startTime)
|
||||
if (at !== bt) return at - bt
|
||||
// Stable fallback by id
|
||||
return (a.id || 0) - (b.id || 0)
|
||||
})
|
||||
|
||||
const rowsLastEnd = []
|
||||
for (const w of spans) {
|
||||
let placedRow = 0
|
||||
while (placedRow < rowsLastEnd.length && !(w.startIdx > rowsLastEnd[placedRow])) placedRow++
|
||||
if (placedRow === rowsLastEnd.length) rowsLastEnd.push(-1)
|
||||
rowsLastEnd[placedRow] = w.endIdx
|
||||
w._row = placedRow + 1
|
||||
}
|
||||
|
||||
const numRows = Math.max(1, rowsLastEnd.length)
|
||||
|
||||
// Decide between "comfortable" layout (with gaps, not stretched)
|
||||
// and "compressed" layout (fractional rows, no gaps) based on fit.
|
||||
const cs = getComputedStyle(overlay)
|
||||
const overlayHeight = overlay.getBoundingClientRect().height
|
||||
const marginTopPx = parseFloat(cs.marginTop) || 0
|
||||
const available = Math.max(0, overlayHeight - marginTopPx)
|
||||
const baseEm = parseFloat(cs.fontSize) || 16
|
||||
const rowPx = 1.2 * baseEm // preferred row height ~ 1.2em
|
||||
const gapPx = 0.2 * baseEm // preferred gap ~ .2em
|
||||
const needed = numRows * rowPx + (numRows - 1) * gapPx
|
||||
|
||||
if (needed <= available) {
|
||||
// Comfortable: keep gaps and do not stretch rows to fill
|
||||
overlay.style.gridTemplateRows = `repeat(${numRows}, ${rowPx}px)`
|
||||
overlay.style.rowGap = `${gapPx}px`
|
||||
} else {
|
||||
// Compressed: use fractional rows so everything fits; remove gaps
|
||||
overlay.style.gridTemplateRows = `repeat(${numRows}, 1fr)`
|
||||
overlay.style.rowGap = '0'
|
||||
}
|
||||
|
||||
// Create the spans
|
||||
for (const w of spans) this.createOverlaySpan(overlay, w)
|
||||
}
|
||||
|
||||
createOverlaySpan(overlay, w) {
|
||||
const span = document.createElement('div')
|
||||
span.className = `event-span event-color-${w.colorId}`
|
||||
span.style.gridColumn = `${w.startIdx + 1} / ${w.endIdx + 2}`
|
||||
span.style.gridRow = `${w._row}`
|
||||
span.textContent = w.title
|
||||
span.title = `${w.title} (${w.startDate === w.endDate ? w.startDate : w.startDate + ' - ' + w.endDate})`
|
||||
span.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
this.showEventDialog('edit', { id: w.id })
|
||||
})
|
||||
overlay.appendChild(span)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new InfiniteCalendar({
|
||||
select_days: 14
|
||||
select_days: 1000
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
43
cells.css
Normal file
43
cells.css
Normal file
@ -0,0 +1,43 @@
|
||||
/* Day cells */
|
||||
.dow { text-transform: uppercase }
|
||||
.cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: .25em;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: var(--cell-h);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease;
|
||||
}
|
||||
.cell h1 {
|
||||
top: .25em;
|
||||
right: .25em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: background-color .15s ease;
|
||||
font-size: 1em;
|
||||
}
|
||||
.cell .lunar-phase {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: .25em;
|
||||
left: 50%;
|
||||
}
|
||||
.cell.today h1 {
|
||||
border-radius: 2em;
|
||||
background: var(--today);
|
||||
border: .2em solid var(--today);
|
||||
margin: -.2em;
|
||||
}
|
||||
.cell:hover h1 { text-shadow: 0 0 .2em var(--shadow); }
|
||||
|
||||
/* Fixed heights for cells and labels */
|
||||
.week-row .cell, .week-row .week-label { height: var(--cell-h) }
|
||||
|
||||
.weekend { color: var(--weekend) }
|
||||
.firstday { color: var(--firstday); text-shadow: 0 0 .1em var(--strong); }
|
||||
77
colors.css
Normal file
77
colors.css
Normal file
@ -0,0 +1,77 @@
|
||||
/* Color tokens */
|
||||
:root {
|
||||
--panel: #fff;
|
||||
--today: #f83;
|
||||
--ink: #222;
|
||||
--strong: #000;
|
||||
--muted: #888;
|
||||
--weekend: #888;
|
||||
--firstday: #000;
|
||||
--select: #aaf;
|
||||
--shadow: #fff;
|
||||
--label-bg: #fafbfe;
|
||||
--label-bg-rgb: 250, 251, 254;
|
||||
}
|
||||
|
||||
/* Month tints (light) */
|
||||
.dec { background: hsl(220 50% 95%) }
|
||||
.jan { background: hsl(220 50% 92%) }
|
||||
.feb { background: hsl(220 50% 95%) }
|
||||
.mar { background: hsl(125 60% 92%) }
|
||||
.apr { background: hsl(125 60% 95%) }
|
||||
.may { background: hsl(125 60% 92%) }
|
||||
.jun { background: hsl(45 85% 95%) }
|
||||
.jul { background: hsl(45 85% 92%) }
|
||||
.aug { background: hsl(45 85% 95%) }
|
||||
.sep { background: hsl(18 78% 92%) }
|
||||
.oct { background: hsl(18 78% 95%) }
|
||||
.nov { background: hsl(18 78% 92%) }
|
||||
|
||||
/* Light mode — gray shades and colors */
|
||||
.event-color-0 { background: hsl(0, 0%, 85%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 75%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 65%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 55%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 80%, 70%) } /* red */
|
||||
.event-color-5 { background: hsl(40, 80%, 70%) } /* orange */
|
||||
.event-color-6 { background: hsl(200, 80%, 70%) } /* green */
|
||||
.event-color-7 { background: hsl(280, 80%, 70%) } /* purple */
|
||||
|
||||
/* Color tokens (dark) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--panel: #111318;
|
||||
--today: #f83;
|
||||
--ink: #ddd;
|
||||
--strong: #fff;
|
||||
--muted: #888;
|
||||
--weekend: #999;
|
||||
--firstday: #fff;
|
||||
--select: #22a;
|
||||
--shadow: #888;
|
||||
--label-bg: #1a1d25;
|
||||
--label-bg-rgb: 26, 29, 37;
|
||||
}
|
||||
|
||||
.dec { background: hsl(220 50% 8%) }
|
||||
.jan { background: hsl(220 50% 6%) }
|
||||
.feb { background: hsl(220 50% 8%) }
|
||||
.mar { background: hsl(125 60% 6%) }
|
||||
.apr { background: hsl(125 60% 8%) }
|
||||
.may { background: hsl(125 60% 6%) }
|
||||
.jun { background: hsl(45 85% 8%) }
|
||||
.jul { background: hsl(45 85% 6%) }
|
||||
.aug { background: hsl(45 85% 8%) }
|
||||
.sep { background: hsl(18 78% 6%) }
|
||||
.oct { background: hsl(18 78% 8%) }
|
||||
.nov { background: hsl(18 78% 6%) }
|
||||
|
||||
.event-color-0 { background: hsl(0, 0%, 20%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 30%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 40%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 50%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 70%, 50%) } /* red */
|
||||
.event-color-5 { background: hsl(40, 70%, 50%) } /* orange */
|
||||
.event-color-6 { background: hsl(200, 70%, 50%) } /* green */
|
||||
.event-color-7 { background: hsl(280, 70%, 50%) } /* purple */
|
||||
}
|
||||
169
date-utils.js
Normal file
169
date-utils.js
Normal file
@ -0,0 +1,169 @@
|
||||
// date-utils.js — Date handling utilities for the calendar
|
||||
const monthAbbr = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']
|
||||
const DAY_MS = 86400000
|
||||
const WEEK_MS = 7 * DAY_MS
|
||||
|
||||
/**
|
||||
* Get ISO week information for a given date
|
||||
* @param {Date} date - The date to get week info for
|
||||
* @returns {Object} Object containing week number and year
|
||||
*/
|
||||
const isoWeekInfo = date => {
|
||||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
|
||||
const day = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - day)
|
||||
const year = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(year, 0, 1))
|
||||
const diffDays = Math.floor((d - yearStart) / DAY_MS) + 1
|
||||
return { week: Math.ceil(diffDays / 7), year }
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a Date object to a local date string (YYYY-MM-DD format)
|
||||
* @param {Date} date - The date to convert (defaults to new Date())
|
||||
* @returns {string} Date string in YYYY-MM-DD format
|
||||
*/
|
||||
function toLocalString(date = new Date()) {
|
||||
const pad = n => String(Math.floor(Math.abs(n))).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a local date string (YYYY-MM-DD) to a Date object
|
||||
* @param {string} dateString - Date string in YYYY-MM-DD format
|
||||
* @returns {Date} Date object
|
||||
*/
|
||||
function fromLocalString(dateString) {
|
||||
const [year, month, day] = dateString.split('-').map(Number)
|
||||
return new Date(year, month - 1, day)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of Monday for a given date (0-6, where Monday = 0)
|
||||
* @param {Date} d - The date
|
||||
* @returns {number} Monday index (0-6)
|
||||
*/
|
||||
const mondayIndex = d => (d.getDay() + 6) % 7
|
||||
|
||||
/**
|
||||
* Pad a number with leading zeros to make it 2 digits
|
||||
* @param {number} n - Number to pad
|
||||
* @returns {string} Padded string
|
||||
*/
|
||||
const pad = n => String(n).padStart(2, '0')
|
||||
|
||||
/**
|
||||
* Calculate number of days between two date strings (inclusive)
|
||||
* @param {string} aStr - First date string (YYYY-MM-DD)
|
||||
* @param {string} bStr - Second date string (YYYY-MM-DD)
|
||||
* @returns {number} Number of days inclusive
|
||||
*/
|
||||
function daysInclusive(aStr, bStr) {
|
||||
const a = fromLocalString(aStr)
|
||||
const b = fromLocalString(bStr)
|
||||
const A = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime()
|
||||
const B = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime()
|
||||
return Math.floor(Math.abs(B - A) / DAY_MS) + 1
|
||||
}
|
||||
|
||||
/**
|
||||
* Add days to a date string
|
||||
* @param {string} str - Date string in YYYY-MM-DD format
|
||||
* @param {number} n - Number of days to add (can be negative)
|
||||
* @returns {string} New date string
|
||||
*/
|
||||
function addDaysStr(str, n) {
|
||||
const d = fromLocalString(str)
|
||||
d.setDate(d.getDate() + n)
|
||||
return toLocalString(d)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get localized weekday names starting from Monday
|
||||
* @returns {Array<string>} Array of localized weekday names
|
||||
*/
|
||||
function getLocalizedWeekdayNames() {
|
||||
const res = []
|
||||
const base = new Date(2025, 0, 6) // A Monday
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(base)
|
||||
d.setDate(base.getDate() + i)
|
||||
res.push(d.toLocaleDateString(undefined, { weekday: 'short' }))
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
/**
|
||||
* Get localized month name
|
||||
* @param {number} idx - Month index (0-11)
|
||||
* @param {boolean} short - Whether to return short name
|
||||
* @returns {string} Localized month name
|
||||
*/
|
||||
function getLocalizedMonthName(idx, short = false) {
|
||||
const d = new Date(2025, idx, 1)
|
||||
return d.toLocaleDateString(undefined, { month: short ? 'short' : 'long' })
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a date range for display
|
||||
* @param {Date} startDate - Start date
|
||||
* @param {Date} endDate - End date
|
||||
* @returns {string} Formatted date range string
|
||||
*/
|
||||
function formatDateRange(startDate, endDate) {
|
||||
if (toLocalString(startDate) === toLocalString(endDate)) return toLocalString(startDate)
|
||||
const startISO = toLocalString(startDate)
|
||||
const endISO = toLocalString(endDate)
|
||||
const [sy, sm] = startISO.split('-')
|
||||
const [ey, em, ed] = endISO.split('-')
|
||||
if (sy === ey && sm === em) return `${startISO}/${ed}`
|
||||
if (sy === ey) return `${startISO}/${em}-${ed}`
|
||||
return `${startISO}/${endISO}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute lunar phase symbol for the four main phases on a given date.
|
||||
* Returns one of: 🌑 (new), 🌓 (first quarter), 🌕 (full), 🌗 (last quarter), or '' otherwise.
|
||||
* Uses an approximate algorithm with a fixed epoch.
|
||||
*/
|
||||
function lunarPhaseSymbol(date) {
|
||||
// Reference new moon: 2000-01-06 18:14 UTC (J2000 era), often used in approximations
|
||||
const ref = Date.UTC(2000, 0, 6, 18, 14, 0)
|
||||
const synodic = 29.530588853 // days
|
||||
// Use UTC noon of given date to reduce timezone edge effects
|
||||
const dUTC = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0)
|
||||
const daysSince = (dUTC - ref) / DAY_MS
|
||||
const phase = ((daysSince / synodic) % 1 + 1) % 1
|
||||
const phases = [
|
||||
{ t: 0.0, s: '🌑' }, // New Moon
|
||||
{ t: 0.25, s: '🌓' }, // First Quarter
|
||||
{ t: 0.5, s: '🌕' }, // Full Moon
|
||||
{ t: 0.75, s: '🌗' } // Last Quarter
|
||||
]
|
||||
// threshold in days from exact phase to still count for this date
|
||||
const thresholdDays = 0.5 // ±12 hours
|
||||
for (const p of phases) {
|
||||
let delta = Math.abs(phase - p.t)
|
||||
if (delta > 0.5) delta = 1 - delta
|
||||
if (delta * synodic <= thresholdDays) return p.s
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// Export all functions and constants
|
||||
export {
|
||||
monthAbbr,
|
||||
DAY_MS,
|
||||
WEEK_MS,
|
||||
isoWeekInfo,
|
||||
toLocalString,
|
||||
fromLocalString,
|
||||
mondayIndex,
|
||||
pad,
|
||||
daysInclusive,
|
||||
addDaysStr,
|
||||
getLocalizedWeekdayNames,
|
||||
getLocalizedMonthName,
|
||||
formatDateRange
|
||||
,lunarPhaseSymbol
|
||||
}
|
||||
26
events.css
Normal file
26
events.css
Normal file
@ -0,0 +1,26 @@
|
||||
.event-span {
|
||||
font-size: clamp(.45em, 1.8vh, .75em);
|
||||
padding: 0 .5em;
|
||||
border-radius: .4em;
|
||||
color: var(--strong);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1; /* let the track height define the visual height */
|
||||
height: 100%; /* fill the grid row height */
|
||||
align-self: stretch; /* fill row vertically */
|
||||
justify-self: stretch; /* stretch across chosen grid columns */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto; /* clickable despite overlay having none */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Selection styles */
|
||||
.cell.selected {
|
||||
background: var(--select);
|
||||
box-shadow: 0 0 .1em var(--muted) inset;
|
||||
}
|
||||
.cell.selected .event { opacity: .7 }
|
||||
@ -11,7 +11,7 @@
|
||||
<header>
|
||||
<h1 id="title">Calendar</h1>
|
||||
<div class="header-controls">
|
||||
<label>Selection: <input type="text" id="selected-date" class="date-input" readonly></label>
|
||||
<input type="text" id="selected-date" class="date-input" readonly>
|
||||
<div id="today-date" class="today-date"></div>
|
||||
</div>
|
||||
</header>
|
||||
@ -24,6 +24,6 @@
|
||||
<div class="jogwheel-content" id="jogwheel-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="calendar.js"></script>
|
||||
<script type="module" src="calendar.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
167
layout.css
Normal file
167
layout.css
Normal file
@ -0,0 +1,167 @@
|
||||
/* Layout variables */
|
||||
:root {
|
||||
/* Layout */
|
||||
--row-h: 2.2em;
|
||||
--label-w: minmax(4em, 8%);
|
||||
--cell-w: 1fr;
|
||||
--cell-h: clamp(4em, 8vh, 8em);
|
||||
--overlay-w: minmax(3rem, 5%);
|
||||
}
|
||||
|
||||
/* Layout & typography */
|
||||
* { box-sizing: border-box }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: var(--panel);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: .75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.today-date { cursor: pointer }
|
||||
.today-date::first-line { color: var(--today) }
|
||||
.today-button:hover { opacity: .8 }
|
||||
|
||||
/* Header row */
|
||||
.calendar-header, #calendar-header {
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
|
||||
border-bottom: .2em solid var(--muted);
|
||||
align-items: last baseline;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Main container */
|
||||
.calendar-container, #calendar-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Viewports (support id or class) */
|
||||
.calendar-viewport, #calendar-viewport {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.calendar-viewport::-webkit-scrollbar,
|
||||
#calendar-viewport::-webkit-scrollbar { display: none }
|
||||
|
||||
.jogwheel-viewport, #jogwheel-viewport {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0;
|
||||
width: var(--overlay-w);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
z-index: 20;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.jogwheel-viewport::-webkit-scrollbar,
|
||||
#jogwheel-viewport::-webkit-scrollbar { display: none }
|
||||
|
||||
.jogwheel-content, #jogwheel-content { position: relative; width: 100% }
|
||||
.calendar-content, #calendar-content { position: relative }
|
||||
|
||||
/* Week row: label + 7-day grid + jogwheel column */
|
||||
.week-row {
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
height: var(--cell-h);
|
||||
scroll-snap-align: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Label cells */
|
||||
.year-label, .week-label {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
color: var(--muted);
|
||||
cursor: ns-resize;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.week-label {
|
||||
height: var(--cell-h);
|
||||
}
|
||||
/* 7-day grid inside each week row */
|
||||
.week-row > .days-grid {
|
||||
grid-column: 2 / span 7;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Overlay sitting above the day cells, same 7-col grid */
|
||||
.week-row > .days-grid > .week-overlay {
|
||||
margin-top: 1.5em;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
row-gap: 0; /* eliminate gaps so space is fully usable */
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.month-name-label {
|
||||
grid-column: -2 / -1;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
z-index: 15;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.month-name-label > span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
59
utilities.css
Normal file
59
utilities.css
Normal file
@ -0,0 +1,59 @@
|
||||
/* Prevent text selection in calendar */
|
||||
#calendar-viewport, #calendar-content, .week-row, .cell,
|
||||
.calendar-header, .week-label, .month-name-label,
|
||||
.calendar-container, .jogwheel-viewport, .jogwheel-content {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ink);
|
||||
width: 11em;
|
||||
}
|
||||
label:has(input[value]) { display: block }
|
||||
|
||||
/* Modal dialog */
|
||||
.ec-modal-backdrop[hidden] { display: none }
|
||||
.ec-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: color-mix(in srgb, var(--strong) 30%, transparent);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.ec-modal {
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
border-radius: .6rem;
|
||||
min-width: 320px;
|
||||
max-width: min(520px, 90vw);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
}
|
||||
.ec-form { padding: 1rem; display: grid; gap: .75rem }
|
||||
.ec-header h2 { margin: 0; font-size: 1.1rem }
|
||||
.ec-body { display: grid; gap: .75rem }
|
||||
.ec-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem }
|
||||
.ec-field { display: grid; gap: .25rem }
|
||||
.ec-field > span { font-size: .85em; color: var(--muted) }
|
||||
.ec-field input[type="text"],
|
||||
.ec-field input[type="time"],
|
||||
.ec-field input[type="number"] {
|
||||
border: 1px solid var(--muted);
|
||||
border-radius: .4rem;
|
||||
padding: .5rem .6rem;
|
||||
width: 100%;
|
||||
}
|
||||
.ec-color-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem }
|
||||
.ec-color-swatches .swatch { display: grid; place-items: center; border-radius: .4rem; padding: .25rem; outline: 2px solid transparent; outline-offset: 2px; cursor: pointer }
|
||||
.ec-color-swatches .swatch { appearance: none; width: 3em; height: 1em; }
|
||||
.ec-color-swatches .swatch:checked { outline-color: var(--ink) }
|
||||
.ec-footer { display: flex; justify-content: end; gap: .5rem }
|
||||
.ec-btn { border: 1px solid var(--muted); background: transparent; color: var(--ink); padding: .5rem .8rem; border-radius: .4rem; cursor: pointer }
|
||||
.ec-btn.primary { background: var(--today); color: #000; border-color: transparent }
|
||||
Loading…
x
Reference in New Issue
Block a user