calendar/calendar.js

// calendar.js - Infinite scrolling week-by-week implementation
const monthAbbr = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']

const isoWeekNumber = 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 yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
  const diffDays = Math.floor((d - yearStart) / 86400000) + 1
  return Math.ceil(diffDays / 7)
}

const isoWeekYear = date => {
  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
  const day = d.getUTCDay() || 7
  d.setUTCDate(d.getUTCDate() + 4 - day)
  return d.getUTCFullYear()
}

const mondayIndex = d => (d.getDay() + 6) % 7

const pad = n => String(n).padStart(2, '0')

class InfiniteCalendar {
  constructor(config = {}) {
    // Configuration options
    this.config = {
      select_days: 0, // 0 = no selection, 1 = single selection, >1 = range selection up to N days
      min_year: 2010, // Minimum year that can be viewed
      max_year: 2030, // Maximum year that can be viewed
      ...config
    }
    
    // Configure which days are weekends (0=Sunday, 1=Monday, ..., 6=Saturday)
    // Array of 7 booleans, indexed by day of week (0-6)
    this.weekend = [true, false, false, false, false, false, true] // Sunday and Saturday
    
    this.viewport = document.getElementById('calendar-viewport')
    this.content = document.getElementById('calendar-content')
    this.header = document.getElementById('calendar-header')
    this.jogwheelViewport = document.getElementById('jogwheel-viewport')
    this.jogwheelContent = document.getElementById('jogwheel-content')
    this.todayButton = document.getElementById('go-to-today')
    this.selectedDateInput = document.getElementById('selected-date')
  // Keep JS in sync with CSS variable --week-row-h (4em). We'll compute in pixels at runtime.
  this.rowHeight = this.computeRowHeight()
    this.visibleWeeks = new Map()    // Start from a base date (many years ago) and calculate current week
    this.baseDate = new Date(1970, 0, 5) // First Monday of 1970
    this.currentDate = new Date()
    this.currentWeekIndex = this.getWeekIndex(this.currentDate)
    
    // Today's date for highlighting
    this.today = new Date()
    this.today.setHours(0, 0, 0, 0) // Normalize to start of day
    
    // Selected date tracking (only if selection is enabled)
    if (this.config.select_days > 0) {
      this.selectedDate = null
      this.selectedCell = null
      
      // Date range selection tracking (only if range selection is enabled)
      if (this.config.select_days > 1) {
        this.isDragging = false
        this.dragStartDate = null
        this.dragStartCell = null
        this.dragEndDate = null
        this.dragEndCell = null
        this.selectedRangeCells = new Set()
        this.isRangeInvalid = false
        this.constrainedStartDate = null
        this.constrainedEndDate = null
      }
    }
    
  this.init()
  }

  init() {
    this.createHeader()
    this.setupInitialView()
    this.setupScrollListener()
    this.setupJogwheel()
    this.setupTodayButton()
    this.setupSelectionInput()
    
    // Only setup selection functionality if enabled
    if (this.config.select_days > 1) {
      this.setupGlobalDragHandlers()
    }
  }

  computeRowHeight() {
    // Read computed value of CSS var --week-row-h. Fallback to 4em if unavailable.
    const temp = document.createElement('div')
    temp.style.position = 'absolute'
    temp.style.visibility = 'hidden'
    temp.style.height = 'var(--week-row-h, 4em)'
    document.body.appendChild(temp)
    const h = temp.getBoundingClientRect().height || 64 // approx 4em
    temp.remove()
    return Math.round(h)
  }

  getLocalizedWeekdayNames() {
    // Generate localized weekday abbreviations starting from Monday
    const weekdays = []
    // Create a date that starts on a Monday (January 6, 2025 is a Monday)
    const baseDate = new Date(2025, 0, 6) // Monday
    
    for (let i = 0; i < 7; i++) {
      const date = new Date(baseDate)
      date.setDate(baseDate.getDate() + i)
      // Get short weekday name (3 letters) in user's locale
      const dayName = date.toLocaleDateString(undefined, { weekday: 'short' })
      weekdays.push(dayName)
    }
    
    return weekdays
  }

