alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Calendar): improve accessibility

Browse Source
This commit is contained in:
陈嘉涵
2020-02-06 11:52:17 +08:00
parent 660b039951
commit 2124cc5261
4 changed files with 299 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/components/Month.js
+12 -3
View File
@@ -170,7 +170,7 @@ export default createComponent({
genDays() {
if (this.visible) {
return (
<div ref="days" class={bem('days')}>
<div ref="days" role="grid" class={bem('days')}>
{this.genMark()}
{this.days.map(this.genDay)}
</div>
@@ -183,9 +183,10 @@ export default createComponent({
genDay(item, index) {
const { type, topInfo, bottomInfo } = item;
const style = this.getDayStyle(type, index);
const disabled = type === 'disabled';
const onClick = () => {
if (type !== 'disabled') {
if (!disabled) {
this.$emit('click', item);
}
};
@@ -198,7 +199,13 @@ export default createComponent({
if (type === 'selected') {
return (
<div style={style} class={bem('day')} onClick={onClick}>
<div
role="gridcell"
style={style}
class={bem('day')}
tabindex={disabled ? null : -1}
onClick={onClick}
>
<div class={bem('selected-day')} style={{ background: this.color }}>
{TopInfo}
{item.text}
@@ -210,8 +217,10 @@ export default createComponent({
return (
<div
role="gridcell"
style={style}
class={[bem('day', [type]), item.className]}
tabindex={disabled ? null : -1}
onClick={onClick}
>
{TopInfo}
src/calendar/index.less
+1 -1
View File
@@ -18,7 +18,7 @@
}
.van-popup__close-icon {
top: 13px;
top: 11px;
}
}
src/calendar/test/__snapshots__/demo.spec.js.snap
+94 -94
View File
@@ -57,113 +57,113 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div>
<div class="van-calendar__day van-calendar__day">29</div>
<div class="van-calendar__day van-calendar__day">30</div>
<div class="van-calendar__day van-calendar__day">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">28</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">29</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">30</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">31</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年2月</div>
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">2</div>
<div class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div>
<div class="van-calendar__day van-calendar__day">29</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">28</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">29</div>
</div>
</div>
<div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年3月</div>
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">3</div>
<div class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>
src/calendar/test/__snapshots__/index.spec.js.snap
+192 -192
View File
@@ -9,41 +9,41 @@ exports[`color prop when type is range 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
<div class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>
@@ -60,41 +60,41 @@ exports[`color prop when type is single 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day" style="background: blue;">10</div>
</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>
@@ -111,44 +111,44 @@ exports[`formatter prop 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day">
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">
<div class="van-calendar__top-info">Top Info</div>11
</div>
<div class="van-calendar__day van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
</div>
<div class="van-calendar__day van-calendar__day">Text</div>
<div class="van-calendar__day van-calendar__day test">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">Text</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day test">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>
@@ -168,41 +168,41 @@ exports[`popup wrapper 2`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>
@@ -221,41 +221,41 @@ exports[`row-height prop 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 300px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
<div class="van-calendar__day" style="height: 50px;">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">11</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">12</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">13</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">14</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">15</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">16</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">17</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">18</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">19</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">20</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day" style="height: 50px;">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
</div>
</div>
</div>
@@ -272,41 +272,41 @@ exports[`title & footer slot 1`] = `
</div>
<div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;">
<div class="van-calendar__days">
<div role="grid" class="van-calendar__days">
<div class="van-calendar__month-mark">1</div>
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day">
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div>
</div>
<div class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div>
<div class="van-calendar__day van-calendar__day--disabled">31</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
</div>
</div>
</div>