## Calendar ### Semantic Parts - root（`semantic-mark-root`）: Root element containing background, border, border-radius and overall layout structure of the calendar component - header（`semantic-mark-header`）: Header element with layout and style control for year selector, month selector and mode switcher - body（`semantic-mark-body`）: Body element with padding and layout control for the calendar table that contains the calendar grid - content（`semantic-mark-content`）: Content element with width, height and table styling control for the calendar table - item（`semantic-mark-item`）: Item element with background, border, hover state, selected state and other interactive styles for calendar cells - itemContent（`semantic-mark-itemContent`）: Item content element with height, overflow and other style control for custom content area inside calendar cells ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
2016
Nov
Su Mo Tu We Th Fr Sa
30
31
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
01
02
03
04
05
06
07
08
09
10
```