Cleanup, layout fixes, better event colors.

calendar.js

@@ -113,7 +113,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
@@ -125,7 +125,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) {
@@ -206,15 +206,15 @@ class InfiniteCalendar {
   }
 
   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()
     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
@@ -294,7 +294,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) {
@@ -626,7 +626,7 @@ class InfiniteCalendar {
       title: eventData.title,
       startDate: eventData.startDate,
       endDate: eventData.endDate,
-      color: this.generateEventColor()
+      colorId: this.generateEventColorId()
     }
 
     const startDate = new Date(fromLocalString(event.startDate))
@@ -641,12 +641,9 @@ class InfiniteCalendar {
     this.refreshEvents()
   }
 
-  generateEventColor() {
-    const colors = [
-      '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
-      '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43'
-    ]
-    return colors[Math.floor(Math.random() * colors.length)]
+  generateEventColorId() {
+    // Return a color ID from 0-11 for 12 evenly spaced hues
+    return Math.floor(Math.random() * 12)
   }
 
   refreshEvents() {
@@ -705,22 +702,9 @@ class InfiniteCalendar {
 
   createOverlaySpan(overlay, w) {
     const span = document.createElement('div')
-    span.className = 'event-span'
+    span.className = `event-span event-color-${w.colorId}`
     span.style.gridColumn = `${w.startIdx + 1} / ${w.endIdx + 2}`
     span.style.gridRow = `${w._row}`
-    span.style.height = '1.2em'
-    span.style.borderRadius = '.4em'
-    span.style.fontSize = '.75em'
-    span.style.lineHeight = '1.2'
-    span.style.padding = '0 .5em'
-    span.style.whiteSpace = 'nowrap'
-    span.style.overflow = 'hidden'
-    span.style.textOverflow = 'ellipsis'
-    span.style.background = w.color
-    span.style.color = 'white'
-    span.style.fontWeight = '600'
-    span.style.pointerEvents = 'auto'
-    span.style.zIndex = '1'
     span.textContent = w.title
     span.title = `${w.title} (${w.startDate === w.endDate ? w.startDate : w.startDate + ' - ' + w.endDate})`
     overlay.appendChild(span)