---
metaTitle: Calendar Nav component | AwesCode UI
meta:
  - name: description
    content: The <AwCalendarNav /> component is used to render Calendar Nav - UI Vue component for AwesCode UI.
title: Calendar Nav
---

# AwCalendarNav

**Category:** Organism (Internal) | **Import:** Dynamic

The `AwCalendarNav` component is an internal calendar sub-component that renders navigation controls (previous/next buttons) and displays the current month and year. It's used internally by `AwCalendar` and `AwDate` components.

## Overview

`AwCalendarNav` provides calendar navigation with:
- Previous/next month buttons
- Current month and year display
- Disabled state support
- Internationalized month names
- Icon-based navigation buttons

## Usage

This component is typically used internally by `AwCalendar` and `AwDate`. Direct usage is not recommended unless building custom calendar components.

### Internal Usage

```markup
<AwCalendarNav
    :month="0"
    :year="2024"
    :disabled-prev="false"
    :disabled-next="false"
    @click:prev="shiftMonth(-1)"
    @click:next="shiftMonth(1)"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| month | Month to display (0-11) | `Number` | `false` | - |
| year | Year to display (4 digits) | `Number` | `false` | - |
| months | Custom month names array or function | `Array` / `Function` | `false` | `null` |
| disabledPrev | Disable previous button | `Boolean` | `false` | `false` |
| disabledNext | Disable next button | `Boolean` | `false` | `false` |

**Months Format:**
- Array: `['January', 'February', ...]`
- Function: Day.js locale function (e.g., `dayjs.localeData().months()`)

### Slots

This component does not have slots.

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click:prev | - | Emitted when previous button is clicked |
| click:next | - | Emitted when next button is clicked |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwCalendar: {
    months: ['January', 'February', 'March', ...]
  }
}
```

## Related Components

- `AwCalendar` - Main calendar component
- `AwCalendarDays` - Calendar days grid component
- `AwCalendarWeekdays` - Weekday headers component
- `AwButton` - Button component used for navigation
- `AwIconSystemMono` - Icon component used for arrows

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Navigation buttons only show if corresponding event listeners are present
- Month names are automatically internationalized using Day.js locale
- Falls back to config months if Day.js locale is not available
- Previous button shows left arrow icon
- Next button shows right arrow icon (rotated 180°)
- Title spacing adjusts based on which buttons are visible
- Component uses `AwButton` with `theme="icon"` for navigation buttons
- Month and year are displayed as plain text (format: "Month Year")