# Calendar

## Visual Structure

```
ga-calendar
  ├── ga-calendar__header
  │   ├── ga-calendar__month-year
  │   │   └── ga-calendar__month-year-button
  │   └── ga-calendar__navigation
  │       └── ga-calendar__navigation-button
  ├── ga-calendar__weekdays
  │   └── ga-calendar__weekday
  └── ga-calendar__selection [--day|--month|--year]
      ├── ga-calendar__day [--selected|--current|--special|--disabled|--weekend|--selected-range-*]
      ├── ga-calendar__month [--selected|--disabled]
      └── ga-calendar__year [--selected|--disabled]
```

## Elements Hierarchy

### Core Block

- `ga-calendar` - Calendar component

### Heading Elements

- `ga-calendar__header` - Header section containing month/year selectors and navigation
- `ga-calendar__month-year` - Container for month and year selection buttons
- `ga-calendar__month-year-button` - Interactive buttons for selecting month or year
- `ga-calendar__navigation` - Container for calendar navigation controls
- `ga-calendar__navigation-button` - Previous/next navigation buttons

### Weekdays Elements

- `ga-calendar__weekdays` - Container for weekday headers (only in day selection mode)
- `ga-calendar__weekday` - Individual weekday label (Mo, Tu, We, etc.)

### Selection Elements

- `ga-calendar__selection` - Main selection area for days, months, or years
  - `ga-calendar__selection--day` - Day selection mode
  - `ga-calendar__selection--month` - Month selection mode
  - `ga-calendar__selection--year` - Year selection mode
- `ga-calendar__day` - Individual day cell in day selection mode
  - `ga-calendar__day--selected` - Currently selected day
  - `ga-calendar__day--current` - Today's date
  - `ga-calendar__day--special` - Days with special significance (events, holidays)
  - `ga-calendar__day--disabled` - Non-selectable days
  - `ga-calendar__day--weekend` - Weekend days
  - `ga-calendar__day--selected-range-start` - Start of a selected date range
  - `ga-calendar__day--selected-range-middle` - Middle days in a selected range
  - `ga-calendar__day--selected-range-end` - End of a selected date range
  - `ga-calendar__day--selected-range-middle-hover` - Middle days in hover state during range selection
  - `ga-calendar__day--selected-range-end-hover` - End day in hover state during range selection
- `ga-calendar__month` - Individual month cell in month selection mode
  - `ga-calendar__month--selected` - Currently selected month
  - `ga-calendar__month--disabled` - Non-selectable months
- `ga-calendar__year` - Individual year cell in year selection mode
  - `ga-calendar__year--selected` - Currently selected year
  - `ga-calendar__year--disabled` - Non-selectable years

## Examples

### Day Selection

```html
<div class="ga-calendar">
  <div class="ga-calendar__header">
    <div class="ga-calendar__month-year">
      <button type="button" class="ga-calendar__month-year-button">
        Sep
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__month-year-button">
        2025
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
    </div>
    <div class="ga-calendar__navigation">
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-left, size=24, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-right, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
  <div class="ga-calendar__weekdays">
    <div class="ga-calendar__weekday">Mo</div>
    <div class="ga-calendar__weekday">Tu</div>
    <div class="ga-calendar__weekday">We</div>
    <div class="ga-calendar__weekday">Th</div>
    <div class="ga-calendar__weekday">Fr</div>
    <div class="ga-calendar__weekday">Sa</div>
    <div class="ga-calendar__weekday">Su</div>
  </div>
  <div class="ga-calendar__selection ga-calendar__selection--day">
    <div class="ga-calendar__day">1</div>
    <div class="ga-calendar__day">2</div>
    <div class="ga-calendar__day">3</div>
    <div class="ga-calendar__day">4</div>
    <div class="ga-calendar__day">5</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
    <div class="ga-calendar__day">8</div>
    <div class="ga-calendar__day">9</div>
    <div class="ga-calendar__day ga-calendar__day--special">10</div>
    <div class="ga-calendar__day">11</div>
    <div class="ga-calendar__day">12</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">13</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
    <div class="ga-calendar__day ga-calendar__day--current">15</div>
    <div class="ga-calendar__day">16</div>
    <div class="ga-calendar__day">17</div>
    <div class="ga-calendar__day">18</div>
    <div class="ga-calendar__day">19</div>
    <div
      class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--weekend"
    >
      20
    </div>
    <div class="ga-calendar__day ga-calendar__day--weekend">21</div>
    <div class="ga-calendar__day">22</div>
    <div class="ga-calendar__day">23</div>
    <div class="ga-calendar__day">24</div>
    <div class="ga-calendar__day">25</div>
    <div class="ga-calendar__day">26</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">27</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
    <div class="ga-calendar__day">29</div>
    <div class="ga-calendar__day">30</div>
  </div>
</div>
```

