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

# AwCalendarDays

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

The `AwCalendarDays` component is an internal calendar sub-component that renders a grid of days for a given month and year. It's used internally by `AwCalendar` and `AwDate` components.

## Overview

`AwCalendarDays` provides a calendar days grid with:
- 42-day grid (6 weeks × 7 days)
- Day highlighting and styling
- Disabled day support
- Today highlighting
- Custom day class functions
- Functional component for performance

## Usage

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

### Internal Usage

```markup
<AwCalendarDays
    :year="2024"
    :month="0"
    :first-day="1"
    :day-class="getDayClass"
    :day-disabled="isDayDisabled"
    :show-today="true"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| year | Year to display (4 digits) | `Number` | `false` | Current year |
| month | Month to display (0-11) | `Number` | `false` | Current month |
| firstDay | First day of week (0=Sunday, 1=Monday) | `Number` | `false` | `null` (from config) |
| dayClass | Function returning CSS classes for day | `Function` | `false` | `() => null` |
| dayDisabled | Function returning disabled state for day | `Function` | `false` | `() => null` |
| showToday | Highlight today's date | `Boolean` | `false` | `false` |

**Day Class Function:**
```javascript
dayClass(date) {
  // date is a Date object
  // return string, array, or object for Vue class binding
  return 'custom-class'
}
```

**Day Disabled Function:**
```javascript
dayDisabled(date) {
  // date is a Date object
  // return true to disable, false to enable
  return date.getDay() === 0 // Disable Sundays
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom day cell rendering | `{ date, day, month, isOutside, isToday }` | Default day cell |
| before | Content before day grid | - | - |
| after | Content after day grid | - | - |

### Events

This component does not emit events directly (uses parent component's click handlers).

### 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
  }
}
```

## Related Components

- `AwCalendar` - Main calendar component
- `AwCalendarNav` - Calendar navigation component
- `AwCalendarWeekdays` - Weekday headers component
- `AwCalendarDay` - Individual day cell component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is functional (stateless) for optimal performance
- Always renders 42 days (6 weeks) to maintain consistent size
- Days outside current month are marked with `isOutside` flag
- Uses `getCalendarDates` utility function to generate date array
- Day cells are rendered using `AwCalendarDay` component
- Outside days get `aw-calendar__day_outside` class
- Today gets `aw-calendar__day_today` class when `showToday` is true
- Component uses config for `firstDay` if not provided as prop
- Days are clickable and emit events through parent component