Appearance
Calendar 日历
按照日历形式展示数据或日期的容器。
CSS样式
全部 calendar 样式代码：
查看代码
css
/* HnuiIcon */
@import url('./icon.css');
/* 全局css变量 */
:root {
/* #region vars-BrandColor */
/* 品牌色 */
--hnui-brand-color: #1f78ff;
--hnui-brand-color1: #005ce5;
--hnui-brand-color2: #4b83f7;
--hnui-brand-color3: #3384ff;
--hnui-brand-color4: #599bff;
--hnui-brand-color5: #80b2ff;
--hnui-brand-color6: #b2d1ff;
--hnui-brand-color7: #cce0ff;
--hnui-brand-color8: #d9e8ff;
--hnui-brand-color9: #ebf3ff;
--hnui-brand-color10: #f2f7ff;
/* 状态颜色 */
--hnui-brand-color-normal: var(--hnui-brand-color);
--hnui-brand-color-hover: var(--hnui-brand-color3);
--hnui-brand-color-active: var(--hnui-brand-color1);
--hnui-brand-color-elected: var(--hnui-brand-color9);
--hnui-brand-color-disabled: var(--hnui-brand-color7);
--hnui-brand-color-disabled-border: var(--hnui-brand-color6);
--hnui-brand-color-disabled-bg: var(--hnui-brand-color10);
/* #endregion vars-BrandColor */
/* #region vars-DomainColor */
/* 功能色 */
--hnui-success-color: #2ba471;
--hnui-success-hover-color: #51bd90;
--hnui-success-active-color: #2ba471;
--hnui-warning-color: #faad14;
--hnui-warning-hover-color: #ffc146;
--hnui-warning-active-color: #db960b;
--hnui-danger-color: #ff4d4d;
--hnui-danger-hover-color: #ff7676;
--hnui-danger-active-color: #d82a2a;
--hnui-info-color: #8d97a6;
--hnui-info-hover-color: #b2b7c0;
--hnui-info-active-color: #707a89;
/* #endregion vars-DomainColor */
/* #region vars-NeutralColor */
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #2d2e33;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #43454d;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #5d606a;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #9298a0;
/* 禁用文本 */
--hnui-neutral-color-5: #b7bdc7;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #dfe2e7;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #f0f2f5;
/* 最低颜色等 */
--hnui-neutral-color-8: #fafbfc;
/* #endregion vars-NeutralColor */
/* 默认文字颜色 */
--hnui-text-color: var(--hnui-neutral-color-2);
--hnui-info-bg: #eceff4;
--hnui-info-bg2: #e7e7e7;
--hnui-color-white: #fff;
--hnui-color-black: #000;
--hnui-border-width: 1px;
--hnui-border-dashed-width: 2px;
--hnui-border-color: var(--hnui-neutral-color-6);
--hnui-disabled-bg-color: var(--hnui-neutral-color-7);
--hnui-disabled-color: var(--hnui-neutral-color-5);
--hnui-control-height: 32px;
--hnui-control-height-sm: 24px;
--hnui-control-height-lg: 40px;
--hnui-control-transparent: transparent;
}
.dark {
--hnui-brand-color6: rgb(50, 59, 74);
--hnui-brand-color7: #30353d;
--hnui-brand-color8: #42484f;
--hnui-brand-color9: #4c4f54;
--hnui-brand-color10: #29292c;
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #c4c8dc;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #b9bed3;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #afb5c7;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #6a6f75;
/* 禁用文本 */
--hnui-neutral-color-5: #53565b;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #59595a;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #343535;
/* 最低颜色等 */
--hnui-neutral-color-8: #151516;
--hnui-info-bg: #393b3d;
--hnui-color-white: #000;
--hnui-color-black: #fff;
--hnui-control-transparent: transparent;
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
color: var(--hnui-neutral-color-2);
}
/* #region vars-FontFamily */
@font-face {
font-family: 'DIN';
src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* 使用数字字体 */
.use-font {
font-family: DIN;
}
/* #endregion vars-FontFamily */
/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}
/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}
/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */css
@import url("../button/button.css");
/* ==================== 通用日历面板 ==================== */
/* 日历容器 */
.hnui-calendar-full {
width: 100%;
background-color: transparent;
border: 1px solid var(--hnui-border-color);
border-radius: 6px;
padding: 24px;
box-sizing: border-box;
}
/* 日历头部 */
.hnui-calendar-header {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 24px;
}
/* 头部左侧控制区 */
.hnui-calendar-header-left {
display: flex;
align-items: center;
gap: 8px;
}
/* 年月选择器 */
.hnui-calendar-year-select,
.hnui-calendar-month-select {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 30px 0 12px;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
background-color: transparent;
color: var(--hnui-text-color);
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}
.hnui-calendar-year-select:hover,
.hnui-calendar-month-select:hover {
border-color: var(--hnui-brand-color-normal);
}
.hnui-calendar-year-select .hnui-icon,
.hnui-calendar-month-select .hnui-icon {
position: absolute;
right: 10px;
color: var(--hnui-neutral-color-4);
font-size: 12px;
}
/* 头部右侧按钮组 */
.hnui-calendar-header-right {
display: flex;
align-items: center;
gap: 8px;
}
/* 月/年切换按钮 */
.hnui-calendar-mode-switch {
display: flex;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
overflow: hidden;
height: 32px;
margin-left: 8px;
box-sizing: border-box;
padding: 2px;
background-color: var(--hnui-border-color);
}
.hnui-calendar-mode-btn {
background-color: transparent;
color: var(--hnui-text-color);
border: none;
font-size: 14px;
width: 48px;
cursor: pointer;
transition: all 0.2s;
padding: 0 6px;
}
.hnui-calendar-mode-btn+.hnui-calendar-mode-btn {
border-left: 1px solid var(--hnui-border-color);
}
.hnui-calendar-mode-btn:hover {
background-color: var(--hnui-neutral-color-8);
}
.hnui-calendar-mode-btn-selected {
background-color: var(--hnui-neutral-color-8);
}
/* 日历主体 */
.hnui-calendar-body {
width: 100%;
}
/* 日历表格 */
.hnui-calendar-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
/* 星期头部 */
.hnui-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 8px;
}
.hnui-calendar-weekday {
text-align: right;
padding: 8px 0;
color: var(--hnui-text-color);
font-size: 14px;
font-weight: normal;
padding-right: 12px;
}
/* 日期网格 */
.hnui-calendar-dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
}
/* 日期单元格 */
.hnui-calendar-cell {
position: relative;
height: 60px;
border-top: 1px solid var(--hnui-border-color);
padding: 8px;
box-sizing: border-box;
background-color: transparent;
text-align: right;
margin-right: 6px;
font-size: 12px;
}
/* 移除右侧边框（除最后一列） */
.hnui-calendar-cell:not(:nth-child(7n)) {
border-right: none;
}
/* 移除底部边框（除最后一行） */
.hnui-calendar-cell:nth-child(-n+42):not(:nth-child(n+36)) {
border-bottom: none;
}
/* 日期数字 */
.hnui-calendar-date {
font-size: 14px;
color: var(--hnui-text-color);
font-weight: normal;
}
/* 非当前月份日期 */
.hnui-calendar-cell-not-current-month .hnui-calendar-date {
color: var(--hnui-neutral-color-4);
}
/* 选中状态 */
.hnui-calendar-cell-selected {
background-color: var(--hnui-brand-color9);
border-top: 2px solid var(--hnui-brand-color1);
}
/* Hover 状态 */
.hnui-calendar-cell:hover {
background-color: var(--hnui-neutral-color-7);
cursor: pointer;
}
.hnui-calendar-cell-selected:hover {
background-color: var(--hnui-brand-color9);
}
/* ==================== 卡片日历面板 ==================== */
/* 卡片日历容器 */
.hnui-calendar-card {
width: 480px;
background-color: transparent;
border: 1px solid var(--hnui-border-color);
border-radius: 6px;
padding: 16px;
box-sizing: border-box;
}
/* 卡片日历头部 */
.hnui-calendar-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
/* 卡片日历头部左侧 */
.hnui-calendar-card-header-left {
display: flex;
align-items: center;
gap: 8px;
}
/* 卡片日历头部右侧 */
.hnui-calendar-card-header-right {
display: flex;
border-radius: 3px;
overflow: hidden;
padding: 2px;
background-color: var(--hnui-border-color);
}
/* 卡片星期头部 */
.hnui-calendar-card-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 8px;
}
.hnui-calendar-card-weekday {
text-align: center;
padding: 8px 0;
color: var(--hnui-neutral-color-4);
font-size: 12px;
font-weight: normal;
}
/* 卡片日期网格 */
.hnui-calendar-card-dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
/* 卡片日期单元格 */
.hnui-calendar-card-cell {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s;
}
/* 卡片日期数字 */
.hnui-calendar-card-date {
font-size: 14px;
color: var(--hnui-text-color);
}
/* 卡片非当前月份日期 */
.hnui-calendar-card-cell-not-current-month .hnui-calendar-card-date {
color: var(--hnui-neutral-color-4);
}
/* 卡片选中日期 */
.hnui-calendar-card-cell-selected {
background-color: var(--hnui-brand-color-normal);
}
.hnui-calendar-card-cell-selected .hnui-calendar-card-date {
color: #ffffff;
}
/* 卡片 Hover 状态 */
.hnui-calendar-card-cell:hover {
background-color: var(--hnui-neutral-color-7);
}
.hnui-calendar-card-cell-selected:hover {
background-color: var(--hnui-brand-color-5);
}
/* ==================== 年份面板 ==================== */
/* 年份面板容器 */
.hnui-calendar-year-panel {
width: 420px;
background-color: transparent;
border: 1px solid var(--hnui-border-color);
border-radius: 6px;
padding: 16px;
box-sizing: border-box;
}
/* 年份面板头部 */
.hnui-calendar-year-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
/* 年份面板头部左侧 */
.hnui-calendar-year-header-left {
display: flex;
align-items: center;
gap: 8px;
}
/* 月份网格 */
.hnui-calendar-months {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* 月份单元格 */
.hnui-calendar-month-cell {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s;
}
/* 月份文本 */
.hnui-calendar-month-text {
font-size: 14px;
color: var(--hnui-text-color);
}
/* 月份选中状态 */
.hnui-calendar-month-cell-selected {
background-color: var(--hnui-brand-color9);
}
.hnui-calendar-month-cell-selected .hnui-calendar-month-text {
color: var(--hnui-brand-color-normal);
}
/* 月份 Hover 状态 */
.hnui-calendar-month-cell:hover {
background-color: var(--hnui-neutral-color-7);
}
.hnui-calendar-month-cell-selected:hover {
background-color: var(--hnui-brand-color9);
}通用日历面板
完整的日历面板，带有年月选择、模式切换和日期展示功能。
2022 年
8 月
一
二
三
四
五
六
七
27
28
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
28
29
30
31
1
2
3
4
5
6
查看代码
html
<div class="hnui-calendar-full">
<!-- 日历头部 -->
<div class="hnui-calendar-header">
<div class="hnui-calendar-header-left">
<div class="hnui-calendar-year-select">
2022 年
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
<div class="hnui-calendar-month-select">
8 月
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
</div>
<div class="hnui-calendar-header-right">
<div class="hnui-calendar-mode-switch">
<button class="hnui-calendar-mode-btn">月</button>
<button class="hnui-calendar-mode-btn hnui-calendar-mode-btn-selected">
年
</button>
</div>
<button type="button" class="hnui-btn hnui-btn-primary">默认标签</button>
<button type="button" class="hnui-btn hnui-btn-primary">今天</button>
</div>
</div>
<!-- 日历主体 -->
<div class="hnui-calendar-body">
<!-- 星期头部 -->
<div class="hnui-calendar-weekdays">
<div class="hnui-calendar-weekday">一</div>
<div class="hnui-calendar-weekday">二</div>
<div class="hnui-calendar-weekday">三</div>
<div class="hnui-calendar-weekday">四</div>
<div class="hnui-calendar-weekday">五</div>
<div class="hnui-calendar-weekday">六</div>
<div class="hnui-calendar-weekday">七</div>
</div>
<!-- 日期网格 -->
<div class="hnui-calendar-dates">
<!-- 第一周 -->
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">27</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">28</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">29</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">30</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">31</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">1</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">2</div>
</div>
<!-- 第二周 -->
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">3</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">4</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">5</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">6</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">7</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">8</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">9</div>
</div>
<!-- 第三周 -->
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">10</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">11</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">12</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-selected">
<div class="hnui-calendar-date">13</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">14</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">15</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">16</div>
</div>
<!-- 第四周 -->
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">17</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">18</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">19</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">20</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">21</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">22</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">23</div>
</div>
<!-- 第五周 -->
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">24</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">25</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">26</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">27</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">28</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">29</div>
</div>
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">30</div>
</div>
<!-- 第六周 -->
<div class="hnui-calendar-cell">
<div class="hnui-calendar-date">31</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">1</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">2</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">3</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">4</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">5</div>
</div>
<div class="hnui-calendar-cell hnui-calendar-cell-not-current-month">
<div class="hnui-calendar-date">6</div>
</div>
</div>
</div>
</div>卡片日历面板
紧凑的卡片式日历面板，适合在弹窗或侧边栏中使用。
2022 年
8 月
Su
Mo
Tu
We
Th
Fr
Sa
25
26
27
28
29
30
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
28
29
30
31
1
2
3
4
5
查看代码
html
<div class="hnui-calendar-card">
<!-- 卡片日历头部 -->
<div class="hnui-calendar-card-header">
<div class="hnui-calendar-card-header-left">
<div class="hnui-calendar-year-select">
2022 年
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
<div class="hnui-calendar-month-select">
8 月
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
</div>
<div class="hnui-calendar-card-header-right">
<button class="hnui-calendar-mode-btn hnui-calendar-mode-btn-selected">月</button>
<button class="hnui-calendar-mode-btn">年</button>
</div>
</div>
<!-- 星期头部 -->
<div class="hnui-calendar-card-weekdays">
<div class="hnui-calendar-card-weekday">Su</div>
<div class="hnui-calendar-card-weekday">Mo</div>
<div class="hnui-calendar-card-weekday">Tu</div>
<div class="hnui-calendar-card-weekday">We</div>
<div class="hnui-calendar-card-weekday">Th</div>
<div class="hnui-calendar-card-weekday">Fr</div>
<div class="hnui-calendar-card-weekday">Sa</div>
</div>
<!-- 日期网格 -->
<div class="hnui-calendar-card-dates">
<!-- 第一周 -->
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">25</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">26</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">27</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">28</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">29</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">30</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">1</div>
</div>
<!-- 第二周 -->
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">2</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">3</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">4</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">5</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">6</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">7</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">8</div>
</div>
<!-- 第三周 -->
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">9</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">10</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">11</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">12</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">13</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">14</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">15</div>
</div>
<!-- 第四周 -->
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">16</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">17</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">18</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">19</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-selected">
<div class="hnui-calendar-card-date">20</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">21</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">22</div>
</div>
<!-- 第五周 -->
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">23</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">24</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">25</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">26</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">27</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">28</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">29</div>
</div>
<!-- 第六周 -->
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">30</div>
</div>
<div class="hnui-calendar-card-cell">
<div class="hnui-calendar-card-date">31</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">1</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">2</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">3</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">4</div>
</div>
<div class="hnui-calendar-card-cell hnui-calendar-card-cell-not-current-month">
<div class="hnui-calendar-card-date">5</div>
</div>
</div>
</div>卡片日历面板-年份面板
年份面板视图，用于选择月份。
2022 年
8 月
1 月
2 月
3 月
4 月
5 月
6 月
7 月
8 月
9 月
10 月
11 月
12 月
查看代码
html
<div class="hnui-calendar-year-panel">
<!-- 年份面板头部 -->
<div class="hnui-calendar-year-header">
<div class="hnui-calendar-year-header-left">
<div class="hnui-calendar-year-select">
2022 年
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
<div class="hnui-calendar-month-select">
8 月
<i class="hnui-icon hnui-icon-chevron-down"></i>
</div>
</div>
<div class="hnui-calendar-card-header-right">
<button class="hnui-calendar-mode-btn">月</button>
<button class="hnui-calendar-mode-btn hnui-calendar-mode-btn-selected">年</button>
</div>
</div>
<!-- 月份网格 -->
<div class="hnui-calendar-months">
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">1 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">2 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">3 月</div>
</div>
<div class="hnui-calendar-month-cell hnui-calendar-month-cell-selected">
<div class="hnui-calendar-month-text">4 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">5 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">6 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">7 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">8 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">9 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">10 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">11 月</div>
</div>
<div class="hnui-calendar-month-cell">
<div class="hnui-calendar-month-text">12 月</div>
</div>
</div>
</div>