> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traderframe.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar

> View your full year of trading activity colour-coded by daily profit and loss

## Overview

The **Calendar** page gives you a visual year-at-a-glance view of your trading activity. Every day you placed trades is colour-coded by whether it was a profitable or losing day.

**URL:** `/calendar`

<img src="https://mintcdn.com/miraimindsllp/bOuaRRkM8tyNNsmK/images/calendar/calendar-full.png?fit=max&auto=format&n=bOuaRRkM8tyNNsmK&q=85&s=bb69f507b1161b7a5e9c043b963183e2" alt="Calendar page — full 12-month grid for 2025 showing green profitable days and red losing days" width="1440" height="1922" data-path="images/calendar/calendar-full.png" />

***

## Page Layout

```
┌──────────────────────────────────────┐
│  HEADER                              │
│  Title + Year selector dropdown      │
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│  12-MONTH CALENDAR GRID              │
│  January  February  March            │
│  April    May       June             │
│  July     August    September        │
│  October  November  December         │
└──────────────────────────────────────┘
```

All 12 months are shown on a single page in a grid — 3 columns on desktop, 1 column on mobile.

***

## Year Selector

A **dropdown at the top** lets you switch between years to view historical trading activity. By default the current year is shown.

Changing the year refetches all calendar data for that year.

***

## Day Colour Coding

Each day with trades is marked with a colour:

| Colour                  | Meaning                                                |
| ----------------------- | ------------------------------------------------------ |
| 🟩 **Green**            | Net profitable day (netPnL > 0)                        |
| 🟥 **Red / Pink**       | Net losing day (netPnL \< 0)                           |
| **Neutral / No colour** | Breakeven or no trades placed that day                 |
| **Faded**               | Days outside the current month (calendar padding days) |

***

## Account Mode

The calendar respects the **Live / Demo** toggle in the top navigation. Switching modes reloads the calendar with data for that account type.

***

## Clicking a Day

Clicking any marked day opens the trade detail for that date — showing all trades placed on that day with their P\&L breakdown.

***

## Loading State

While calendar data is fetching, skeleton placeholders appear for the grid — no blank areas or layout shifts.

***

## How It Connects to Other Pages

| From                     | To                                                                        |
| ------------------------ | ------------------------------------------------------------------------- |
| Dashboard Trade Calendar | Shows the current month — click "View all" to open the full Calendar page |
| Calendar page            | Click a day → opens Journal or trade log for that date                    |

***