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

# AwCalendar

**Category:** Organism | **Import:** Dynamic

The `AwCalendar` component is a date picker calendar that displays a month view with navigation, weekday headers, and date selection. It supports single date, multiple dates, and date range selection.

## Overview

`AwCalendar` provides a calendar solution with:
- Month view with navigation
- Single date, multiple dates, or date range selection
- Min/max date constraints
- Custom disabled date filtering
- Day.js integration for date handling
- Customizable weekday start (first day of week)
- Today highlighting
- Custom header and footer slots

## Usage

### Basic Example

```markup
<AwCalendar v-model="selectedDate" />
```

### Date Range

```markup
<AwCalendar v-model="dateRange" range />
```

### Multiple Dates

```markup
<AwCalendar v-model="selectedDates" />
<!-- v-model is array -->
```

### With Min/Max Dates

```markup
<AwCalendar 
    v-model="selectedDate"
    :min="minDate"
    :max="maxDate"
/>
```

### With Disabled Days

```markup
<AwCalendar 
    v-model="selectedDate"
    :disabled-days="(date) => date.day() === 0 || date.day() === 6"
/>
```

### Custom Format

```markup
<AwCalendar 
    v-model="selectedDate"
    parse-format="YYYY-MM-DD"
    output-format="toDate"
/>
```

### Custom Header

```markup
<AwCalendar v-model="selectedDate">
    <template #header="{ viewDate, shiftMonth }">
        <div class="custom-header">
            <AwButton @click="shiftMonth(-1)">Prev</AwButton>
            <span>{{ viewDate.format('MMMM YYYY') }}</span>
            <AwButton @click="shiftMonth(1)">Next</AwButton>
        </div>
    </template>
</AwCalendar>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Selected date(s) or range | `String` / `Number` / `Object` / `Date` / `Array` / `Object` | `false` | `null` |
| parseFormat | Custom parse format for string dates (e.g., `'YYYY-MM-DD[T]HH:mm:sszz'`) | `String` | `false` | `''` |
| outputFormat | Output format: `'toDayjs'`, `'toDate'`, `'toJSON'`, or format string | `String` | `false` | `'toDate'` |
| min | Minimum available date | `String` / `Number` / `Object` / `Date` | `false` | `null` |
| max | Maximum available date | `String` / `Number` / `Object` / `Date` | `false` | `null` |
| disabledDays | Function to filter disabled dates | `Function` | `false` | `() => false` |
| range | Enable date range selection | `Boolean` | `false` | `false` |
| firstDay | First day of week (0 = Sunday) | `Number` | `false` | `1` |
| showToday | Highlight today's date | `Boolean` | `false` | `true` |

**Range Value Format:**
```javascript
{ start: Date, end: Date }
```

**Multiple Dates Format:**
```javascript
[Date, Date, ...]
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| header | Custom header (replaces navigation) | `{ viewDate, isDisabledPrev, isDisabledNext, shiftMonth }` | Default `AwCalendarNav` component |
| footer | Footer content | - | - |
| day | Custom day cell rendering | `{ date, dayjs, isSelected, isDisabled, isToday, isInRange, isStart, isEnd }` | Default day cell |
| day-outside | Custom rendering for days outside current month | `{ date, dayjs }` | Default day cell |
| day-inside | Custom rendering for days inside current month | `{ date, dayjs, isSelected, isDisabled, isToday, isInRange, isStart, isEnd }` | Default day cell |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `Date` / `Array` / `Object` | Emitted when date is selected (format depends on `outputFormat`) |

### 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: {
    firstDay: 1,  // Monday
    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January', 'February', ...]
  }
}
```

## Related Components

- `AwDate` - Date input with calendar dropdown
- `AwCalendarNav` - Calendar navigation component
- `AwCalendarDays` - Calendar days grid component
- `AwCalendarWeekdays` - Weekday headers component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Uses Day.js for date manipulation and formatting
- When `range` is true, value should be `{ start, end }` object
- When value is array, supports multiple date selection
- `disabledDays` function receives Day.js object, return `true` to disable
- `parseFormat` is used when parsing string dates
- `outputFormat` determines what type is emitted in `input` event
- Navigation buttons are automatically disabled at min/max dates
- Component uses calendar mixin for shared date logic
- Hover effect shows range preview when selecting range
- Today is highlighted by default (can be disabled)