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

FIxed

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-20 14:12:22 -06:00
parent 99b2d1a176
commit 3b075e68e8
2 changed files with 217 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
calendar.css
View File

@ -11,6 +11,13 @@
--select: #aaf; --select: #aaf;
--label-bg: #fafbfe; --label-bg: #fafbfe;
--label-bg-rgb: 250, 251, 254; --label-bg-rgb: 250, 251, 254;
/* Layout */
--row-h: 2.2em;
--label-w: minmax(4em, 8%);
--cell-w: 1fr;
--cell-h: clamp(4em, 8vh, 8em);
--overlay-w: minmax(3rem, 5%);
} }
/* Prevent text selection in calendar */ /* Prevent text selection in calendar */
@ -26,18 +33,18 @@
} }
/* Month tints (light) */ /* Month tints (light) */
.cell.dec { background: hsl(220 20% 95%) } .dec { background: hsl(220 20% 95%) }
.cell.jan { background: hsl(220 20% 88%) } .jan { background: hsl(220 20% 88%) }
.cell.feb { background: hsl(220 20% 95%) } .feb { background: hsl(220 20% 95%) }
.cell.mar { background: hsl(125 60% 88%) } .mar { background: hsl(125 60% 88%) }
.cell.apr { background: hsl(125 60% 95%) } .apr { background: hsl(125 60% 95%) }
.cell.may { background: hsl(125 60% 88%) } .may { background: hsl(125 60% 88%) }
.cell.jun { background: hsl(45 85% 95%) } .jun { background: hsl(45 85% 95%) }
.cell.jul { background: hsl(45 85% 88%) } .jul { background: hsl(45 85% 88%) }
.cell.aug { background: hsl(45 85% 95%) } .aug { background: hsl(45 85% 95%) }
.cell.sep { background: hsl(18 78% 88%) } .sep { background: hsl(18 78% 88%) }
.cell.oct { background: hsl(18 78% 95%) } .oct { background: hsl(18 78% 95%) }
.cell.nov { background: hsl(18 78% 88%) } .nov { background: hsl(18 78% 88%) }
/* Color tokens (dark) */ /* Color tokens (dark) */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -56,29 +63,21 @@
} }
/* Month tints (dark) */ /* Month tints (dark) */
.cell.dec { background: hsl(220 20% 22%) } .dec { background: hsl(220 20% 22%) }
.cell.jan { background: hsl(220 20% 16%) } .jan { background: hsl(220 20% 16%) }
.cell.feb { background: hsl(220 20% 22%) } .feb { background: hsl(220 20% 22%) }
.cell.mar { background: hsl(125 40% 18%) } .mar { background: hsl(125 40% 18%) }
.cell.apr { background: hsl(125 40% 26%) } .apr { background: hsl(125 40% 26%) }
.cell.may { background: hsl(125 40% 18%) } .may { background: hsl(125 40% 18%) }
.cell.jun { background: hsl(45 70% 24%) } .jun { background: hsl(45 70% 24%) }
.cell.jul { background: hsl(45 70% 18%) } .jul { background: hsl(45 70% 18%) }
.cell.aug { background: hsl(45 70% 24%) } .aug { background: hsl(45 70% 24%) }
.cell.sep { background: hsl(18 70% 18%) } .sep { background: hsl(18 70% 18%) }
.cell.oct { background: hsl(18 70% 26%) } .oct { background: hsl(18 70% 26%) }
.cell.nov { background: hsl(18 70% 18%) } .nov { background: hsl(18 70% 18%) }
} }
/* Layout & typography */ /* Layout & typography */
:root {
--row-h: 2.2em;
--label-w: minmax(4em, 8%);
--cell-w: 1fr;
--cell-h: clamp(4em, 8vh, 8em);
--overlay-w: minmax(3rem, 5%);
}
* { box-sizing: border-box } * { box-sizing: border-box }
body { body {
@ -113,15 +112,12 @@ header {
gap: .75rem; gap: .75rem;
} }
.today-date { .today-date { cursor: pointer }
cursor: pointer; .today-date::first-line { color: var(--today) }
}
.today-date::first-line {
color: var(--today);
}
.today-button:hover { opacity: .8 } .today-button:hover { opacity: .8 }
.calendar-header { /* Header row */
.calendar-header, #calendar-header {
display: grid; display: grid;
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w); grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
border-bottom: .1em solid var(--muted); border-bottom: .1em solid var(--muted);
@ -129,8 +125,11 @@ header {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
} }
.calendar-header .dow-label { display:grid; place-items:center; height: var(--cell-h); color: var(--muted) }
.overlay-header-spacer { grid-column: -2 / -1 }
.calendar-container { /* Main container */
.calendar-container, #calendar-container {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -138,7 +137,8 @@ header {
display: flex; display: flex;
} }
.calendar-viewport { /* Viewports (support id or class) */
.calendar-viewport, #calendar-viewport {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -146,13 +146,12 @@ header {
width: 100%; width: 100%;
scrollbar-width: none; scrollbar-width: none;
} }
.calendar-viewport::-webkit-scrollbar { display: none } .calendar-viewport::-webkit-scrollbar,
#calendar-viewport::-webkit-scrollbar { display: none }
.jogwheel-viewport { .jogwheel-viewport, #jogwheel-viewport {
position: absolute; position: absolute;
top: 0; top: 0; right: 0; bottom: 0;
right: 0;
bottom: 0;
width: var(--overlay-w); width: var(--overlay-w);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -160,12 +159,13 @@ header {
z-index: 20; z-index: 20;
cursor: ns-resize; cursor: ns-resize;
} }
.jogwheel-viewport::-webkit-scrollbar { display: none } .jogwheel-viewport::-webkit-scrollbar,
#jogwheel-viewport::-webkit-scrollbar { display: none }
.jogwheel-content { position: relative; width: 100% } .jogwheel-content, #jogwheel-content { position: relative; width: 100% }
.calendar-content, #calendar-content { position: relative }
.calendar-content { position: relative }
/* Week row: label + 7-day grid + jogwheel column */
.week-row { .week-row {
display: grid; display: grid;
grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w); grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
@ -176,14 +176,8 @@ header {
width: 100%; width: 100%;
} }
/* Fixed heights for cells and labels */ /* Label cells */
.week-row .cell, .dow-label, .week-label {
.week-row .week-label { height: var(--cell-h) }
header h1 { margin: 0; font-size: 1rem }
.dow-label,
.week-label {
display: grid; display: grid;
place-items: center; place-items: center;
width: 100%; width: 100%;
@ -193,14 +187,38 @@ header h1 { margin: 0; font-size: 1rem }
font-size: 1.2em; font-size: 1.2em;
} }
.dow { text-transform: uppercase; } /* 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.2em;
position: absolute;
inset: 0;
pointer-events: none;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 1fr;
z-index: 15;
}
/* Day cells */
.dow { text-transform: uppercase }
.cell { .cell {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
padding: 0.25em; padding: .25em;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: var(--cell-h); height: var(--cell-h);
@ -208,110 +226,83 @@ header h1 { margin: 0; font-size: 1rem }
cursor: pointer; cursor: pointer;
transition: background-color .15s ease; transition: background-color .15s ease;
} }
.cell h1 { .cell h1 {
position: absolute; top: .25em;
top: 0.25em; right: .25em;
right: 0.25em;
padding: 0; padding: 0;
margin: 0; margin: 0;
transition: background-color .15s ease; transition: background-color .15s ease;
font-size: 1em; font-size: 1em;
z-index: 10;
} }
.cell:hover h1 { text-shadow: 0 0 .2em; } .cell:hover h1 { text-shadow: 0 0 .2em }
/* Event styles */ /* Fixed heights for cells and labels */
.week-row .cell, .week-row .week-label { height: var(--cell-h) }
/* Event (per-cell, if used) */
.event { .event {
font-size: 0.75em; font-size: .75em;
padding: 0.1em 0.3em; padding: .1em .3em;
margin: 0.1em 0; margin: .1em 0;
border-radius: 0.2em; border-radius: .2em;
color: white; color: white;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
max-width: calc(100% - 0.5em); max-width: calc(100% - .5em);
line-height: 1.2; line-height: 1.2;
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
} }
.event:hover { opacity: .8 }
.event:hover { /* Spanning events in the overlay (grid-positioned, not absolutely measured) */
opacity: 0.8;
}
/* Spanning event styles */
.event-span { .event-span {
font-size: 0.75em; font-size: .75em;
padding: 0.1em 0.3em; padding: 0 .5em;
border-radius: 0.2em; border-radius: .4em;
color: white; color: white;
font-weight: 500; font-weight: 600;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.2; line-height: 1.2;
cursor: pointer; height: 1.2em;
transition: opacity 0.15s ease; align-self: center; /* vertically center within the overlay row */
justify-self: stretch; /* stretch across chosen grid columns */
/* Calculate position and width using CSS variables and custom properties */ pointer-events: auto; /* clickable despite overlay having none */
left: calc(var(--label-w) + var(--start-day) * (100% - var(--label-w) - var(--overlay-w)) / 7); z-index: 1;
width: calc(var(--span-days) * (100% - var(--label-w) - var(--overlay-w)) / 7);
}
.event-span:hover {
opacity: 0.8;
}
.event-more {
font-size: 0.7em;
color: var(--muted);
font-style: italic;
margin-top: 0.1em;
} }
/* Selection styles */ /* Selection styles */
.weekend { color: var(--weekend) } .weekend { color: var(--weekend) }
.firstday { color: var(--firstday); text-shadow: 0 0 .1em rgba(var(--ink-rgb), .5) } .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 { input {
background: transparent; background: transparent;
border: none; border: none;
color: var(--ink); color: var(--ink);
width: 11em; width: 11em;
} }
label:has(input[value]) { label:has(input[value]) { display: block }
display: block;
}
.selected { .selected {
background: var(--select) !important; background: var(--select);
border: 2px solid rgba(var(--ink-rgb), 0.3); border: 2px solid rgba(var(--ink-rgb), .3);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
} }
.selected h1, .selected .event { opacity: .7 }
:is(.range-start,.range-end,.range-middle,.range-single) h1 {
background: transparent !important; .today h1 {
color: var(--panel) !important; border-radius: 2em;
font-weight: 700; background: var(--today);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border: .2em solid var(--today);
margin: -.2em;
} }
/* Ensure events don't interfere with selection visibility */
.selected .event {
opacity: 0.7;
}
/* Month labels in jogwheel column */
.month-name-label { .month-name-label {
grid-column: -2 / -1; grid-column: -2 / -1;
font-size: 2em; font-size: 2em;
@ -324,11 +315,9 @@ label:has(input[value]) {
z-index: 15; z-index: 15;
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 0; top: 0; right: 0;
right: 0;
width: 100%; width: 100%;
} }
.month-name-label > span { .month-name-label > span {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;

186
calendar.js
View File

@ -1,4 +1,4 @@
// calendar.js — Infinite scrolling week-by-week // calendar.js — Infinite scrolling week-by-week with overlay event rendering
const monthAbbr = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'] const monthAbbr = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']
const DAY_MS = 86400000 const DAY_MS = 86400000
const WEEK_MS = 7 * DAY_MS const WEEK_MS = 7 * DAY_MS
@ -53,10 +53,10 @@ class InfiniteCalendar {
this.baseDate = new Date(2024, 0, 1) // 2024 begins with Monday this.baseDate = new Date(2024, 0, 1) // 2024 begins with Monday
// unified selection state (single or range) // unified selection state (single or range)
this.selStart = null // 'YYYY-MM-DD' this.selStart = null
this.selEnd = null // 'YYYY-MM-DD' this.selEnd = null
this.isDragging = false this.isDragging = false
this.dragAnchor = null // 'YYYY-MM-DD' this.dragAnchor = null
this.init() this.init()
} }
@ -283,8 +283,6 @@ class InfiniteCalendar {
weekEl.style.height = `${this.rowHeight}px` weekEl.style.height = `${this.rowHeight}px`
this.content.appendChild(weekEl) this.content.appendChild(weekEl)
this.visibleWeeks.set(vw, weekEl) this.visibleWeeks.set(vw, weekEl)
// Add events to the newly created week
this.addEventsToWeek(weekEl, vw) this.addEventsToWeek(weekEl, vw)
} }
@ -309,6 +307,31 @@ class InfiniteCalendar {
wkLabel.textContent = `W${pad(isoWeekInfo(monday).week)}` wkLabel.textContent = `W${pad(isoWeekInfo(monday).week)}`
weekDiv.appendChild(wkLabel) 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) const cur = new Date(monday)
let hasFirst = false let hasFirst = false
let monthToLabel = null let monthToLabel = null
@ -337,26 +360,20 @@ class InfiniteCalendar {
day.textContent = String(cur.getDate()) day.textContent = String(cur.getDate())
const date = toLocalString(cur) const date = toLocalString(cur)
console.log(cur, date)
cell.dataset.date = date cell.dataset.date = date
if (this.today && date === this.today) cell.classList.add('today') if (this.today && date === this.today) cell.classList.add('today')
if (this.config.select_days > 0) { if (this.config.select_days > 0) {
// Allow selection start from anywhere in the cell
cell.addEventListener('mousedown', e => { cell.addEventListener('mousedown', e => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
this.startDrag(dateStr) this.startDrag(dateStr)
}) })
// Touch events for mobile support
cell.addEventListener('touchstart', e => { cell.addEventListener('touchstart', e => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
this.startDrag(dateStr) this.startDrag(dateStr)
}) })
// Keep cell listeners for drag continuation
cell.addEventListener('mouseenter', () => { cell.addEventListener('mouseenter', () => {
if (this.isDragging) this.updateDrag(dateStr) if (this.isDragging) this.updateDrag(dateStr)
}) })
@ -364,12 +381,9 @@ class InfiniteCalendar {
e.stopPropagation() e.stopPropagation()
if (this.isDragging) this.endDrag(dateStr) if (this.isDragging) this.endDrag(dateStr)
}) })
// Touch drag continuation
cell.addEventListener('touchmove', e => { cell.addEventListener('touchmove', e => {
if (this.isDragging) { if (this.isDragging) {
e.preventDefault() e.preventDefault()
// Get touch position and find the element underneath
const touch = e.touches[0] const touch = e.touches[0]
const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY) const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY)
if (elementBelow && elementBelow.closest('.cell[data-date]')) { if (elementBelow && elementBelow.closest('.cell[data-date]')) {
@ -379,7 +393,6 @@ class InfiniteCalendar {
} }
} }
}) })
cell.addEventListener('touchend', e => { cell.addEventListener('touchend', e => {
e.stopPropagation() e.stopPropagation()
if (this.isDragging) this.endDrag(dateStr) if (this.isDragging) this.endDrag(dateStr)
@ -392,7 +405,7 @@ class InfiniteCalendar {
} }
cell.appendChild(day) cell.appendChild(day)
weekDiv.appendChild(cell) daysGrid.appendChild(cell)
cur.setDate(cur.getDate() + 1) cur.setDate(cur.getDate() + 1)
} }
@ -539,21 +552,16 @@ class InfiniteCalendar {
} }
setupGlobalDragHandlers() { setupGlobalDragHandlers() {
// Mouse drag handlers
document.addEventListener('mouseup', () => { document.addEventListener('mouseup', () => {
if (!this.isDragging) return if (!this.isDragging) return
this.isDragging = false this.isDragging = false
document.body.style.cursor = 'default' document.body.style.cursor = 'default'
}) })
// Touch drag handlers
document.addEventListener('touchend', () => { document.addEventListener('touchend', () => {
if (!this.isDragging) return if (!this.isDragging) return
this.isDragging = false this.isDragging = false
document.body.style.cursor = 'default' document.body.style.cursor = 'default'
}) })
// Global touch move handler for smooth drag across elements
document.addEventListener('touchmove', e => { document.addEventListener('touchmove', e => {
if (!this.isDragging) return if (!this.isDragging) return
e.preventDefault() e.preventDefault()
@ -565,13 +573,9 @@ class InfiniteCalendar {
if (touchDateStr) this.updateDrag(touchDateStr) if (touchDateStr) this.updateDrag(touchDateStr)
} }
}, { passive: false }) }, { passive: false })
// Prevent text selection during drag
document.addEventListener('selectstart', e => { document.addEventListener('selectstart', e => {
if (this.isDragging) e.preventDefault() if (this.isDragging) e.preventDefault()
}) })
// Prevent context menu on long touch during drag
document.addEventListener('contextmenu', e => { document.addEventListener('contextmenu', e => {
if (this.isDragging) e.preventDefault() if (this.isDragging) e.preventDefault()
}) })
@ -595,14 +599,12 @@ class InfiniteCalendar {
this.isDragging = false this.isDragging = false
this.setSelection(this.dragAnchor, dateStr) this.setSelection(this.dragAnchor, dateStr)
document.body.style.cursor = 'default' document.body.style.cursor = 'default'
// Trigger event creation after selection with a small delay
if (this.selStart && this.selEnd) { if (this.selStart && this.selEnd) {
setTimeout(() => this.promptForEvent(), 100) setTimeout(() => this.promptForEvent(), 100)
} }
} }
// -------- Event Management -------- // -------- Event Management (overlay-based) --------
promptForEvent() { promptForEvent() {
const title = prompt('Enter event title:') const title = prompt('Enter event title:')
@ -610,13 +612,11 @@ class InfiniteCalendar {
this.clearSelection() this.clearSelection()
return return
} }
this.createEvent({ this.createEvent({
title: title.trim(), title: title.trim(),
startDate: this.selStart, startDate: this.selStart,
endDate: this.selEnd endDate: this.selEnd
}) })
this.clearSelection() this.clearSelection()
} }
@ -629,19 +629,15 @@ class InfiniteCalendar {
color: this.generateEventColor() color: this.generateEventColor()
} }
// Add event to all dates in the range
const startDate = new Date(fromLocalString(event.startDate)) const startDate = new Date(fromLocalString(event.startDate))
const endDate = new Date(fromLocalString(event.endDate)) const endDate = new Date(fromLocalString(event.endDate))
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
const dateStr = toLocalString(d) const dateStr = toLocalString(d)
if (!this.events.has(dateStr)) { if (!this.events.has(dateStr)) this.events.set(dateStr, [])
this.events.set(dateStr, [])
}
this.events.get(dateStr).push({ ...event, isSpanning: startDate < endDate }) this.events.get(dateStr).push({ ...event, isSpanning: startDate < endDate })
} }
// Re-render visible weeks to show the new event
this.refreshEvents() this.refreshEvents()
} }
@ -654,89 +650,80 @@ class InfiniteCalendar {
} }
refreshEvents() { refreshEvents() {
// Re-render events for all visible weeks for (const [, weekEl] of this.visibleWeeks) {
for (const [weekDateStr, weekEl] of this.visibleWeeks) { this.addEventsToWeek(weekEl)
this.addEventsToWeek(weekEl, weekDateStr)
} }
} }
addEventsToWeek(weekEl, weekDateStr) { addEventsToWeek(weekEl) {
const cells = weekEl.querySelectorAll('.cell[data-date]') const daysGrid = weekEl._daysGrid || weekEl.querySelector('.days-grid')
const overlay = weekEl._overlay || weekEl.querySelector('.week-overlay')
if (!daysGrid || !overlay) return
// Remove existing event elements from both week and individual cells const cells = Array.from(daysGrid.querySelectorAll('.cell[data-date]'))
weekEl.querySelectorAll('.event-span').forEach(el => el.remove())
cells.forEach(cell => {
cell.querySelectorAll('.event-span').forEach(el => el.remove())
})
// Group events by their date ranges within this week while (overlay.firstChild) overlay.removeChild(overlay.firstChild)
const weekEvents = new Map() // Map of event ID to event info
const weekEvents = new Map()
for (const cell of cells) { for (const cell of cells) {
const dateStr = cell.dataset.date const dateStr = cell.dataset.date
const events = this.events.get(dateStr) || [] const events = this.events.get(dateStr) || []
for (const ev of events) {
events.forEach(event => { if (!weekEvents.has(ev.id)) {
if (!weekEvents.has(event.id)) { weekEvents.set(ev.id, {
weekEvents.set(event.id, { ...ev,
...event,
startDateInWeek: dateStr, startDateInWeek: dateStr,
endDateInWeek: dateStr, endDateInWeek: dateStr,
startCell: cell, startIdx: cells.indexOf(cell),
endCell: cell, endIdx: cells.indexOf(cell)
daysInWeek: 1
}) })
} else { } else {
const weekEvent = weekEvents.get(event.id) const w = weekEvents.get(ev.id)
weekEvent.endDateInWeek = dateStr w.endDateInWeek = dateStr
weekEvent.endCell = cell w.endIdx = cells.indexOf(cell)
weekEvent.daysInWeek++ }
} }
})
} }
// Create spanning elements for each event const spans = Array.from(weekEvents.values())
weekEvents.forEach((weekEvent, eventId) => { .sort((a, b) => a.startIdx - b.startIdx || (b.endIdx - b.startIdx) - (a.endIdx - a.startIdx))
this.createSpanningEvent(weekEl, weekEvent)
}) 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
} }
createSpanningEvent(weekEl, weekEvent) { overlay.style.gridTemplateRows = `repeat(${Math.max(1, rowsLastEnd.length)}, 1fr)`
const spanEl = document.createElement('div') overlay.style.rowGap = '.2em'
spanEl.className = 'event-span'
spanEl.style.backgroundColor = weekEvent.color
spanEl.textContent = weekEvent.title
spanEl.title = `${weekEvent.title} (${weekEvent.startDate === weekEvent.endDate ? weekEvent.startDate : weekEvent.startDate + ' - ' + weekEvent.endDate})`
// Get all cells in the week (excluding week label and overlay) for (const w of spans) this.createOverlaySpan(overlay, w)
const cells = Array.from(weekEl.querySelectorAll('.cell[data-date]')) }
const startCellIndex = cells.indexOf(weekEvent.startCell)
const endCellIndex = cells.indexOf(weekEvent.endCell)
const spanDays = endCellIndex - startCellIndex + 1
// Use CSS custom properties for positioning createOverlaySpan(overlay, w) {
spanEl.style.setProperty('--start-day', startCellIndex) const span = document.createElement('div')
spanEl.style.setProperty('--span-days', spanDays) span.className = 'event-span'
span.style.gridColumn = `${w.startIdx + 1} / ${w.endIdx + 2}`
// Style the spanning event span.style.gridRow = `${w._row}`
spanEl.style.position = 'absolute' span.style.height = '1.2em'
spanEl.style.top = '0.25em' span.style.borderRadius = '.4em'
spanEl.style.height = '1.2em' span.style.fontSize = '.75em'
spanEl.style.zIndex = '15' span.style.lineHeight = '1.2'
spanEl.style.fontSize = '0.75em' span.style.padding = '0 .5em'
spanEl.style.padding = '0.1em 0.3em' span.style.whiteSpace = 'nowrap'
spanEl.style.borderRadius = '0.2em' span.style.overflow = 'hidden'
spanEl.style.color = 'white' span.style.textOverflow = 'ellipsis'
spanEl.style.fontWeight = '500' span.style.background = w.color
spanEl.style.whiteSpace = 'nowrap' span.style.color = 'white'
spanEl.style.overflow = 'hidden' span.style.fontWeight = '600'
spanEl.style.textOverflow = 'ellipsis' span.style.pointerEvents = 'auto'
spanEl.style.cursor = 'pointer' span.style.zIndex = '1'
spanEl.style.lineHeight = '1.2' span.textContent = w.title
spanEl.style.pointerEvents = 'auto' span.title = `${w.title} (${w.startDate === w.endDate ? w.startDate : w.startDate + ' - ' + w.endDate})`
overlay.appendChild(span)
// Append to the week element (not individual cells)
weekEl.appendChild(spanEl)
} }
} }
@ -745,4 +732,3 @@ document.addEventListener('DOMContentLoaded', () => {
select_days: 14 select_days: 14
}) })
}) })