### Month Selection

```html
<div class="ga-calendar">
  <div class="ga-calendar__header">
    <div class="ga-calendar__month-year">
      <button type="button" class="ga-calendar__month-year-button">
        Sep
        <!-- icon: chevron-up, size=16, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__month-year-button">
        2025
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
    </div>
  </div>
  <div class="ga-calendar__selection ga-calendar__selection--month">
    <div class="ga-calendar__month ga-calendar__month--disabled">Jan</div>
    <div class="ga-calendar__month ga-calendar__month--disabled">Feb</div>
    <div class="ga-calendar__month">Mar</div>
    <div class="ga-calendar__month">Apr</div>
    <div class="ga-calendar__month">May</div>
    <div class="ga-calendar__month">Jun</div>
    <div class="ga-calendar__month">Jul</div>
    <div class="ga-calendar__month">Aug</div>
    <div class="ga-calendar__month ga-calendar__month--selected">Sep</div>
    <div class="ga-calendar__month">Oct</div>
    <div class="ga-calendar__month">Nov</div>
    <div class="ga-calendar__month">Dec</div>
  </div>
</div>
```

### Year Selection

```html
<div class="ga-calendar">
  <div class="ga-calendar__header">
    <div class="ga-calendar__month-year">
      <button type="button" class="ga-calendar__month-year-button">
        Sep
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__month-year-button">
        2025
        <!-- icon: chevron-up, size=16, class="ga-icon" -->
      </button>
    </div>
    <div class="ga-calendar__navigation">
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-left, size=24, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-right, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
  <div class="ga-calendar__selection ga-calendar__selection--year">
    <div class="ga-calendar__year ga-calendar__year--disabled">2006</div>
    <div class="ga-calendar__year ga-calendar__year--disabled">2007</div>
    <div class="ga-calendar__year ga-calendar__year--disabled">2008</div>
    <div class="ga-calendar__year">2009</div>
    <div class="ga-calendar__year">2010</div>
    <div class="ga-calendar__year">2011</div>
    <div class="ga-calendar__year">2012</div>
    <div class="ga-calendar__year">2013</div>
    <div class="ga-calendar__year">2014</div>
    <div class="ga-calendar__year">2015</div>
    <div class="ga-calendar__year">2016</div>
    <div class="ga-calendar__year">2017</div>
    <div class="ga-calendar__year">2018</div>
    <div class="ga-calendar__year">2019</div>
    <div class="ga-calendar__year">2020</div>
    <div class="ga-calendar__year">2021</div>
    <div class="ga-calendar__year">2022</div>
    <div class="ga-calendar__year">2023</div>
    <div class="ga-calendar__year">2024</div>
    <div class="ga-calendar__year ga-calendar__year--selected">2025</div>
    <div class="ga-calendar__year">2026</div>
    <div class="ga-calendar__year">2027</div>
    <div class="ga-calendar__year">2028</div>
    <div class="ga-calendar__year">2029</div>
    <div class="ga-calendar__year">2030</div>
  </div>
</div>
```

### Range Selection

