@oslokommune/punkt-elements 14.0.2 → 14.0.4

package/src/components/calendar/calendar.ts

@@ -7,25 +7,60 @@ import {
   formatReadableDate,
   parseISODateString,
   todayInTz,
-  isDateSelectable,
   newDateFromDate,
 } from 'shared-utils/date-utils'
-import { getWeek, eachDayOfInterval, getISODay, addDays } from 'date-fns'
-import { html, nothing, PropertyValues } from 'lit'
+import { html, nothing, PropertyValues, TemplateResult } from 'lit'
 import { PktElement } from '@/base-elements/element'
 import converters from '../../helpers/converters'
 import specs from 'componentSpecs/calendar.json'
 import '@/components/icon'
-
-type DatesInRange = {
-  [key: string]: boolean
+import {
+  isDateExcluded,
+  isDayDisabled as checkDayDisabled,
+  isPrevMonthAllowed as checkPrevMonthAllowed,
+  isNextMonthAllowed as checkNextMonthAllowed,
+  type IDateConstraints,
+} from './helpers/date-validation'
+import {
+  DAYS_PER_WEEK,
+  calculateCalendarDimensions,
+  getCellType,
+  getDayNumber,
+} from './helpers/calendar-grid'
+import {
+  convertSelectedToDates,
+  updateRangeMap as calculateRangeMap,
+  isRangeAllowed as checkRangeAllowed,
+  addToSelection,
+  removeFromSelection,
+  toggleSelection,
+  handleRangeSelection,
+  type TDateRangeMap,
+} from './helpers/selection-manager'
+import {
+  shouldIgnoreKeyboardEvent,
+  findNextSelectableDate as findNextDate,
+  getKeyDirection,
+} from './helpers/keyboard-navigation'
+
+// Types
+
+type TDayViewData = {
+  currentDate: Date
+  currentDateISO: string
+  isToday: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  ariaLabel: string
+  tabindex: string
 }
 
 @customElement('pkt-calendar')
 export class PktCalendar extends PktElement {
-  /**
-   * Element attributes
-   */
+  // Selection properties
+  @property({ converter: converters.csvToArray })
+  selected: string | string[] = []
+
   @property({ type: Boolean })
   multiple: boolean = specs.props.multiple.default
 
@@ -35,15 +70,7 @@ export class PktCalendar extends PktElement {
   @property({ type: Boolean })
   range: boolean = specs.props.range.default
 
-  @property({ type: Boolean })
-  weeknumbers: boolean = specs.props.weeknumbers.default
-
-  @property({ type: Boolean })
-  withcontrols: boolean = specs.props.withcontrols.default
-
-  @property({ converter: converters.csvToArray })
-  selected: string | string[] = []
-
+  // Date constraints
   @property({ type: String })
   earliest: string | null = specs.props.earliest.default
 
@@ -56,12 +83,17 @@ export class PktCalendar extends PktElement {
   @property({ converter: converters.csvToArray })
   excludeweekdays: string[] = []
 
+  // Display options
+  @property({ type: Boolean })
+  weeknumbers: boolean = specs.props.weeknumbers.default
+
+  @property({ type: Boolean })
+  withcontrols: boolean = specs.props.withcontrols.default
+
   @property({ converter: converters.stringToDate })
   currentmonth: Date | null = null
 
-  /**
-   * Strings
-   */
+  // Localization strings
   @property({ type: Array }) dayStrings: string[] = this.strings.dates.daysShort
   @property({ type: Array }) dayStringsLong: string[] = this.strings.dates.days
   @property({ type: Array }) monthStrings: string[] = this.strings.dates.months
@@ -69,29 +101,31 @@ export class PktCalendar extends PktElement {
   @property({ type: String }) prevMonthString: string = this.strings.dates.prevMonth
   @property({ type: String }) nextMonthString: string = this.strings.dates.nextMonth
 
-  /**
-   * Private properties
-   */
+  // Internal state - selection tracking
   @property({ type: Array }) private _selected: Date[] = []
+  @state() private inRange: TDateRangeMap = {}
+  @property({ type: Date }) private rangeHovered: Date | null = null
+
+  // Internal state - navigation and display
   @property({ type: Number }) private year: number = 0
   @property({ type: Number }) private month: number = 0
   @property({ type: Number }) private week: number = 0
-  @property({ type: Date }) private rangeHovered: Date | null = null
+  @state() private currentmonthtouched: boolean = false
 
-  @state() private inRange: DatesInRange = {}
+  // Internal state - keyboard navigation and focus management
   @state() private focusedDate: string | null = null
   @state() private selectableDates: {
     currentDateISO: string
     isDisabled: boolean
     tabindex: string
   }[] = []
-  @state() private currentmonthtouched: boolean = false
   @state() private tabIndexSet: number = 0
+
   /**
-   * Runs on mount, used to set up various values and whatever you need to run
+   * Lifecycle methods
    */
-  connectedCallback() {
-    super.connectedCallback()
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.addEventListener('keydown', this.handleKeydown)
   }
 
   disconnectedCallback(): void {
@@ -99,13 +133,6 @@ export class PktCalendar extends PktElement {
     super.disconnectedCallback()
   }
 
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'selected' && value) {
-      this.convertSelected()
-    }
-    super.attributeChangedCallback(name, _old, value)
-  }
-
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
     if (changedProperties.has('selected')) {
@@ -113,11 +140,10 @@ export class PktCalendar extends PktElement {
     }
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.addEventListener('keydown', this.handleKeydown)
-  }
-
-  convertSelected() {
+  /**
+   * Date and selection management
+   */
+  private convertSelected() {
     if (typeof this.selected === 'string') {
       this.selected = this.selected.split(',')
     }
@@ -125,28 +151,16 @@ export class PktCalendar extends PktElement {
       this.selected = []
     }
 
-    this._selected = this.selected.map((d: string) => parseISODateString(d))
-    if (this.range && this.selected.length === 2) {
-      const days = eachDayOfInterval({
-        start: this._selected[0],
-        end: this._selected[1],
-      })
+    this._selected = convertSelectedToDates(this.selected)
 
-      this.inRange = {}
-      if (Array.isArray(days) && days.length) {
-        const inRange: DatesInRange = {}
-        for (let i = 0; i < days.length; i++) {
-          const day = days[i]
-          const isInRange = day > this._selected[0] && day < this._selected[1]
-          inRange[formatISODate(day)] = isInRange
-        }
-        this.inRange = inRange
-      }
+    if (this.range && this.selected.length === 2) {
+      this.inRange = calculateRangeMap(this._selected[0], this._selected[1])
     }
+
     this.setCurrentMonth()
   }
 
-  setCurrentMonth() {
+  private setCurrentMonth() {
     if (this.currentmonth === null && !this.currentmonthtouched) {
       this.currentmonthtouched = true
     }
@@ -163,64 +177,40 @@ export class PktCalendar extends PktElement {
     this.month = this.currentmonth.getMonth()
   }
 
-  handleKeydown(e: KeyboardEvent) {
-    switch (e.key) {
-      case 'ArrowLeft':
-        this.handleArrowKey(e, -1)
-        break
-      case 'ArrowRight':
-        this.handleArrowKey(e, 1)
-        break
-      case 'ArrowUp':
-        this.handleArrowKey(e, -7)
-        break
-      case 'ArrowDown':
-        this.handleArrowKey(e, 7)
-        break
-      default:
-        break
+  /**
+   * Keyboard navigation
+   */
+  private handleKeydown(e: KeyboardEvent) {
+    const direction = getKeyDirection(e.key)
+    if (direction !== null) {
+      this.handleArrowKey(e, direction)
     }
   }
 
-  handleArrowKey(e: KeyboardEvent, direction: number) {
-    if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
-    if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
-    if (
-      (e.target as HTMLElement)?.nodeName === 'BUTTON' &&
-      !(e.target as HTMLElement)?.dataset?.date
-    )
-      return
+  private handleArrowKey(e: KeyboardEvent, direction: number) {
+    const target = e.target as HTMLElement
+    if (shouldIgnoreKeyboardEvent(target)) return
+
     e.preventDefault()
+
     if (!this.focusedDate) {
       this.focusOnCurrentDate()
+      return
     }
+
     const date = this.focusedDate ? newDate(this.focusedDate) : newDateYMD(this.year, this.month, 1)
-    let nextDate = addDays(date, direction)
+    const nextDate = findNextDate(date, direction, this.querySelector.bind(this))
+
     if (nextDate) {
-      let el = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
-      if (el instanceof HTMLButtonElement) {
-        if (el.dataset.disabled) {
-          nextDate = addDays(nextDate, direction)
-          let nextElement = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
-          while (
-            nextElement &&
-            nextElement instanceof HTMLButtonElement &&
-            nextElement.dataset.disabled
-          ) {
-            nextDate = addDays(nextDate, direction)
-            nextElement = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
-          }
-          el = nextElement
-        }
-        if (el instanceof HTMLButtonElement && !el.dataset.disabled) {
-          this.focusedDate = formatISODate(nextDate)
-          el.focus()
-        }
+      const el = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
+      if (el instanceof HTMLButtonElement && !el.dataset.disabled) {
+        this.focusedDate = formatISODate(nextDate)
+        el.focus()
       }
     }
   }
   /**
-   * Component functionality and render
+   * Rendering methods
    */
   render() {
     return html`
@@ -235,51 +225,9 @@ export class PktCalendar extends PktElement {
         }}
       >
         <nav class="pkt-cal-month-nav">
-          <div>
-            <button
-              type="button"
-              aria-label="${this.prevMonthString}"
-              @click=${() => this.isPrevMonthAllowed() && this.prevMonth()}
-              @keydown=${(e: KeyboardEvent) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  this.isPrevMonthAllowed() && this.prevMonth()
-                }
-              }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only pkt-calendar__prev-month ${this.isPrevMonthAllowed()
-                ? ''
-                : 'pkt-hide'}"
-              .data-disabled=${!this.isPrevMonthAllowed() ? 'disabled' : nothing}
-              ?aria-disabled=${!this.isPrevMonthAllowed()}
-              tabindex=${this.isPrevMonthAllowed() ? '0' : '-1'}
-            >
-              <pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
-              <span class="pkt-btn__text">${this.prevMonthString}</span>
-            </button>
-          </div>
+          ${this.renderMonthNavButton('prev')}
           ${this.renderMonthNav()}
-          <div>
-            <button
-              type="button"
-              aria-label="${this.nextMonthString}"
-              @click=${() => this.isNextMonthAllowed() && this.nextMonth()}
-              @keydown=${(e: KeyboardEvent) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  this.isNextMonthAllowed() && this.nextMonth()
-                }
-              }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only pkt-calendar__next-month ${this.isNextMonthAllowed()
-                ? ''
-                : 'pkt-hide'}"
-              .data-disabled=${!this.isNextMonthAllowed() ? 'disabled' : nothing}
-              ?aria-disabled=${!this.isNextMonthAllowed()}
-              tabindex=${this.isNextMonthAllowed() ? '0' : '-1'}
-            >
-              <pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
-              <span class="pkt-btn__text">${this.nextMonthString}</span>
-            </button>
-          </div>
+          ${this.renderMonthNavButton('next')}
         </nav>
         <table
           class="pkt-cal-days pkt-txt-12-medium pkt-calendar__body"
@@ -297,11 +245,43 @@ export class PktCalendar extends PktElement {
     `
   }
 
-  private renderDayNames() {
-    const days: any[] = []
+  private renderMonthNavButton(direction: 'prev' | 'next'): TemplateResult {
+    const isPrev = direction === 'prev'
+    const isAllowed = isPrev ? this.isPrevMonthAllowed() : this.isNextMonthAllowed()
+    const label = isPrev ? this.prevMonthString : this.nextMonthString
+    const iconName = isPrev ? 'chevron-thin-left' : 'chevron-thin-right'
+    const className = isPrev ? 'pkt-calendar__prev-month' : 'pkt-calendar__next-month'
+    const onClick = isPrev ? () => this.prevMonth() : () => this.nextMonth()
+
+    return html`<div>
+      <button
+        type="button"
+        aria-label="${label}"
+        @click=${() => isAllowed && onClick()}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            isAllowed && onClick()
+          }
+        }}
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${className} ${isAllowed ? '' : 'pkt-hide'}"
+        .data-disabled=${!isAllowed ? 'disabled' : nothing}
+        ?aria-disabled=${!isAllowed}
+        tabindex=${isAllowed ? '0' : '-1'}
+      >
+        <pkt-icon class="pkt-btn__icon" name="${iconName}"></pkt-icon>
+        <span class="pkt-btn__text">${label}</span>
+      </button>
+    </div>`
+  }
+
+  private renderDayNames(): TemplateResult {
+    const days: TemplateResult[] = []
+
     if (this.weeknumbers) {
       days.push(html`<th><div class="pkt-calendar__week-number">${this.weekString}</div></th>`)
     }
+
     for (let i = 0; i < this.dayStrings.length; i++) {
       days.push(
         html`<th>
@@ -311,101 +291,128 @@ export class PktCalendar extends PktElement {
         </th>`,
       )
     }
-    return html`<tr class="pkt-cal-week-row">
-      ${days}
-    </tr>`
+
+    return html`<tr class="pkt-cal-week-row">${days}</tr>`
   }
 
-  private renderMonthNav() {
-    let monthView: any[] = []
+  private renderMonthNav(): TemplateResult {
     if (this.withcontrols) {
-      monthView.push(
-        html`<div class="pkt-cal-month-picker">
-          <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
-          <select
-            aria-label="${this.strings.dates.month}"
-            class="pkt-input pkt-input-compact"
-            id="${this.id}-monthnav"
-            @change=${(e: any) => {
-              e.stopImmediatePropagation()
-              this.changeMonth(this.year, e.target.value)
-            }}
-          >
-            ${this.monthStrings.map(
-              (month, index) =>
-                html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
-            )}
-          </select>
-          <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
-          <input
-            aria-label="${this.strings.dates.year}"
-            class="pkt-input pkt-cal-input-year pkt-input-compact"
-            id="${this.id}-yearnav"
-            type="number"
-            size="4"
-            placeholder="0000"
-            @change=${(e: any) => {
-              e.stopImmediatePropagation()
-              this.changeMonth(e.target.value, this.month)
-            }}
-            .value=${this.year}
-          />
-        </div> `,
-      )
-    } else {
-      monthView.push(
-        html`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
-          ${this.monthStrings[this.month]} ${this.year}
-        </div>`,
-      )
+      return html`<div class="pkt-cal-month-picker">
+        <label for="${this.id}-monthnav" class="pkt-hide">${this.strings.dates.month}</label>
+        <select
+          aria-label="${this.strings.dates.month}"
+          class="pkt-input pkt-input-compact"
+          id="${this.id}-monthnav"
+          @change=${(e: Event) => {
+            e.stopImmediatePropagation()
+            const target = e.target as HTMLSelectElement
+            this.changeMonth(this.year, parseInt(target.value))
+          }}
+        >
+          ${this.monthStrings.map(
+            (month, index) =>
+              html`<option value=${index} ?selected=${this.month === index}>${month}</option>`,
+          )}
+        </select>
+        <label for="${this.id}-yearnav" class="pkt-hide">${this.strings.dates.year}</label>
+        <input
+          aria-label="${this.strings.dates.year}"
+          class="pkt-input pkt-cal-input-year pkt-input-compact"
+          id="${this.id}-yearnav"
+          type="number"
+          size="4"
+          placeholder="0000"
+          @change=${(e: Event) => {
+            e.stopImmediatePropagation()
+            const target = e.target as HTMLInputElement
+            this.changeMonth(parseInt(target.value), this.month)
+          }}
+          .value=${this.year}
+        />
+      </div>`
     }
-    return monthView
+
+    return html`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
+      ${this.monthStrings[this.month]} ${this.year}
+    </div>`
   }
 
-  private renderDayView(dayCounter: number, today: Date) {
+  private getDayViewData(dayCounter: number, today: Date): TDayViewData {
     const currentDate = newDateYMD(this.year, this.month, dayCounter)
     const currentDateISO = formatISODate(currentDate)
     const isToday = currentDateISO === formatISODate(today)
     const isSelected = this.selected.includes(currentDateISO)
-    const ariaLabel = formatReadableDate(currentDate)
-    const isDisabled =
-      this.isExcluded(currentDate) ||
-      (!isSelected &&
-        this.multiple &&
-        this.maxMultiple > 0 &&
-        this.selected.length >= this.maxMultiple)
-    const tabindex = this.focusedDate
-      ? this.focusedDate === currentDateISO && !isDisabled
-        ? '0'
-        : '-1'
-      : !isDisabled && this.tabIndexSet === 0
-        ? '0'
-        : this.tabIndexSet === dayCounter
-          ? '0'
-          : '-1'
-
-    if (tabindex === '0') {
+    const isDisabled = this.isDayDisabled(currentDate, isSelected)
+    const tabindex = this.calculateTabIndex(currentDateISO, isDisabled, dayCounter)
+
+    return {
+      currentDate,
+      currentDateISO,
+      isToday,
+      isSelected,
+      isDisabled,
+      ariaLabel: formatReadableDate(currentDate),
+      tabindex,
+    }
+  }
+
+  private getDateConstraints(): IDateConstraints {
+    return {
+      earliest: this.earliest,
+      latest: this.latest,
+      excludedates: this.excludedates,
+      excludeweekdays: this.excludeweekdays,
+    }
+  }
+
+  private isDayDisabled(date: Date, isSelected: boolean): boolean {
+    return checkDayDisabled(date, isSelected, this.getDateConstraints(), {
+      multiple: this.multiple,
+      maxMultiple: this.maxMultiple,
+      selectedCount: this.selected.length,
+    })
+  }
+
+  private calculateTabIndex(dateISO: string, isDisabled: boolean, dayCounter: number): string {
+    if (this.focusedDate) {
+      return this.focusedDate === dateISO && !isDisabled ? '0' : '-1'
+    }
+
+    if (!isDisabled && this.tabIndexSet === 0) {
       this.tabIndexSet = dayCounter
+      return '0'
     }
 
-    this.selectableDates.push({ currentDateISO, isDisabled, tabindex })
+    return this.tabIndexSet === dayCounter ? '0' : '-1'
+  }
 
-    const classes = {
+  private getDayCellClasses(data: TDayViewData) {
+    const { currentDateISO, isToday, isSelected } = data
+    const isRangeStart = this.range &&
+      (this.selected.length === 2 || this.rangeHovered !== null) &&
+      currentDateISO === this.selected[0]
+    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
+
+    return {
       'pkt-cal-today': isToday,
       'pkt-cal-selected': isSelected,
       'pkt-cal-in-range': this.inRange[currentDateISO],
-      'pkt-cal-excluded': this.isExcluded(currentDate),
-      'pkt-cal-in-range-first':
-        this.range &&
-        (this.selected.length === 2 || this.rangeHovered !== null) &&
-        currentDateISO === this.selected[0],
-      'pkt-cal-in-range-last':
-        this.range && this.selected.length === 2 && currentDateISO === this.selected[1],
+      'pkt-cal-excluded': this.isExcluded(data.currentDate),
+      'pkt-cal-in-range-first': isRangeStart,
+      'pkt-cal-in-range-last': isRangeEnd,
       'pkt-cal-range-hover':
         this.rangeHovered !== null && currentDateISO === formatISODate(this.rangeHovered),
     }
+  }
+
+  private getDayButtonClasses(data: TDayViewData) {
+    const { currentDateISO, isToday, isSelected, isDisabled } = data
+    const isRangeStart = this.range &&
+      (this.selected.length === 2 || this.rangeHovered !== null) &&
+      currentDateISO === this.selected[0]
+    const isRangeEnd = this.range && this.selected.length === 2 && currentDateISO === this.selected[1]
 
-    const buttonClasses = {
+    return {
       'pkt-calendar__date': true,
       'pkt-calendar__date--today': isToday,
       'pkt-calendar__date--selected': isSelected,
@@ -413,30 +420,38 @@ export class PktCalendar extends PktElement {
       'pkt-calendar__date--in-range': this.inRange[currentDateISO],
       'pkt-calendar__date--in-range-hover':
         this.rangeHovered !== null && currentDateISO === formatISODate(this.rangeHovered),
-      'pkt-calendar__date--range-start':
-        this.range &&
-        (this.selected.length === 2 || this.rangeHovered !== null) &&
-        currentDateISO === this.selected[0],
-      'pkt-calendar__date--range-end':
-        this.range && this.selected.length === 2 && currentDateISO === this.selected[1],
+      'pkt-calendar__date--range-start': isRangeStart,
+      'pkt-calendar__date--range-end': isRangeEnd,
     }
+  }
+
+  private handleDayFocus(date: Date, dateISO: string): void {
+    if (this.range && !this.isExcluded(date)) {
+      this.handleRangeHover(date)
+    }
+    this.focusedDate = dateISO
+  }
+
+  private renderDayView(dayCounter: number, today: Date) {
+    const data = this.getDayViewData(dayCounter, today)
+    const { currentDate, currentDateISO, isSelected, isDisabled, ariaLabel, tabindex } = data
 
-    return html`<td class=${classMap(classes)}>
+    // Track selectable dates for keyboard navigation
+    this.selectableDates.push({ currentDateISO, isDisabled, tabindex })
+
+    const cellClasses = this.getDayCellClasses(data)
+    const buttonClasses = this.getDayButtonClasses(data)
+
+    return html`<td class=${classMap(cellClasses)}>
       <button
         type="button"
         aria-pressed=${isSelected ? 'true' : 'false'}
         ?disabled=${isDisabled}
-        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only ${classMap(
-          buttonClasses,
-        )}"
-        @mouseover=${() =>
-          this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)}
-        @focus=${() => {
-          this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)
-          this.focusedDate = currentDateISO
-        }}
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only ${classMap(buttonClasses)}"
+        @mouseover=${() => this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)}
+        @focus=${() => this.handleDayFocus(currentDate, currentDateISO)}
         aria-label="${ariaLabel}"
-        tabindex=${this.selectableDates.find((x) => x.currentDateISO === currentDateISO)?.tabindex}
+        tabindex=${tabindex}
         data-disabled=${isDisabled ? 'disabled' : nothing}
         data-date=${currentDateISO}
         @keydown=${(e: KeyboardEvent) => {
@@ -457,86 +472,73 @@ export class PktCalendar extends PktElement {
     </td>`
   }
 
+  private renderEmptyDayCell(day: number): TemplateResult {
+    return html`<td class="pkt-cal-other">
+      <div
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+        data-disabled="disabled"
+      >
+        <span class="pkt-btn__text pkt-txt-14-light">${day}</span>
+      </div>
+    </td>`
+  }
+
+  private renderWeekRow(cells: TemplateResult[]): TemplateResult {
+    return html`<tr class="pkt-cal-week-row" role="row">${cells}</tr>`
+  }
+
   private renderCalendarBody() {
     const today = todayInTz()
-    const firstDayOfMonth = newDateYMD(this.year, this.month, 1)
-    const lastDayOfMonth = newDateYMD(this.year, this.month + 1, 0)
-    const startingDay = (firstDayOfMonth.getDay() + 6) % 7
-    const numDays = lastDayOfMonth.getDate()
-    const numRows = Math.ceil((numDays + startingDay) / 7)
-    const lastDayOfPrevMonth = newDateYMD(this.year, this.month, 0)
-    const numDaysPrevMonth = lastDayOfPrevMonth.getDate()
+    const dimensions = calculateCalendarDimensions(this.year, this.month)
 
     let dayCounter = 1
-    this.week = getWeek(newDateYMD(this.year, this.month, 1))
+    this.week = dimensions.initialWeek
 
-    const rows: any[] = []
+    const rows: TemplateResult[] = []
 
-    for (let i = 0; i < numRows; i++) {
-      const cells: any[] = []
+    for (let i = 0; i < dimensions.numRows; i++) {
+      const cells: TemplateResult[] = []
 
-      this.weeknumbers && cells.push(html`<td class="pkt-cal-week">${this.week}</td>`)
+      // Add week number if enabled
+      if (this.weeknumbers) {
+        cells.push(html`<td class="pkt-cal-week">${this.week}</td>`)
+      }
       this.week++
 
-      for (let j = 1; j < 8; j++) {
-        if (i === 0 && j < startingDay + 1) {
-          const dayFromPrevMonth = numDaysPrevMonth - (startingDay - j)
-          cells.push(
-            html`<td class="pkt-cal-other">
-              <div
-                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
-                data-disabled="disabled"
-              >
-                <span class="pkt-btn__text pkt-txt-14-light">${dayFromPrevMonth}</span>
-              </div>
-            </td>`,
-          )
-        } else if (dayCounter > numDays) {
-          cells.push(
-            html`<td class="pkt-cal-other">
-              <div
-                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
-                data-disabled="disabled"
-              >
-                <span class="pkt-btn__text pkt-txt-14-light">${dayCounter - numDays}</span>
-              </div>
-            </td>`,
-          )
-          dayCounter++
-        } else {
+      // Render each day in the week
+      for (let j = 0; j < DAYS_PER_WEEK; j++) {
+        const cellType = getCellType(i, j, dayCounter, dimensions)
+
+        if (cellType === 'current-month') {
           cells.push(this.renderDayView(dayCounter, today))
           dayCounter++
+        } else {
+          const dayNumber = getDayNumber(cellType, j, dayCounter, dimensions)
+          cells.push(this.renderEmptyDayCell(dayNumber))
+          if (cellType === 'next-month') {
+            dayCounter++
+          }
         }
       }
 
-      rows.push(
-        html`<tr class="pkt-cal-week-row" role="row">
-          ${cells}
-        </tr>`,
-      )
+      rows.push(this.renderWeekRow(cells))
     }
 
     return rows
   }
 
-  private isExcluded(date: Date) {
-    const excludedDatesStrings = this.excludedates.map((d) =>
-      typeof d === 'string' ? d : formatISODate(d),
-    )
-
-    return !isDateSelectable(
-      date,
-      this.earliest,
-      this.latest,
-      excludedDatesStrings,
-      this.excludeweekdays,
-    )
+  /**
+   * Date validation
+   */
+  private isExcluded(date: Date): boolean {
+    return isDateExcluded(date, this.getDateConstraints())
   }
 
-  isPrevMonthAllowed() {
-    const prevMonth = newDateYMD(this.year, this.month, 0)
-    if (this.earliest && newDate(this.earliest) > prevMonth) return false
-    return true
+  /**
+   * Month navigation
+   */
+  isPrevMonthAllowed(): boolean {
+    return checkPrevMonthAllowed(this.year, this.month, this.earliest)
   }
 
   private prevMonth() {
@@ -545,14 +547,8 @@ export class PktCalendar extends PktElement {
     this.changeMonth(newYear, newMonth)
   }
 
-  isNextMonthAllowed() {
-    const nextMonth = newDateYMD(
-      this.month === 11 ? this.year + 1 : this.year,
-      this.month === 11 ? 0 : this.month + 1,
-      1,
-    )
-    if (this.latest && newDate(this.latest) < nextMonth) return false
-    return true
+  isNextMonthAllowed(): boolean {
+    return checkNextMonthAllowed(this.year, this.month, this.latest)
   }
 
   private nextMonth() {
@@ -561,7 +557,7 @@ export class PktCalendar extends PktElement {
     this.changeMonth(newYear, newMonth)
   }
 
-  private changeMonth(year: number, month: number) {
+  private changeMonth(year: number, month: number): void {
     this.year = typeof year === 'string' ? parseInt(year) : year
     this.month = typeof month === 'string' ? parseInt(month) : month
     this.currentmonth = newDateFromDate(new Date(this.year, this.month, 1))
@@ -570,40 +566,25 @@ export class PktCalendar extends PktElement {
     this.selectableDates = []
   }
 
-  private isRangeAllowed(date: Date) {
-    let allowed = true
-    if (this._selected.length === 1) {
-      const days = eachDayOfInterval({
-        start: this._selected[0],
-        end: date,
-      })
-
-      if (Array.isArray(days) && days.length) {
-        for (let i = 0; i < days.length; i++) {
-          this.excludedates.forEach((d: Date) => {
-            if (d > this._selected[0] && d < date) {
-              allowed = false
-            }
-          })
-          if (this.excludeweekdays.includes(getISODay(days[i]).toString())) {
-            allowed = false
-          }
-        }
-      }
-    }
-    return allowed
-  }
-
-  private emptySelected() {
+  /**
+   * Date selection logic
+   */
+  private emptySelected(): void {
     this.selected = []
     this._selected = []
     this.inRange = {}
   }
 
-  public addToSelected(selectedDate: Date) {
-    if (this.selected.includes(formatISODate(selectedDate))) return
-    this.selected = [...this.selected, formatISODate(selectedDate)]
-    this._selected = [...this._selected, selectedDate]
+  private normalizeSelected(): string[] {
+    if (typeof this.selected === 'string') {
+      return this.selected.split(',')
+    }
+    return this.selected
+  }
+
+  public addToSelected(selectedDate: Date): void {
+    this.selected = addToSelection(selectedDate, this.normalizeSelected())
+    this._selected = convertSelectedToDates(this.selected)
 
     if (this.range && this.selected.length === 2) {
       this.convertSelected()
@@ -611,83 +592,54 @@ export class PktCalendar extends PktElement {
     }
   }
 
-  public removeFromSelected(selectedDate: Date) {
-    if (this.selected.length === 1) {
-      this.emptySelected()
-    } else {
-      const selectedDateIndex = this.selected.indexOf(formatISODate(selectedDate))
-      const selectedCopy = [...this.selected]
-      const _selectedCopy = [...this._selected]
-      selectedCopy.splice(selectedDateIndex, 1)
-      _selectedCopy.splice(selectedDateIndex, 1)
-      this.selected = selectedCopy
-      this._selected = _selectedCopy
-    }
+  public removeFromSelected(selectedDate: Date): void {
+    this.selected = removeFromSelection(selectedDate, this.normalizeSelected())
+    this._selected = convertSelectedToDates(this.selected)
   }
 
-  public toggleSelected(selectedDate: Date) {
-    const selectedDateISO = formatISODate(selectedDate)
-    this.selected.includes(selectedDateISO)
-      ? this.removeFromSelected(selectedDate)
-      : !(this.maxMultiple && this.selected.length >= this.maxMultiple)
-        ? this.addToSelected(selectedDate)
-        : null
+  public toggleSelected(selectedDate: Date): void {
+    this.selected = toggleSelection(selectedDate, this.normalizeSelected(), this.maxMultiple)
+    this._selected = convertSelectedToDates(this.selected)
   }
 
-  private handleRangeSelect(selectedDate: Date) {
-    const selectedDateISO = formatISODate(selectedDate)
-    if (this.selected.includes(selectedDateISO)) {
-      if (this.selected.indexOf(selectedDateISO) === 0) {
-        this.emptySelected()
-      } else {
-        this.removeFromSelected(selectedDate)
-      }
-    } else {
-      if (this.selected.length > 1) {
-        this.emptySelected()
-        this.addToSelected(selectedDate)
-      } else {
-        if (this.selected.length === 1 && !this.isRangeAllowed(selectedDate)) {
-          this.emptySelected()
-        }
-        if (this.selected.length === 1 && this._selected[0] > selectedDate) {
-          this.emptySelected()
-        }
-        this.addToSelected(selectedDate)
-      }
+  private isRangeAllowed(date: Date): boolean {
+    return checkRangeAllowed(date, this._selected, this.excludedates, this.excludeweekdays)
+  }
+
+  private handleRangeSelect(selectedDate: Date): Promise<void> {
+    this.selected = handleRangeSelection(selectedDate, this.normalizeSelected(), {
+      excludedates: this.excludedates,
+      excludeweekdays: this.excludeweekdays,
+    })
+    this._selected = convertSelectedToDates(this.selected)
+
+    if (this.selected.length === 2) {
+      this.convertSelected()
+    } else if (this.selected.length === 1) {
+      // Clear inRange markers when starting a new range
+      this.inRange = {}
     }
+
     return Promise.resolve()
   }
 
-  private handleRangeHover(date: Date) {
+  private handleRangeHover(date: Date): void {
     if (
-      this.range &&
-      this._selected.length === 1 &&
-      this.isRangeAllowed(date) &&
-      this._selected[0] < date
+      !this.range ||
+      this._selected.length !== 1 ||
+      !this.isRangeAllowed(date) ||
+      this._selected[0] >= date
     ) {
-      this.rangeHovered = date
-
-      this.inRange = {}
-      const days = eachDayOfInterval({
-        start: this._selected[0],
-        end: date,
-      })
-
-      if (Array.isArray(days) && days.length) {
-        for (let i = 0; i < days.length; i++) {
-          const day = days[i]
-          const isInRange = day > this._selected[0] && day < date
-          this.inRange[formatISODate(day)] = isInRange
-        }
-      }
-    } else {
       this.rangeHovered = null
+      return
     }
+
+    this.rangeHovered = date
+    this.inRange = calculateRangeMap(this._selected[0], date)
   }
 
-  public handleDateSelect(selectedDate: Date | null) {
-    if (!selectedDate) return
+  public handleDateSelect(selectedDate: Date | null): Promise<void> {
+    if (!selectedDate) return Promise.resolve()
     if (this.range) {
       this.handleRangeSelect(selectedDate)
     } else if (this.multiple) {
@@ -711,27 +663,33 @@ export class PktCalendar extends PktElement {
     return Promise.resolve()
   }
 
-  public focusOnCurrentDate() {
+  /**
+   * Focus management and event handlers
+   */
+  public focusOnCurrentDate(): void {
     const currentDateISO = formatISODate(newDateFromDate(new Date()))
     const el = this.querySelector(`button[data-date="${currentDateISO}"]`)
+
     if (el instanceof HTMLButtonElement) {
       this.focusedDate = currentDateISO
       el.focus()
-    } else {
-      const firstSelectable = this.selectableDates.find((x) => !x.isDisabled)
-      if (firstSelectable) {
-        const firstSelectableEl = this.querySelector(
-          `button[data-date="${firstSelectable.currentDateISO}"]`,
-        )
-        if (firstSelectableEl instanceof HTMLButtonElement) {
-          this.focusedDate = firstSelectable.currentDateISO
-          firstSelectableEl.focus()
-        }
+      return
+    }
+
+    // Fall back to first selectable date
+    const firstSelectable = this.selectableDates.find((x) => !x.isDisabled)
+    if (firstSelectable) {
+      const firstSelectableEl = this.querySelector(
+        `button[data-date="${firstSelectable.currentDateISO}"]`,
+      )
+      if (firstSelectableEl instanceof HTMLButtonElement) {
+        this.focusedDate = firstSelectable.currentDateISO
+        firstSelectableEl.focus()
       }
     }
   }
 
-  public closeEvent(e: FocusEvent) {
+  public closeEvent(e: FocusEvent): void {
     if (
       !this.contains(e.relatedTarget as Node) &&
       !(e.target as Element).classList.contains('pkt-hide')
@@ -740,7 +698,7 @@ export class PktCalendar extends PktElement {
     }
   }
 
-  public close() {
+  public close(): void {
     this.dispatchEvent(
       new CustomEvent('close', {
         detail: true,