hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/calendar_controller.js

@@ -0,0 +1,1101 @@
+import RegistryController from "../base/registry_controller.js"
+import DateHelper from "../../utils/date_helper.js"
+
+export default class extends RegistryController {
+  static targets = ["yearSelect", "monthSelect", "modeSegmented", "body"]
+
+  static values = {
+    mode: { type: String, default: "month" },
+    year: { type: Number, default: new Date().getFullYear() },
+    month: { type: Number, default: new Date().getMonth() + 1 },
+    fullscreen: { type: Boolean, default: true },
+    locale: { type: String, default: "en" },
+    selectedDate: { type: String, default: "" },
+    static: { type: Boolean, default: false },
+    events: { type: Object, default: {} },
+    // In week mode, tracks the user's preferred display month
+    // This is set when user clicks a day, and preserved when reopening
+    userPreferredMonth: { type: Number, default: 0 },
+    userPreferredYear: { type: Number, default: 0 },
+    // Range selection support
+    rangeStartDate: { type: String, default: "" },
+    rangeEndDate: { type: String, default: "" },
+    hoveredDate: { type: String, default: "" }
+  }
+
+  static locales = {
+    en: {
+      daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],  // ISO week: Monday first
+      monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+      monthsFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+    },
+    es: {
+      daysShort: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sá", "Do"],  // ISO week: Lunes primero
+      monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
+      monthsFull: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
+    }
+  }
+
+  setup() {
+    this.#bindNestedEvents()
+  }
+
+  teardown() {
+    delete this.element.hakumiCalendar
+  }
+
+  #bindNestedEvents() {
+    this.boundChangeYear = this.changeYear.bind(this)
+    this.boundChangeMonth = this.changeMonth.bind(this)
+    this.boundChangeMode = this.changeMode.bind(this)
+
+    this.element.addEventListener("hakumi--select:change", (event) => {
+      const target = event.target
+      if (target.matches("[data-hakumi--calendar-target='yearSelect']")) {
+        this.boundChangeYear(event)
+      } else if (target.matches("[data-hakumi--calendar-target='monthSelect']")) {
+        this.boundChangeMonth(event)
+      }
+    })
+
+    this.element.addEventListener("hakumi--segmented:change", this.boundChangeMode)
+  }
+
+  yearValueChanged() {
+    this.#renderCalendar()
+    this.#updateYearSelect()
+  }
+
+  monthValueChanged() {
+    this.#renderCalendar()
+    this.#updateMonthSelect()
+  }
+
+  modeValueChanged() {
+    this.#renderCalendar()
+    this.#updateModeSegmented()
+    this.#syncAllControls()
+  }
+
+  #syncAllControls() {
+    if (this.hasMonthSelectTarget) {
+      this.#waitForComponent(this.monthSelectTarget, (api) => {
+        api.setValue(this.monthValue)
+      })
+    }
+
+    if (this.hasYearSelectTarget) {
+      this.#waitForComponent(this.yearSelectTarget, (api) => {
+        api.setValue(this.yearValue)
+      })
+    }
+  }
+
+  #waitForComponent(element, callback, maxAttempts = 10) {
+    if (!element) return
+    
+    let attempts = 0
+    const check = () => {
+      const api = element.hakumiComponent?.api
+      if (api) {
+        callback(api)
+      } else if (attempts < maxAttempts) {
+        attempts++
+        requestAnimationFrame(check)
+      }
+    }
+    check()
+  }
+
+  changeYear(event) {
+    const year = parseInt(event.target.value || event.detail?.value, 10)
+    if (!isNaN(year)) {
+      this.yearValue = year
+      this.#dispatchChange()
+    }
+  }
+
+  changeMonth(event) {
+    const month = parseInt(event.target.value || event.detail?.value, 10)
+    if (!isNaN(month)) {
+      this.monthValue = month
+      this.#dispatchChange()
+    }
+  }
+
+  changeMode(event) {
+    const mode = event.detail?.value || event.target?.value
+    if (mode && (mode === "month" || mode === "year")) {
+      this.modeValue = mode
+      this.#dispatchModeChange()
+    }
+  }
+
+  selectDate(event) {
+    const cell = event.currentTarget
+    const dateStr = cell.dataset.date
+    if (!dateStr) return
+    if (cell.classList.contains("hakumi-calendar-cell-disabled")) return
+
+    const showWeek = this.element.classList.contains("hakumi-calendar-show-week")
+
+    if (showWeek) {
+      const date = DateHelper.parseDataDate(dateStr)
+      const monday = DateHelper.getMondayOfWeek(date)
+      const isChangingMonth = !DateHelper.isInMonth(date, this.monthValue, this.yearValue)
+
+      // IMPORTANT: Update selectedDateValue BEFORE changing month/year
+      // This ensures the selection is available when monthValueChanged/yearValueChanged trigger renders
+      this.selectedDateValue = DateHelper.formatDataDate(monday)
+
+      // If changing month, monthValueChanged() will trigger re-render which will mark the row
+      // If staying in same month, we need to manually mark the row
+      if (isChangingMonth) {
+        // Navigate to the month of the clicked day
+        this.monthValue = date.month() + 1
+        this.yearValue = date.year()
+
+        // IMPORTANT: Remember this as the user's preferred display month
+        // This will be used when reopening the picker to show the same month
+        this.userPreferredMonthValue = this.monthValue
+        this.userPreferredYearValue = this.yearValue
+
+        // The re-render triggered by monthValueChanged will mark the correct row
+      } else {
+        // Manual row selection only when staying in current month
+        const row = cell.closest("tr")
+        if (row) {
+          this.element.querySelectorAll(".hakumi-calendar-row-selected")
+            .forEach(el => el.classList.remove("hakumi-calendar-row-selected"))
+          row.classList.add("hakumi-calendar-row-selected")
+        }
+      }
+
+      this.#dispatchSelect(monday.toDate())
+    } else {
+      const date = DateHelper.parseDataDate(dateStr)
+
+      // If selecting a day from another month, navigate to that month
+      if (!DateHelper.isInMonth(date, this.monthValue, this.yearValue)) {
+        this.monthValue = date.month() + 1
+        this.yearValue = date.year()
+      }
+
+      this.selectedDateValue = dateStr
+      this.#updateSelection(cell)
+      this.#dispatchSelect(date.toDate())
+    }
+  }
+
+  handleCellHover(event) {
+    const cell = event.currentTarget
+    const dateStr = cell.dataset.date
+    if (!dateStr) return
+    if (cell.classList.contains("hakumi-calendar-cell-disabled")) return
+
+    // Only handle hover if we're in range mode with a start date but no end date
+    if (this.rangeStartDateValue && !this.rangeEndDateValue) {
+      this.setHoveredDate(dateStr)
+
+      // Dispatch hover event for DatePicker to sync across calendars
+      this.dispatch("cell-hover", {
+        detail: { date: DateHelper.parseDataDate(dateStr).toDate() }
+      })
+    }
+  }
+
+  selectWeek(event) {
+    const cell = event.currentTarget
+    const row = cell.closest("tr")
+    if (!row) return
+
+    // Get all day cells in the row (skip the week number cell)
+    const dayCells = row.querySelectorAll("[data-date]")
+    if (dayCells.length < 7) return
+
+    // Use Thursday (4th day, index 3) to determine the correct ISO week
+    // According to ISO 8601, Thursday always belongs to the correct week
+    const thursdayCell = dayCells[3]
+    const thursday = DateHelper.parseDataDate(thursdayCell.dataset.date)
+    const monday = DateHelper.getMondayOfWeek(thursday)
+    const isChangingMonth = !DateHelper.isInMonth(thursday, this.monthValue, this.yearValue)
+
+    // IMPORTANT: Update selectedDateValue BEFORE changing month/year
+    this.selectedDateValue = DateHelper.formatDataDate(monday)
+
+    // If the week belongs to a different month (Thursday is in another month), navigate to it
+    if (isChangingMonth) {
+      // Navigate to the month of the Thursday (ISO 8601: Thursday determines the month)
+      this.monthValue = thursday.month() + 1
+      this.yearValue = thursday.year()
+
+      // IMPORTANT: Remember this as the user's preferred display month
+      this.userPreferredMonthValue = this.monthValue
+      this.userPreferredYearValue = this.yearValue
+
+      // The re-render triggered by monthValueChanged will mark the correct row
+    } else {
+      // Manual row selection only when staying in current month
+      this.element.querySelectorAll(".hakumi-calendar-row-selected")
+        .forEach(el => el.classList.remove("hakumi-calendar-row-selected"))
+      row.classList.add("hakumi-calendar-row-selected")
+    }
+
+    this.#dispatchSelect(monday.toDate())
+  }
+
+  selectMonth(event) {
+    const cell = event.currentTarget
+    const month = parseInt(cell.dataset.month, 10)
+    if (isNaN(month)) return
+
+    this.monthValue = month
+    const selectedDate = new Date(this.yearValue, month - 1, 1)
+    this.selectedDateValue = DateHelper.formatDataDate(selectedDate)
+
+    if (!this.staticValue) {
+      this.modeValue = "month"
+    }
+
+    this.#dispatchSelect(selectedDate)
+  }
+
+  selectQuarter(event) {
+    const cell = event.currentTarget
+    const quarter = parseInt(cell.dataset.quarter, 10)
+    if (isNaN(quarter)) return
+
+
+    const month = (quarter - 1) * 3 + 1
+    this.monthValue = month
+    const selectedDate = new Date(this.yearValue, month - 1, 1)
+    this.selectedDateValue = DateHelper.formatDataDate(selectedDate)
+    this.#dispatchSelect({ year: this.yearValue, quarter: quarter })
+  }
+
+  selectYear(event) {
+    const cell = event.currentTarget
+    const year = parseInt(cell.dataset.year, 10)
+    if (isNaN(year)) return
+
+    this.yearValue = year
+    const selectedDate = new Date(year, 0, 1)
+    this.selectedDateValue = DateHelper.formatDataDate(selectedDate)
+    this.#dispatchSelect(selectedDate)
+  }
+
+
+  getValue() {
+    return new Date(this.yearValue, this.monthValue - 1, 1)
+  }
+
+  getSelectedDate() {
+    return this.selectedDateValue ? DateHelper.parseDataDate(this.selectedDateValue).toDate() : null
+  }
+
+  setValue(date, options = {}) {
+    if (date instanceof Date) {
+      const showWeek = this.element.classList.contains("hakumi-calendar-show-week")
+      const forceNavigate = options.navigate === true
+
+      // IMPORTANT: Update selectedDateValue BEFORE yearValue/monthValue
+      // This ensures the selection is available when yearValueChanged/monthValueChanged trigger renders
+      this.selectedDateValue = DateHelper.formatDataDate(date)
+
+      if (showWeek) {
+        // In week mode, prioritize user's preferred display month
+        // This enables navigation when clicking days from other months
+        const parsedDate = DateHelper.parseDataDate(DateHelper.formatDataDate(date))
+
+        // Priority 1: Use userPreferredMonth/Year if set (user clicked a day and navigated)
+        if (this.userPreferredMonthValue > 0 && this.userPreferredYearValue > 0) {
+          this.yearValue = this.userPreferredYearValue
+          this.monthValue = this.userPreferredMonthValue
+        }
+        // Priority 2: If not initialized yet (first time), navigate to selected date's month
+        else if (!this.monthValue || !this.yearValue || (this.monthValue === 1 && this.yearValue === 1970)) {
+          this.yearValue = parsedDate.year()
+          this.monthValue = parsedDate.month() + 1
+        }
+        // Priority 3: Keep current month/year (already viewing a specific month)
+        // This branch shouldn't normally be reached with the userPreferred logic
+      } else if (forceNavigate) {
+        // Explicit navigation requested (e.g., from range picker sync)
+        this.yearValue = date.getFullYear()
+        this.monthValue = date.getMonth() + 1
+      } else {
+        // In non-week mode (date picker), navigate to selected date's month
+        // BUT only in default month view mode (not in month/quarter/year picker modes)
+        if (this.modeValue !== "month" && this.modeValue !== "quarter" && this.modeValue !== "year") {
+          this.yearValue = date.getFullYear()
+          this.monthValue = date.getMonth() + 1
+        }
+        // For month/quarter/year pickers, keep current yearValue (don't navigate)
+      }
+
+      this.#renderCalendar()
+      this.#dispatchChange()
+    }
+  }
+
+  clearSelection() {
+    this.selectedDateValue = ""
+    this.#renderCalendar()
+  }
+
+  // Range API methods
+  setRange(startDate, endDate, hoveredDate = null) {
+    this.rangeStartDateValue = this.#formatDateKey(startDate) || ""
+    this.rangeEndDateValue = this.#formatDateKey(endDate) || ""
+    this.hoveredDateValue = hoveredDate ? this.#formatDateKey(hoveredDate) : ""
+    this.#renderCalendar()
+  }
+
+  clearRange() {
+    this.rangeStartDateValue = ""
+    this.rangeEndDateValue = ""
+    this.hoveredDateValue = ""
+    this.#renderCalendar()
+  }
+
+  getRange() {
+    return {
+      start: this.rangeStartDateValue || null,
+      end: this.rangeEndDateValue || null,
+      hovered: this.hoveredDateValue || null
+    }
+  }
+
+  setHoveredDate(date) {
+    this.hoveredDateValue = date ? this.#formatDateKey(date) : ""
+    this.#renderCalendar()
+  }
+
+  getMode() {
+    return this.modeValue
+  }
+
+  setMode(mode) {
+    if (mode === "month" || mode === "year") {
+      this.modeValue = mode
+      this.#dispatchModeChange()
+    }
+  }
+
+  goToToday() {
+    const today = new Date()
+    this.yearValue = today.getFullYear()
+    this.monthValue = today.getMonth() + 1
+    this.#dispatchChange()
+  }
+
+  nextMonth() {
+    if (this.monthValue === 12) {
+      this.monthValue = 1
+      this.yearValue += 1
+    } else {
+      this.monthValue += 1
+    }
+    this.#dispatchChange()
+  }
+
+  prevMonth() {
+    if (this.monthValue === 1) {
+      this.monthValue = 12
+      this.yearValue -= 1
+    } else {
+      this.monthValue -= 1
+    }
+    this.#dispatchChange()
+  }
+
+  nextYear() {
+    this.yearValue += 1
+    this.#dispatchChange()
+  }
+
+  prevYear() {
+    this.yearValue -= 1
+    this.#dispatchChange()
+  }
+
+  nextDecade() {
+    this.yearValue += 10
+    this.#dispatchChange()
+  }
+
+  prevDecade() {
+    this.yearValue -= 10
+    this.#dispatchChange()
+  }
+
+  getEvents() {
+    return { ...this.eventsValue }
+  }
+
+  setEvents(events) {
+    this.eventsValue = this.#normalizeEventsInput(events)
+    if (!this.staticValue) {
+      this.#renderCalendar()
+    }
+    this.#dispatchEventsChange()
+  }
+
+  addEvent(date, event) {
+    const dateStr = this.#formatDateKey(date)
+    const events = { ...this.eventsValue }
+    
+    if (!events[dateStr]) {
+      events[dateStr] = []
+    }
+    events[dateStr].push({
+      id: event.id || null,
+      type: event.type || 'default',
+      content: event.content || '',
+      html: event.html || null
+    })
+    
+    this.eventsValue = events
+    if (!this.staticValue) {
+      this.#renderCalendar()
+    }
+    this.#dispatchEventsChange()
+  }
+
+  updateEvent(id, updates) {
+    const events = { ...this.eventsValue }
+    let found = false
+    
+    Object.keys(events).forEach(dateStr => {
+      const idx = events[dateStr].findIndex(e => e.id === id)
+      if (idx !== -1) {
+        events[dateStr][idx] = { ...events[dateStr][idx], ...updates }
+        found = true
+      }
+    })
+    
+    if (found) {
+      this.eventsValue = events
+      if (!this.staticValue) {
+        this.#renderCalendar()
+      }
+      this.#dispatchEventsChange()
+    }
+    return found
+  }
+
+  removeEvent(date, indexOrId = null) {
+    const dateStr = this.#formatDateKey(date)
+    const events = { ...this.eventsValue }
+    
+    if (!events[dateStr]) return false
+    
+    if (indexOrId === null) {
+
+      delete events[dateStr]
+    } else if (typeof indexOrId === 'number') {
+
+      if (indexOrId >= 0 && indexOrId < events[dateStr].length) {
+        events[dateStr].splice(indexOrId, 1)
+        if (events[dateStr].length === 0) {
+          delete events[dateStr]
+        }
+      }
+    }
+    
+    this.eventsValue = events
+    if (!this.staticValue) {
+      this.#renderCalendar()
+    }
+    this.#dispatchEventsChange()
+    return true
+  }
+
+  removeEventById(id) {
+    const events = { ...this.eventsValue }
+    let found = false
+    
+    Object.keys(events).forEach(dateStr => {
+      const idx = events[dateStr].findIndex(e => e.id === id)
+      if (idx !== -1) {
+        events[dateStr].splice(idx, 1)
+        if (events[dateStr].length === 0) {
+          delete events[dateStr]
+        }
+        found = true
+      }
+    })
+    
+    if (found) {
+      this.eventsValue = events
+      if (!this.staticValue) {
+        this.#renderCalendar()
+      }
+      this.#dispatchEventsChange()
+    }
+    return found
+  }
+
+  getEventById(id) {
+    for (const dateStr of Object.keys(this.eventsValue)) {
+      const event = this.eventsValue[dateStr].find(e => e.id === id)
+      if (event) {
+        return { ...event, date: dateStr }
+      }
+    }
+    return null
+  }
+
+  getEventsForDate(date) {
+    const dateStr = this.#formatDateKey(date)
+    return this.eventsValue[dateStr] || []
+  }
+
+  clearEvents() {
+    this.eventsValue = {}
+    if (!this.staticValue) {
+      this.#renderCalendar()
+    }
+    this.#dispatchEventsChange()
+  }
+
+  #formatDateKey(date) {
+    if (date instanceof Date) {
+      return DateHelper.formatDataDate(date)
+    }
+    return String(date)
+  }
+
+  #normalizeEventsInput(events) {
+    if (!events || typeof events !== 'object') return {}
+    
+    const normalized = {}
+    Object.keys(events).forEach(key => {
+      const dateStr = this.#formatDateKey(key)
+      normalized[dateStr] = events[key].map(e => ({
+        id: e.id || null,
+        type: e.type || 'default',
+        content: e.content || '',
+        html: e.html || null
+      }))
+    })
+    return normalized
+  }
+
+  #dispatchEventsChange() {
+    this.dispatch("eventsChange", {
+      detail: { events: this.getEvents() }
+    })
+  }
+
+
+
+
+  #getLocale() {
+    return this.constructor.locales[this.localeValue] || this.constructor.locales.en
+  }
+
+  #renderCalendar() {
+    const body = this.element.querySelector(".hakumi-calendar-body")
+    if (!body) return
+
+    switch (this.modeValue) {
+      case "month":
+        body.innerHTML = this.#renderMonthView()
+        break
+      case "year":
+        body.innerHTML = this.#renderYearView()
+        break
+      case "quarter":
+        body.innerHTML = this.#renderQuarterView()
+        break
+      case "decade":
+        body.innerHTML = this.#renderDecadeView()
+        break
+      default:
+        body.innerHTML = this.#renderMonthView()
+    }
+  }
+
+  #renderMonthView() {
+    const locale = this.#getLocale()
+    const weeks = this.#buildWeeksForMonth(this.yearValue, this.monthValue)
+    const showWeek = this.element.classList.contains("hakumi-calendar-show-week")
+    const today = DateHelper.formatDataDate(new Date())
+
+    let html = `<table class="hakumi-calendar-table">
+      <thead class="hakumi-calendar-thead">
+        <tr>`
+
+    if (showWeek) {
+      html += `<th class="hakumi-calendar-cell hakumi-calendar-cell-week-header"></th>`
+    }
+
+    locale.daysShort.forEach(day => {
+      html += `<th class="hakumi-calendar-cell hakumi-calendar-column-header">
+        <span class="hakumi-calendar-column-header-inner">${day}</span>
+      </th>`
+    })
+
+    html += `</tr></thead><tbody class="hakumi-calendar-tbody">`
+
+    weeks.forEach(week => {
+      const rowClass = week.weekSelected ? "hakumi-calendar-row hakumi-calendar-row-selected" : "hakumi-calendar-row"
+      html += `<tr class="${rowClass}">`
+
+      if (showWeek) {
+        html += `<td class="hakumi-calendar-cell hakumi-calendar-cell-week" data-action="click->hakumi--calendar#selectWeek">
+          <div class="hakumi-calendar-week-number">${week.weekNumber}</div>
+        </td>`
+      }
+
+      week.days.forEach(day => {
+        const classes = this.#getCellClasses(day, today)
+        const eventsHtml = this.#renderEventsForDate(day.dateStr)
+        const actions = this.rangeStartDateValue && !this.rangeEndDateValue
+          ? "click->hakumi--calendar#selectDate mouseenter->hakumi--calendar#handleCellHover"
+          : "click->hakumi--calendar#selectDate"
+        html += `<td class="${classes}" data-date="${day.dateStr}" data-action="${actions}">
+          <div class="hakumi-calendar-date">
+            <div class="hakumi-calendar-date-value">${day.day}</div>
+            ${eventsHtml ? `<div class="hakumi-calendar-date-content">${eventsHtml}</div>` : ''}
+          </div>
+        </td>`
+      })
+
+      html += `</tr>`
+    })
+
+    html += `</tbody></table>`
+    return html
+  }
+
+  #renderYearView() {
+    const locale = this.#getLocale()
+    const currentMonth = new Date().getMonth() + 1
+    const currentYear = new Date().getFullYear()
+
+
+    const selectedDate = this.selectedDateValue ? DateHelper.parseDataDate(this.selectedDateValue) : null
+    const selectedMonth = selectedDate ? selectedDate.month() + 1 : null
+    const selectedYear = selectedDate ? selectedDate.year() : null
+
+    let html = `<div class="hakumi-calendar-month-panel">`
+
+    for (let row = 0; row < 4; row++) {
+      html += `<div class="hakumi-calendar-month-panel-row">`
+      for (let col = 0; col < 3; col++) {
+        const month = row * 3 + col + 1
+        const isCurrent = month === currentMonth && this.yearValue === currentYear
+        const isSelected = selectedMonth && month === selectedMonth && this.yearValue === selectedYear
+
+        let classes = "hakumi-calendar-cell hakumi-calendar-cell-month"
+        if (isSelected) classes += " hakumi-calendar-cell-selected"
+        // In static mode (date picker), don't show current month indicator
+        if (isCurrent && !this.staticValue) classes += " hakumi-calendar-cell-current"
+
+        const eventIndicators = this.#getMonthEventIndicators(this.yearValue, month)
+
+        html += `<div class="${classes}" data-month="${month}" data-action="click->hakumi--calendar#selectMonth">
+          <div class="hakumi-calendar-month-cell-inner">
+            <div class="hakumi-calendar-month-value">${locale.monthsShort[month - 1]}</div>
+            ${eventIndicators}
+          </div>
+        </div>`
+      }
+      html += `</div>`
+    }
+
+    html += `</div>`
+    return html
+  }
+
+  #getMonthEventIndicators(year, month) {
+    const events = this.eventsValue
+    if (!events || Object.keys(events).length === 0) return ''
+
+
+    const eventTypes = new Set()
+    
+    Object.keys(events).forEach(dateStr => {
+      const date = DateHelper.parseDataDate(dateStr)
+      if (date.year() === year && date.month() + 1 === month) {
+        events[dateStr].forEach(event => {
+          eventTypes.add(event.type || 'default')
+        })
+      }
+    })
+
+    if (eventTypes.size === 0) return ''
+
+    let html = '<div class="hakumi-calendar-month-events">'
+    eventTypes.forEach(type => {
+      html += `<span class="hakumi-calendar-month-event-dot hakumi-calendar-month-event-${type}"></span>`
+    })
+    html += '</div>'
+
+    return html
+  }
+
+  #renderQuarterView() {
+    const currentYear = new Date().getFullYear()
+    const currentQuarter = Math.floor(new Date().getMonth() / 3) + 1
+
+
+    const selectedDate = this.selectedDateValue ? DateHelper.parseDataDate(this.selectedDateValue) : null
+    const selectedQuarter = selectedDate ? Math.floor(selectedDate.month() / 3) + 1 : null
+    const selectedYear = selectedDate ? selectedDate.year() : null
+
+    let html = `<div class="hakumi-calendar-quarter-panel">`
+
+
+    for (let row = 0; row < 2; row++) {
+      html += `<div class="hakumi-calendar-quarter-panel-row">`
+      for (let col = 0; col < 2; col++) {
+        const quarter = row * 2 + col + 1
+        const isCurrent = quarter === currentQuarter && this.yearValue === currentYear
+        const isSelected = selectedQuarter && quarter === selectedQuarter && this.yearValue === selectedYear
+
+        let classes = "hakumi-calendar-cell hakumi-calendar-cell-quarter"
+        if (isSelected) classes += " hakumi-calendar-cell-selected"
+        // In static mode (date picker), don't show current quarter indicator
+        if (isCurrent && !this.staticValue) classes += " hakumi-calendar-cell-current"
+
+        html += `<div class="${classes}" data-quarter="${quarter}" data-action="click->hakumi--calendar#selectQuarter">
+          <div class="hakumi-calendar-quarter-cell-inner">
+            <div class="hakumi-calendar-quarter-value">Q${quarter}</div>
+          </div>
+        </div>`
+      }
+      html += `</div>`
+    }
+
+    html += `</div>`
+    return html
+  }
+
+  #renderDecadeView() {
+    const currentYear = new Date().getFullYear()
+
+
+    const selectedDate = this.selectedDateValue ? DateHelper.parseDataDate(this.selectedDateValue) : null
+    const selectedYear = selectedDate ? selectedDate.year() : null
+
+
+    const decadeStart = Math.floor(this.yearValue / 10) * 10
+    const startYear = decadeStart - 1
+    const endYear = decadeStart + 10
+
+    let html = `<div class="hakumi-calendar-year-panel">`
+
+
+    for (let row = 0; row < 4; row++) {
+      html += `<div class="hakumi-calendar-year-panel-row">`
+      for (let col = 0; col < 3; col++) {
+        const year = startYear + row * 3 + col
+        const isCurrent = year === currentYear
+        const isSelected = selectedYear && year === selectedYear
+        const inDecade = year >= decadeStart && year < decadeStart + 10
+
+        let classes = "hakumi-calendar-cell hakumi-calendar-cell-year"
+        if (isSelected) classes += " hakumi-calendar-cell-selected"
+        // In static mode (date picker), don't show current year indicator
+        if (isCurrent && !this.staticValue) classes += " hakumi-calendar-cell-current"
+        if (!inDecade) classes += " hakumi-calendar-cell-disabled"
+
+        html += `<div class="${classes}" data-year="${year}" data-action="click->hakumi--calendar#selectYear">
+          <div class="hakumi-calendar-year-cell-inner">
+            <div class="hakumi-calendar-year-value">${year}</div>
+          </div>
+        </div>`
+      }
+      html += `</div>`
+    }
+
+    html += `</div>`
+    return html
+  }
+
+  #buildWeeksForMonth(year, month) {
+    const firstDay = DateHelper.parseDataDate(`${year}-${String(month).padStart(2, "0")}-01`)
+    const lastDay = firstDay.endOf("month")
+
+    // Start from Monday of the week containing the 1st day (ISO week)
+    const startDate = DateHelper.getMondayOfWeek(firstDay)
+
+    // Always show 6 rows (42 days) for consistent calendar height
+    // This ensures the calendar doesn't jump in size between months
+    const endDate = startDate.add(41, "day")
+
+    const selectedDate = this.selectedDateValue ? DateHelper.parseDataDate(this.selectedDateValue) : null
+    const selectedWeekNumber = selectedDate ? DateHelper.getISOWeek(selectedDate) : null
+    const selectedWeekYear = selectedDate ? DateHelper.getISOWeekYear(selectedDate) : null
+    const showWeek = this.element.classList.contains("hakumi-calendar-show-week")
+
+    const weeks = []
+    let current = startDate
+
+    while (current.isBefore(endDate.add(1, "day"), "day")) {
+      const week = {
+        weekNumber: null,  // Will be set after we know the thursday
+        weekSelected: false,  // Will be set after we know the week number
+        days: []
+      }
+
+      // Collect all 7 days first
+      for (let i = 0; i < 7; i++) {
+        week.days.push({
+          date: current.toDate(),
+          dateStr: DateHelper.formatDataDate(current),
+          day: current.date(),
+          inMonth: current.month() + 1 === month,
+          weekend: current.day() === 0 || current.day() === 6
+        })
+        current = current.add(1, "day")
+      }
+
+      // Calculate week number based on Thursday (4th day, index 3) of the row
+      // According to ISO 8601, the week containing the first Thursday is week 1
+      // So Thursday always belongs to the correct week
+      const thursday = week.days[3]
+      const thursdayDate = DateHelper.parseDataDate(thursday.dateStr)
+      const weekNumber = DateHelper.getISOWeek(thursdayDate)
+      const weekYear = DateHelper.getISOWeekYear(thursdayDate)
+
+      week.weekNumber = weekNumber
+      week.weekSelected = showWeek && selectedWeekNumber === weekNumber && selectedWeekYear === weekYear
+
+      weeks.push(week)
+    }
+
+    return weeks
+  }
+
+  #getCellClasses(day, today) {
+    const classes = ["hakumi-calendar-cell"]
+    const showWeek = this.element.classList.contains("hakumi-calendar-show-week")
+
+    // Only mark days as "in-view" (current month styling) if they're actually in the current month
+    // This ensures days from other months always have muted styling, even when in a selected week
+    if (day.inMonth) {
+      classes.push("hakumi-calendar-cell-in-view")
+    }
+
+    // In week picker mode, don't show "today" marker since we're selecting weeks, not individual days
+    if (day.dateStr === today && !showWeek) {
+      classes.push("hakumi-calendar-cell-today")
+    }
+
+    // In week picker mode, don't mark individual cells as "selected"
+    // Only the row should be selected (.hakumi-calendar-row-selected)
+    // This prevents CSS like .hakumi-calendar-cell-selected .hakumi-calendar-date from applying
+    // blue background to Monday when it's in the previous month
+    if (day.dateStr === this.selectedDateValue && !showWeek) {
+      classes.push("hakumi-calendar-cell-selected")
+    }
+
+    if (day.weekend && day.dateStr !== this.selectedDateValue) {
+      classes.push("hakumi-calendar-cell-weekend")
+    }
+
+    // Range selection support
+    if (this.rangeStartDateValue || this.rangeEndDateValue) {
+      const rangeStart = this.rangeStartDateValue ? new Date(this.rangeStartDateValue) : null
+      const rangeEnd = this.rangeEndDateValue ? new Date(this.rangeEndDateValue) : null
+      const hovered = this.hoveredDateValue ? new Date(this.hoveredDateValue) : null
+      const currentDate = new Date(day.dateStr)
+
+      // Mark range start
+      if (rangeStart && day.dateStr === this.rangeStartDateValue) {
+        classes.push("hakumi-calendar-cell-range-start")
+      }
+
+      // Mark range end
+      if (rangeEnd && day.dateStr === this.rangeEndDateValue) {
+        classes.push("hakumi-calendar-cell-range-end")
+      }
+
+      // Mark dates in range (between start and end)
+      if (rangeStart && rangeEnd) {
+        if (currentDate > rangeStart && currentDate < rangeEnd) {
+          classes.push("hakumi-calendar-cell-in-range")
+        }
+      }
+      // Mark hover range (between start and hovered date when no end is selected)
+      else if (rangeStart && hovered && !rangeEnd) {
+        if ((currentDate > rangeStart && currentDate <= hovered) ||
+            (currentDate < rangeStart && currentDate >= hovered)) {
+          classes.push("hakumi-calendar-cell-in-range")
+          classes.push("hakumi-calendar-cell-range-hover")
+        }
+      }
+    }
+
+    return classes.join(" ")
+  }
+
+  #renderEventsForDate(dateStr) {
+    const events = this.eventsValue[dateStr]
+    if (!events || events.length === 0) return ''
+
+    return events.map(event => {
+      const type = event.type || 'default'
+      const content = this.#escapeHtml(event.content)
+      
+
+      const badgeHtml = event.html || this.#renderBadgeHtml(type, content)
+      
+      return `<div class="hakumi-calendar-event hakumi-calendar-event-${type}" title="${content}">${badgeHtml}</div>`
+    }).join('')
+  }
+
+  #renderBadgeHtml(type, content) {
+    const statusClass = this.#getStatusClass(type)
+    return `<span class="hakumi-badge hakumi-badge-status">
+      <span class="hakumi-badge-status-dot ${statusClass}"></span>
+      <span class="hakumi-badge-status-text">${content}</span>
+    </span>`
+  }
+
+  #getStatusClass(type) {
+    const statusMap = {
+      success: 'hakumi-badge-status-success',
+      warning: 'hakumi-badge-status-warning',
+      error: 'hakumi-badge-status-error',
+      default: 'hakumi-badge-status-default'
+    }
+    return statusMap[type] || statusMap.default
+  }
+
+  #escapeHtml(text) {
+    const div = document.createElement('div')
+    div.textContent = text
+    return div.innerHTML
+  }
+
+  #updateSelection(cell) {
+    this.element.querySelectorAll(".hakumi-calendar-cell-selected")
+      .forEach(el => el.classList.remove("hakumi-calendar-cell-selected"))
+    cell.classList.add("hakumi-calendar-cell-selected")
+  }
+
+  #updateMonthSelection(cell) {
+    this.element.querySelectorAll(".hakumi-calendar-cell-month.hakumi-calendar-cell-selected")
+      .forEach(el => el.classList.remove("hakumi-calendar-cell-selected"))
+    cell.classList.add("hakumi-calendar-cell-selected")
+  }
+
+  #updateYearSelect() {
+    if (this.hasYearSelectTarget) {
+      const select = this.yearSelectTarget
+      const api = select.hakumiComponent?.api
+      if (api?.setValue) {
+        api.setValue(this.yearValue)
+      }
+    }
+  }
+
+  #updateMonthSelect() {
+    if (this.hasMonthSelectTarget) {
+      const select = this.monthSelectTarget
+      const api = select.hakumiComponent?.api
+      if (api?.setValue) {
+        api.setValue(this.monthValue)
+      }
+    }
+  }
+
+  #updateModeSegmented() {
+    if (this.hasModeSegmentedTarget) {
+      const segmented = this.modeSegmentedTarget
+      const api = segmented.hakumiComponent?.api
+      if (api?.setValue) {
+        api.setValue(this.modeValue)
+      }
+    }
+  }
+
+  #dispatchChange() {
+    this.dispatch("change", {
+      detail: {
+        year: this.yearValue,
+        month: this.monthValue,
+        date: this.getValue()
+      }
+    })
+  }
+
+  #dispatchModeChange() {
+    this.dispatch("panelChange", {
+      detail: {
+        mode: this.modeValue,
+        year: this.yearValue,
+        month: this.monthValue
+      }
+    })
+  }
+
+  #dispatchSelect(data) {
+
+
+
+    const detail = data instanceof Date
+      ? {
+          date: data,
+          source: this.modeValue === "month" ? "date" : "month"
+        }
+      : {
+          ...data,
+          source: "quarter"
+        }
+
+    this.dispatch("select", { detail })
+  }
+
+  registerApi() {
+    const api = {
+
+      getValue: () => this.getValue(),
+      getSelectedDate: () => this.getSelectedDate(),
+      setValue: (date, options) => this.setValue(date, options),
+      clearSelection: () => this.clearSelection(),
+      getMode: () => this.getMode(),
+      setMode: (mode) => this.setMode(mode),
+      goToToday: () => this.goToToday(),
+      nextMonth: () => this.nextMonth(),
+      prevMonth: () => this.prevMonth(),
+      nextYear: () => this.nextYear(),
+      prevYear: () => this.prevYear(),
+      nextDecade: () => this.nextDecade(),
+      prevDecade: () => this.prevDecade(),
+      refresh: () => this.#renderCalendar(),
+
+      getEvents: () => this.getEvents(),
+      setEvents: (events) => this.setEvents(events),
+      addEvent: (date, event) => this.addEvent(date, event),
+      updateEvent: (id, updates) => this.updateEvent(id, updates),
+      removeEvent: (date, indexOrId) => this.removeEvent(date, indexOrId),
+      removeEventById: (id) => this.removeEventById(id),
+      getEventById: (id) => this.getEventById(id),
+      getEventsForDate: (date) => this.getEventsForDate(date),
+      clearEvents: () => this.clearEvents(),
+
+      // Range API
+      setRange: (startDate, endDate, hoveredDate) => this.setRange(startDate, endDate, hoveredDate),
+      clearRange: () => this.clearRange(),
+      getRange: () => this.getRange(),
+      setHoveredDate: (date) => this.setHoveredDate(date)
+    }
+
+
+    this.element.hakumiComponent = {
+      name: "calendar",
+      version: 1,
+      singleton: false,
+      api
+    }
+
+
+    this.element.hakumiCalendar = api
+  }
+}