Calendar - TraderFrame

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

Calendar page — full 12-month grid for 2025 showing green profitable days and red losing days

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

​Overview

​Page Layout

​Year Selector

​Day Colour Coding

​Account Mode

​Clicking a Day

​Loading State

​How It Connects to Other Pages