Calendar
A container for displaying date information with date selection functionality.
Khi nào sử dụng
Lịch sự kiện
Hiện sự kiện, cuộc họp hoặc deadline trên lịch.
Chọn ngày toàn trang
Giao diện lịch lớn cho việc lập kế hoạch.
Date Navigation
Browse and select dates with contextual data.
Hướng dẫn
Do
- Highlight ngày hiện tại rõ ràng
- Cho phép chuyển nhanh giữa tháng và năm
Don't
- Dùng Calendar inline khi chỉ cần chọn ngày đơn
- Nhồi quá nhiều nội dung vào ô ngày nhỏ
Basic
2026
May
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 01 | 02 |
03 | 04 | 05 | 06 | 07 | 08 | 09 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 01 | 02 | 03 | 04 | 05 | 06 |
Full
2026
May
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 01 | 02 |
03 | 04 | 05 | 06 | 07 | 08 | 09 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 01 | 02 | 03 | 04 | 05 | 06 |