  getLocalizedMonthName(monthIndex, short = false) {
    // Generate localized month name for given month index (0-11)
    const date = new Date(2025, monthIndex, 1)
    return date.toLocaleDateString(undefined, { 
      month: short ? 'short' : 'long' 
    })
  }

  createHeader() {
    // Create the fixed header with weekday names
    this.weekLabel = document.createElement('div')
    this.weekLabel.className = 'dow-label'
    this.weekLabel.textContent = isoWeekYear(new Date()) // Initialize with current ISO week year
    this.header.appendChild(this.weekLabel)
    
    // Get localized weekday names starting from Monday
    const localizedWeekdays = this.getLocalizedWeekdayNames()
    
    localizedWeekdays.forEach((d, i) => {
      const c = document.createElement('div')
      c.className = 'cell dow'
      
      // Apply weekend styling based on configuration
      // Monday is index 1 in JavaScript's getDay(), so we need to map correctly
      const dayOfWeekIndex = (i + 1) % 7 // Mon=1, Tue=2, ..., Sun=0
      if (this.weekend[dayOfWeekIndex]) {
        c.classList.add('weekend')
      }
      
      c.textContent = d
      this.header.appendChild(c)
    })

  // Add an empty header cell for the overlay column to align grids
  const overlayHeaderSpacer = document.createElement('div')
  overlayHeaderSpacer.className = 'overlay-header-spacer'
  this.header.appendChild(overlayHeaderSpacer)
  }

  getWeekIndex(date) {
    // Calculate week index from base date
    const timeDiff = date.getTime() - this.baseDate.getTime()
    return Math.floor(timeDiff / (7 * 24 * 60 * 60 * 1000))
  }

  getDateFromWeekIndex(weekIndex) {
    // Get the Monday of the week at given index
    const time = this.baseDate.getTime() + (weekIndex * 7 * 24 * 60 * 60 * 1000)
    return new Date(time)
  }

  getMondayForVirtualWeek(virtualWeek) {
    const monday = new Date(this.baseDate)
    monday.setDate(monday.getDate() + (virtualWeek * 7))
    return monday
  }

  isDateInAllowedRange(date) {
    // Check if a date falls within the configured min/max year range
    const year = date.getFullYear()
    return year >= this.config.min_year && year <= this.config.max_year
  }

  setupInitialView() {
  // Calculate virtual week limits based on configured min/max years
  const minYearDate = new Date(this.config.min_year, 0, 1) // January 1st of min year
  // End limit: Monday of the last week that contains a day in max_year (week containing Dec 31)
  const maxYearLastDay = new Date(this.config.max_year, 11, 31)
  const lastWeekMonday = new Date(maxYearLastDay)
  lastWeekMonday.setDate(maxYearLastDay.getDate() - mondayIndex(maxYearLastDay))
    
  this.minVirtualWeek = this.getWeekIndex(minYearDate)
  this.maxVirtualWeek = this.getWeekIndex(lastWeekMonday)
    
  // Calculate total range for DOM height (inclusive of last week)
  this.totalVirtualWeeks = (this.maxVirtualWeek - this.minVirtualWeek) + 1
    
    // Set content height for absolute positioning
    this.content.style.height = `${this.totalVirtualWeeks * this.rowHeight}px`
    
  // Setup jogwheel content height (10x smaller for 10x faster scrolling)
  this.jogwheelContent.style.height = `${this.totalVirtualWeeks * this.rowHeight / 10}px`
    
    // Anchor date: Monday of the current week
    this.mondayCurrent = new Date(this.currentDate)
    this.mondayCurrent.setDate(this.mondayCurrent.getDate() - mondayIndex(this.mondayCurrent))
    
    // Scroll to approximately current time
    // Current week index relative to min virtual week
    const currentWeekOffset = this.currentWeekIndex - this.minVirtualWeek
    const initialScrollPos = currentWeekOffset * this.rowHeight
    this.viewport.scrollTop = initialScrollPos
    // Normalize initial jogwheel position to match main scroll progress
    {
      const mainScrollable = Math.max(0, this.content.scrollHeight - this.viewport.clientHeight)
      const jogScrollable = Math.max(0, this.jogwheelContent.scrollHeight - this.jogwheelViewport.clientHeight)
      this.jogwheelViewport.scrollTop = mainScrollable > 0 ? (initialScrollPos / mainScrollable) * jogScrollable : 0
    }
    
    this.updateVisibleWeeks()
  }  setupScrollListener() {
    let scrollTimeout
    this.viewport.addEventListener('scroll', () => {
      // Immediate update for fast scrolling
      this.updateVisibleWeeks()
      
      // Also do a delayed update to catch any edge cases
      clearTimeout(scrollTimeout)
      scrollTimeout = setTimeout(() => {
        this.updateVisibleWeeks()
      }, 8) // Faster refresh rate
    })
  }

