PnL Calendar

PnL Calendar

1 / 6

January 2026

SunMonTueWedThuFriSat

1-935

2+5k

3+3.2k

4-4k

5+2.3k

6+478

7+4.5k

8+5.9k

9+4.1k

10+1.7k

11-3.4k

12+5.2k

13+1.2k

14+3k

15+4.8k

16-739

17-2.5k

18+4.3k

19+282

20+1.9k

21+5.9k

22+5.4k

23+3.7k

24+562

25+4.6k

26-4.1k

27-2.3k

28-5k

29+3.3k

30+4.9k

31+876

February 2026

SunMonTueWedThuFriSat

1-4.8k

2-823

3+2.6k

4+4.4k

5+366

6+2.1k

7-3.9k

8+5.7k

9+1.7k

10+1.2k

11+5.2k

12-4.7k

13-2.9k

14-5.6k

15+3.9k

16+3.4k

17+1.6k

18+3.8k

19-2k

20+3.9k

21-5.7k

22+1.7k

23+3.5k

24+5.3k

25+1.3k

26-3k

27+4.8k

28+1.3k

March 2026

SunMonTueWedThuFriSat

1-2.1k

2+1.7k

3+5.7k

4+2.6k

5+813

6+356

7+4.4k

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Component Code (Next.js)

Use Copy Code to load the current local source for the PnL Calendar component.

Claude / Codex Prompt

Build a compact, light-theme PnL Calendar component in Next.js.

Requirements:
- Show three months per page with a compact monthly heatmap layout.
- Header includes title and pagination indicator with previous/next arrows.
- Each day cell displays day number plus formatted PnL value.
- Positive PnL uses soft green tones, negative uses soft red tones, and future/unavailable days use muted gray.
- Expose props for months, page/pageCount, onPageChange, and onDayClick.
- Make the layout responsive: one column on mobile, two on tablets, three on desktop.