Initial commit

2025-08-20 08:20:40 +00:00
commit 058251b886
3 changed files with 1173 additions and 0 deletions
@@ -0,0 +1,803 @@
+// 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)
+  })
+})