  updateVisibleWeeks() {
    const scrollTop = this.viewport.scrollTop
    const viewportHeight = this.viewport.clientHeight
    
    // Update year label based on top visible week
    this.updateYearLabel(scrollTop)
    
    // Calculate which virtual weeks should be visible with generous buffer
    const bufferWeeks = 10 // Increased buffer for fast scrolling
    const startDisplayIndex = Math.floor((scrollTop - bufferWeeks * this.rowHeight) / this.rowHeight)
    const endDisplayIndex = Math.ceil((scrollTop + viewportHeight + bufferWeeks * this.rowHeight) / this.rowHeight)
    
    // Convert display indices to actual virtual week indices
    const startVirtualWeek = Math.max(this.minVirtualWeek, startDisplayIndex + this.minVirtualWeek)
    const endVirtualWeek = Math.min(this.maxVirtualWeek, endDisplayIndex + this.minVirtualWeek)
    
    // Remove weeks that are no longer visible
    for (const [virtualWeek, element] of this.visibleWeeks) {
      if (virtualWeek < startVirtualWeek || virtualWeek > endVirtualWeek) {
        element.remove()
        this.visibleWeeks.delete(virtualWeek)
      }
    }
    
    // Add new visible weeks with precise positioning
    for (let virtualWeek = startVirtualWeek; virtualWeek <= endVirtualWeek; virtualWeek++) {
      if (!this.visibleWeeks.has(virtualWeek)) {
        const weekElement = this.createWeekElement(virtualWeek)
        weekElement.style.position = 'absolute'
        weekElement.style.left = '0'
        // Position based on offset from minVirtualWeek
        const displayIndex = virtualWeek - this.minVirtualWeek
        weekElement.style.top = `${displayIndex * this.rowHeight}px`
        weekElement.style.width = '100%'
        weekElement.style.height = `${this.rowHeight}px`
        this.content.appendChild(weekElement)
        this.visibleWeeks.set(virtualWeek, weekElement)
      }
    }

  // Month labels rendered per first-week only
  }

  updateYearLabel(scrollTop) {
    // Calculate which virtual week is at the top of the viewport
    const topDisplayIndex = Math.floor(scrollTop / this.rowHeight)
    const topVirtualWeek = topDisplayIndex + this.minVirtualWeek
    
    // Calculate actual date for this virtual week (direct offset from base date)
  const topWeekMonday = this.getMondayForVirtualWeek(topVirtualWeek)
    
    // Get the ISO week year of the top visible week (not calendar year)
    const topWeekYear = isoWeekYear(topWeekMonday)
    
    // Update the year label if it has changed
    if (this.weekLabel.textContent !== String(topWeekYear)) {
      this.weekLabel.textContent = topWeekYear
    }
  }

