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

# AwCalendarView

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

The `AwCalendarView` component is an internal calendar sub-component that renders a simplified calendar view without navigation. It displays weekday headers and a days grid, and emits date click events.

## Overview

`AwCalendarView` provides a simplified calendar view with:
- Weekday headers
- Days grid
- Date click handling
- Custom day styling
- Disabled day support
- No navigation controls

## Usage

This component is typically used internally or for custom calendar implementations that don't need navigation.

### Basic Example

```markup
<AwCalendarView
    :month="0"
    :year="2024"
    :first-day="1"
    :day-class="getDayClass"
    :day-disabled="isDayDisabled"
    @click:date="handleDateClick"
/>
```

## API

### Props

All props from `AwCalendarDays` are supported, plus:

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| firstDay | First day of week (0=Sunday, 1=Monday) | `Number` | `false` | From config |

**Inherited from AwCalendarDays:**
- `year`, `month`, `dayClass`, `dayDisabled`, `showToday`

### Slots

All slots from `AwCalendarDays` are supported:

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| day | Custom day cell rendering | `{ date, day, month, isOutside, isToday }` | Default day cell |
| day-outside | Custom rendering for days outside month | `{ date, day, month }` | Default day cell |
| day-inside | Custom rendering for days inside month | `{ date, day, month, isToday }` | Default day cell |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click:date | `Date` | Emitted when a date 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: {
    firstDay: 1  // Monday
  }
}
```

## Related Components

- `AwCalendar` - Main calendar component with navigation
- `AwCalendarDays` - Calendar days grid component
- `AwCalendarWeekdays` - Weekday headers component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component name is empty in source (internal use)
- Uses `getDateFromEvent` utility to extract date from click event
- Date clicks are detected via event delegation
- All day slots are proxied to parent component
- Component is simpler than `AwCalendar` (no navigation)
- Uses same day rendering logic as `AwCalendarDays`
- Date object is extracted from clicked element's `data-time` attribute