```html
<div class="ga-calendar">
  <div class="ga-calendar__header">
    <div class="ga-calendar__month-year">
      <button type="button" class="ga-calendar__month-year-button">
        Sep
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__month-year-button">
        2025
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
    </div>
    <div class="ga-calendar__navigation">
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-left, size=24, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-right, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
  <div class="ga-calendar__weekdays">
    <div class="ga-calendar__weekday">Mo</div>
    <div class="ga-calendar__weekday">Tu</div>
    <div class="ga-calendar__weekday">We</div>
    <div class="ga-calendar__weekday">Th</div>
    <div class="ga-calendar__weekday">Fr</div>
    <div class="ga-calendar__weekday">Sa</div>
    <div class="ga-calendar__weekday">Su</div>
  </div>
  <div class="ga-calendar__selection ga-calendar__selection--day">
    <div class="ga-calendar__day">1</div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-start">2</div>
    <div
      class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--special"
    >
      3
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      4
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      5
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
    >
      6
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
    >
      7
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--current"
    >
      8
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      9
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      10
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      11
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
      12
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end"
    >
      13
    </div>
    <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
    <div class="ga-calendar__day">15</div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-start">
      16
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--special"
    >
      17
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      18
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      19
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
    >
      20
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
    >
      21
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--current"
    >
      22
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      23
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      24
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      25
    </div>
    <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
      26
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end-hover"
    >
      27
    </div>
    <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
    <div class="ga-calendar__day">29</div>
    <div class="ga-calendar__day">30</div>
  </div>
</div>
```

### Day States

```html
<div class="ga-calendar">
  <div class="ga-calendar__header">
    <div class="ga-calendar__month-year">
      <button type="button" class="ga-calendar__month-year-button">
        Sep
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__month-year-button">
        2025
        <!-- icon: chevron-down, size=16, class="ga-icon" -->
      </button>
    </div>
    <div class="ga-calendar__navigation">
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-left, size=24, class="ga-icon" -->
      </button>
      <button type="button" class="ga-calendar__navigation-button">
        <!-- icon: chevron-right, size=24, class="ga-icon" -->
      </button>
    </div>
  </div>
  <div class="ga-calendar__weekdays">
    <div class="ga-calendar__weekday">Mo</div>
    <div class="ga-calendar__weekday">Tu</div>
    <div class="ga-calendar__weekday">We</div>
    <div class="ga-calendar__weekday">Th</div>
    <div class="ga-calendar__weekday">Fr</div>
    <div class="ga-calendar__weekday">Sa</div>
    <div class="ga-calendar__weekday">Su</div>
  </div>
  <div class="ga-calendar__selection ga-calendar__selection--day">
    <div class="ga-calendar__day">1</div>
    <div class="ga-calendar__day ga-calendar__day--selected">2</div>
    <div class="ga-calendar__day ga-calendar__day--disabled">3</div>
    <div
      class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--disabled"
    >
      4
    </div>
    <div class="ga-calendar__day">5</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
    <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
    <div class="ga-calendar__day ga-calendar__day--special">8</div>
    <div
      class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected"
    >
      9
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--special ga-calendar__day--disabled"
    >
      10
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected ga-calendar__day--disabled"
    >
      11
    </div>
    <div class="ga-calendar__day">12</div>
    <div
      class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
    >
      13
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
    >
      14
    </div>
    <div class="ga-calendar__day ga-calendar__day--current">15</div>
    <div
      class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected"
    >
      16
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--current ga-calendar__day--disabled"
    >
      17
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected ga-calendar__day--disabled"
    >
      18
    </div>
    <div class="ga-calendar__day">19</div>
    <div
      class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
    >
      20
    </div>
    <div
      class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
    >
      21
    </div>
    <div class="ga-calendar__day">22</div>
    <div class="ga-calendar__day">23</div>
    <div class="ga-calendar__day">24</div>
    <div class="ga-calendar__day">25</div>
    <div class="ga-calendar__day">26</div>
    <div class="ga-calendar__day">27</div>
    <div class="ga-calendar__day">28</div>
    <div class="ga-calendar__day">29</div>
    <div class="ga-calendar__day">30</div>
  </div>
</div>
```