  createWeekElement(virtualWeek) {
    const weekDiv = document.createElement('div')
    weekDiv.className = 'week-row'
    // Calculate actual date for this virtual week (direct offset from base date)
  const monday = this.getMondayForVirtualWeek(virtualWeek)
    
    // Week label
    const wkLabel = document.createElement('div')
    wkLabel.className = 'week-label'
    const wk = isoWeekNumber(monday)
    wkLabel.textContent = `W${pad(wk)}`
    weekDiv.appendChild(wkLabel)
    
  // Create 7 day cells
    const cur = new Date(monday)
  let hasFirstOfMonth = false
  let monthToLabel = null
  let labelYear = null
    
    for (let i = 0; i < 7; i++) {
      const cell = document.createElement('div')
      cell.className = 'cell'
      
      const dow = cur.getDay()
      if (this.weekend[dow]) cell.classList.add('weekend')
      
      const m = cur.getMonth()
      // Use English month abbreviations for CSS classes to maintain styling compatibility
      cell.classList.add(monthAbbr[m])
      
      const isFirstOfMonth = cur.getDate() === 1
      if (isFirstOfMonth) {
        hasFirstOfMonth = true
        monthToLabel = m
        labelYear = cur.getFullYear()
      }
      
      const day = document.createElement('h1')
      day.textContent = String(cur.getDate())
      
      // Store the date for this cell
      const cellDate = new Date(cur)
      cellDate.setHours(0, 0, 0, 0)
      cell.dataset.date = cellDate.toISOString().split('T')[0] // Store ISO date
      
      // Check if this date is today
      if (cellDate.getTime() === this.today.getTime()) {
        cell.classList.add('today')
      }
      
      // Check if this date is selected (single or range) - only if selection enabled
      if (this.config.select_days > 0 && this.selectedDate && cellDate.getTime() === this.selectedDate.getTime()) {
        cell.classList.add('selected')
        this.selectedCell = cell
      }
      
      // Check if this date is part of a range selection - only if range selection enabled
      if (this.config.select_days > 1) {
        this.updateCellRangeStatus(cell, cellDate)
      }
      
      // Add selection event handlers only if selection is enabled
      if (this.config.select_days > 0) {
        // Add drag and click handlers to the entire cell for range selection
        if (this.config.select_days > 1) {
          cell.addEventListener('mousedown', (e) => {
            e.preventDefault()
            e.stopPropagation()
            this.startDrag(cellDate, cell, e)
          })
          
          cell.addEventListener('mouseenter', (e) => {
            if (this.isDragging) {
              this.updateDragSelection(cellDate, cell)
            }
          })
          
          cell.addEventListener('mouseup', (e) => {
            e.stopPropagation()
            if (this.isDragging) {
              this.endDrag(cellDate, cell)
            }
          })
        }
        
        // Add click handler for single selection (works for both single-only and range modes)
        day.addEventListener('click', (e) => {
          e.stopPropagation()
          // Only handle click if we're not in the middle of a drag operation (or drag is disabled)
          if (this.config.select_days === 1 || !this.isDragging) {
            this.selectDate(cellDate, cell)
          }
        })
      }
      
      if (isFirstOfMonth) {
        cell.classList.add("firstday")
        // Use English month abbreviation for display, but show year for January
        day.textContent = cur.getMonth() ? monthAbbr[m].slice(0,3).toUpperCase() : cur.getFullYear()
      }
      
      cell.appendChild(day)
      weekDiv.appendChild(cell)
      cur.setDate(cur.getDate() + 1)
    }
    // Add overlay label only on the first week of the month, spanning all month weeks
    if (hasFirstOfMonth && monthToLabel !== null) {
      // If the month to label starts beyond the configured max year, skip the overlay
      if (labelYear && labelYear > this.config.max_year) return weekDiv
      const overlayCell = document.createElement('div')
      overlayCell.className = 'month-name-label'
      // Compute exact number of weeks this month spans
      const d = new Date(cur)
      d.setDate(cur.getDate() - 1)  // Sunday of this week
      let weeksSpan = 0
      for (let i = 0; i < 6; i++) {
        d.setDate(cur.getDate() - 1 + i * 7)
        if (d.getMonth() === monthToLabel) weeksSpan++
      }
      // Clip overlay height so it doesn't extend past the max boundary
      const remainingWeeks = Math.max(1, this.maxVirtualWeek - virtualWeek + 1)
      weeksSpan = Math.max(1, Math.min(weeksSpan, remainingWeeks))
      // Positional styles are in CSS
      overlayCell.style.height = `${weeksSpan * this.rowHeight}px`
      overlayCell.style.display = 'flex'
      overlayCell.style.alignItems = 'center'
      overlayCell.style.justifyContent = 'center'
      overlayCell.style.zIndex = '15'
      overlayCell.style.pointerEvents = 'none'
      // Content for bottom-up readable text
      const label = document.createElement('span')
      const year = (labelYear ?? monday.getFullYear()).toString().substring(2) // Last two digits of year
      label.textContent = `${this.getLocalizedMonthName(monthToLabel)} '${year}`
      overlayCell.appendChild(label)
      weekDiv.appendChild(overlayCell)
      // Ensure this row (and its overlay) paint above subsequent rows
      weekDiv.style.zIndex = '18'
    }
    return weekDiv
  }



