Component

Calendar

Calendar view for displaying events and date selection.

tsx
import { Calendar, MiniCalendar } from 'wss3-forge'

Usage

Full calendar for event management

MiniCalendar for compact date picker

Supports month/week/day views

Events can have colors


January 2026
M
T
W
T
F
S
S

Examples

Mini Calendar

January 2026
M
T
W
T
F
S
S
tsx
1<MiniCalendar
2 selectedDate={new Date()}
3 onDateSelect={(date) => console.log(date)}
4/>

Full Calendar with Events

January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Team Meeting
28
Project Review
29
30
31
1
2
3
4
5
6
7
8
tsx
1<Calendar
2 events={[
3 { id: '1', title: 'Team Meeting', date: new Date(), color: 'var(--brand-primary)' },
4 { id: '2', title: 'Project Review', date: new Date(Date.now() + 86400000), color: 'var(--color-success)' }
5 ]}
6 onDateSelect={(date) => console.log('Date:', date)}
7 onEventClick={(event) => console.log('Event:', event)}
8/>

Previous

Badge

Next

Descriptions

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.