  setupJogwheel() {
    let isJogwheelScrolling = false
    let isMainScrolling = false
    
    // Jogwheel scroll affects main view (map by scroll progress ratio)
    this.jogwheelViewport.addEventListener('scroll', () => {
      if (isMainScrolling) return
      
      isJogwheelScrolling = true
      const jogScrollable = Math.max(0, this.jogwheelContent.scrollHeight - this.jogwheelViewport.clientHeight)
      const mainScrollable = Math.max(0, this.content.scrollHeight - this.viewport.clientHeight)
      const ratio = jogScrollable > 0 ? (this.jogwheelViewport.scrollTop / jogScrollable) : 0
      this.viewport.scrollTop = ratio * mainScrollable
      
      // Reset flag after a short delay
      setTimeout(() => {
        isJogwheelScrolling = false
      }, 50)
    })
    
    // Main view scroll updates jogwheel position (map by scroll progress ratio)
    this.viewport.addEventListener('scroll', () => {
      if (isJogwheelScrolling) return
      
      isMainScrolling = true
      const jogScrollable = Math.max(0, this.jogwheelContent.scrollHeight - this.jogwheelViewport.clientHeight)
      const mainScrollable = Math.max(0, this.content.scrollHeight - this.viewport.clientHeight)
      const ratio = mainScrollable > 0 ? (this.viewport.scrollTop / mainScrollable) : 0
      this.jogwheelViewport.scrollTop = ratio * jogScrollable
      
      // Reset flag after a short delay
      setTimeout(() => {
        isMainScrolling = false
      }, 50)
    })
  }

  setupTodayButton() {
    this.todayButton.addEventListener('click', () => {
      this.goToToday()
    })
  }

  setupSelectionInput() {
    if (this.config.select_days === 0) {
      // Hide the input when selection is disabled
      this.selectedDateInput.style.display = 'none'
    } else {
      // Show and style the input when selection is enabled
      this.selectedDateInput.style.display = 'block'
      this.selectedDateInput.classList.add('clean-input')
    }
  }

  goToToday() {
    // Check if today's date is within the allowed year range
    if (!this.isDateInAllowedRange(this.today)) {
      console.warn(`Today's date (${this.today.getFullYear()}) is outside the configured year range (${this.config.min_year}-${this.config.max_year})`)
      return
    }
    
    // Calculate the week index for today
    const todayWeekIndex = this.getWeekIndex(this.today)
    
    // Calculate scroll position for today's week
    const todayWeekOffset = todayWeekIndex - this.minVirtualWeek
    const targetScrollPos = todayWeekOffset * this.rowHeight
    
    // Smooth scroll to today's week
    this.viewport.scrollTo({
      top: targetScrollPos,
      behavior: 'smooth'
    })
    
    // Update jogwheel position
    this.jogwheelViewport.scrollTo({
      top: targetScrollPos / 10,
      behavior: 'smooth'
    })
  }

  selectDate(date, cell) {
    // Clear any existing range selection
    this.clearRangeSelection()
    
    // Remove previous single selection
    if (this.selectedCell) {
      this.selectedCell.classList.remove('selected')
    }
    
    // Set new selection
    this.selectedDate = new Date(date)
    this.selectedCell = cell
    cell.classList.add('selected')
    
    // Update input field with ISO format
    this.selectedDateInput.value = date.toISOString().split('T')[0]
  }

  setupGlobalDragHandlers() {
    // Handle mouse up anywhere to end drag
    document.addEventListener('mouseup', () => {
      if (this.isDragging) {
        this.isDragging = false
        // Reset cursor when drag ends
        document.body.style.cursor = 'default'
        // Don't clear selection here, let the specific mouseup handler manage it
      }
    })
    
    // Prevent text selection during drag
    document.addEventListener('selectstart', (e) => {
      if (this.isDragging) {
        e.preventDefault()
      }
    })
  }

  startDrag(date, cell, event) {
    this.isDragging = true
    this.dragStartDate = new Date(date)
    this.dragStartCell = cell
    this.dragEndDate = new Date(date)
    this.dragEndCell = cell
    
    // Clear any existing selections
    this.clearRangeSelection()
    if (this.selectedCell) {
      this.selectedCell.classList.remove('selected')
      this.selectedCell = null
      this.selectedDate = null
    }
    
    // Start with single selection
    this.updateRangeDisplay()
  }

  updateDragSelection(date, cell) {
    if (!this.isDragging) return
    
    this.dragEndDate = new Date(date)
    this.dragEndCell = cell
    
    // Calculate the potential range
    const originalStartDate = new Date(Math.min(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
    const originalEndDate = new Date(Math.max(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
    const originalDaysDiff = Math.ceil((originalEndDate - originalStartDate) / (24 * 60 * 60 * 1000)) + 1
    
    // Check if dragging backward from start point
    const isDraggingBackward = this.dragEndDate.getTime() < this.dragStartDate.getTime()
    
    // Always constrain the visual selection to allowed days
    let startDate, endDate
    if (isDraggingBackward) {
      // Dragging backward: keep drag start, limit how far back we can go
      const limitedStartDate = new Date(this.dragStartDate)
      limitedStartDate.setDate(this.dragStartDate.getDate() - this.config.select_days + 1)
      startDate = new Date(Math.max(limitedStartDate.getTime(), this.dragEndDate.getTime()))
      endDate = new Date(this.dragStartDate)
    } else {
      // Dragging forward: keep drag start, limit how far forward we can go
      startDate = new Date(this.dragStartDate)
      const limitedEndDate = new Date(this.dragStartDate)
      limitedEndDate.setDate(this.dragStartDate.getDate() + this.config.select_days - 1)
      endDate = new Date(Math.min(limitedEndDate.getTime(), this.dragEndDate.getTime()))
    }
    
    // Show not-allowed cursor only when trying to exceed the limit
    if (originalDaysDiff > this.config.select_days) {
      document.body.style.cursor = 'not-allowed'
      cell.style.cursor = 'not-allowed'
      this.isRangeInvalid = true
    } else {
      document.body.style.cursor = 'default'
      cell.style.cursor = 'pointer'
      this.isRangeInvalid = false
    }
    
    // Store the constrained range for display
    this.constrainedStartDate = startDate
    this.constrainedEndDate = endDate
    
    this.updateRangeDisplay()
  }

  endDrag(date, cell) {
    if (!this.isDragging) return
    
    this.isDragging = false
    this.dragEndDate = new Date(date)
    this.dragEndCell = cell
    
    // Reset cursor
    document.body.style.cursor = 'default'
    cell.style.cursor = 'pointer'
    
    // Clear constrained range
    this.constrainedStartDate = null
    this.constrainedEndDate = null
    
    // Determine if this is a single click or a range
    if (this.dragStartDate.getTime() === this.dragEndDate.getTime()) {
      // Single date selection
      this.selectDate(this.dragStartDate, this.dragStartCell)
    } else {
      // Check if range length is within limits
      const startDate = new Date(Math.min(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
      const endDate = new Date(Math.max(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
      const daysDiff = Math.ceil((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1
      
      if (daysDiff <= this.config.select_days) {
        // Range selection within limits - finalize the range
        this.finalizeRangeSelection()
      } else {
        // Range too long - clear all selection
        this.clearRangeSelection()
        this.clearSingleSelection()
        this.selectedDateInput.value = ''
      }
    }
  }

  clearRangeSelection() {
    // Remove range classes from all previously selected cells
    for (const cell of this.selectedRangeCells) {
      cell.classList.remove('range-start', 'range-end', 'range-middle', 'range-single')
    }
    this.selectedRangeCells.clear()
  }

  clearSingleSelection() {
    // Clear single date selection
    if (this.selectedCell) {
      this.selectedCell.classList.remove('selected')
      this.selectedCell = null
    }
    this.selectedDate = null
  }

  formatDateRange(startDate, endDate) {
    if (startDate.getTime() === endDate.getTime()) {
      // Single date
      return startDate.toISOString().split('T')[0]
    }
    
    const startISO = startDate.toISOString().split('T')[0] // YYYY-MM-DD
    const endISO = endDate.toISOString().split('T')[0]     // YYYY-MM-DD
    
    const [startYear, startMonth, startDay] = startISO.split('-')
    const [endYear, endMonth, endDay] = endISO.split('-')
    
    // Same year and month - show only day
    if (startYear === endYear && startMonth === endMonth) {
      return `${startISO}/${endDay}`
    }
    
    // Same year, different month - show month and day
    if (startYear === endYear) {
      return `${startISO}/${endMonth}-${endDay}`
    }
    
    // Different year - show full date
    return `${startISO}/${endISO}`
  }

  updateRangeDisplay() {
    // Clear previous range styling
    this.clearRangeSelection()
    
    if (!this.dragStartDate || !this.dragEndDate) return
    
    // Use constrained range if available (during drag), otherwise use actual range
    let startDate, endDate
    if (this.constrainedStartDate && this.constrainedEndDate) {
      startDate = new Date(this.constrainedStartDate)
      endDate = new Date(this.constrainedEndDate)
    } else {
      startDate = new Date(Math.min(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
      endDate = new Date(Math.max(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
      
      // Legacy fallback: check if range length is within limits
      const daysDiff = Math.ceil((endDate - startDate) / (24 * 60 * 60 * 1000)) + 1
      if (daysDiff > this.config.select_days) {
        // Range too long - only show up to the limit
        const limitedEndDate = new Date(startDate)
        limitedEndDate.setDate(startDate.getDate() + this.config.select_days - 1)
        endDate.setTime(limitedEndDate.getTime())
      }
    }
    
    // Find all cells in the visible range that fall within our selection
    for (const [virtualWeek, weekElement] of this.visibleWeeks) {
      const cells = weekElement.querySelectorAll('.cell[data-date]')
      for (const cell of cells) {
        const cellDateStr = cell.dataset.date
        if (cellDateStr) {
          const cellDate = new Date(cellDateStr + 'T00:00:00')
          
          if (cellDate >= startDate && cellDate <= endDate) {
            this.selectedRangeCells.add(cell)
            
            if (startDate.getTime() === endDate.getTime()) {
              // Single date
              cell.classList.add('range-single')
            } else if (cellDate.getTime() === startDate.getTime()) {
              // Start of range
              cell.classList.add('range-start')
            } else if (cellDate.getTime() === endDate.getTime()) {
              // End of range
              cell.classList.add('range-end')
            } else {
              // Middle of range
              cell.classList.add('range-middle')
            }
          }
        }
      }
    }
    
    // Update input field
    this.selectedDateInput.value = this.formatDateRange(startDate, endDate)
  }

  finalizeRangeSelection() {
    // Range is already displayed, just ensure input is updated
    const startDate = new Date(Math.min(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
    const endDate = new Date(Math.max(this.dragStartDate.getTime(), this.dragEndDate.getTime()))
    
    this.selectedDateInput.value = this.formatDateRange(startDate, endDate)
    
    // Clear single selection properties since we now have a range
    this.selectedDate = null
    this.selectedCell = null
  }

  updateCellRangeStatus(cell, cellDate) {
    // Check if this cell should be part of the current range selection
    if (this.selectedRangeCells.size > 0) {
      // We have an active range - check if this cell is in it
      const cellDateStr = cellDate.toISOString().split('T')[0]
      const existingCell = Array.from(this.selectedRangeCells).find(c => c.dataset.date === cellDateStr)
      
      if (existingCell) {
        // This cell should be part of the range - copy the classes
        this.selectedRangeCells.add(cell)
        if (existingCell.classList.contains('range-start')) {
          cell.classList.add('range-start')
        } else if (existingCell.classList.contains('range-end')) {
          cell.classList.add('range-end')
        } else if (existingCell.classList.contains('range-middle')) {
          cell.classList.add('range-middle')
        } else if (existingCell.classList.contains('range-single')) {
          cell.classList.add('range-single')
        }
      }
    }
  }
}

// Initialize the infinite calendar
document.addEventListener('DOMContentLoaded', () => {
  // Default configuration - you can modify this or pass custom config
  new InfiniteCalendar({
    select_days: 14  // Enable range selection up to 7 days (change to 0 to disable, 1 for single selection only)
  })
})