blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
src/calendar
components
Month.js
index.less
test/__snapshots__
demo.spec.js.snapindex.spec.js.snap

15
src/calendar/components/Month.js

@ -170,7 +170,7 @@ export default createComponent({
genDays() { genDays() {
if (this.visible) { if (this.visible) {
return ( return (
<div ref="days" class={bem('days')}> <div ref="days" role="grid" class={bem('days')}>
{this.genMark()} {this.genMark()}
{this.days.map(this.genDay)} {this.days.map(this.genDay)}
</div> </div>
@ -183,9 +183,10 @@ export default createComponent({
genDay(item, index) { genDay(item, index) {
const { type, topInfo, bottomInfo } = item; const { type, topInfo, bottomInfo } = item;
const style = this.getDayStyle(type, index); const style = this.getDayStyle(type, index);
const disabled = type === 'disabled';
const onClick = () => { const onClick = () => {
if (type !== 'disabled') { if (!disabled) {
this.$emit('click', item); this.$emit('click', item);
} }
}; };
@ -198,7 +199,13 @@ export default createComponent({
if (type === 'selected') { if (type === 'selected') {
return ( 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 }}> <div class={bem('selected-day')} style={{ background: this.color }}>
{TopInfo} {TopInfo}
{item.text} {item.text}
@ -210,8 +217,10 @@ export default createComponent({
return ( return (
<div <div
role="gridcell"
style={style} style={style}
class={[bem('day', [type]), item.className]} class={[bem('day', [type]), item.className]}
tabindex={disabled ? null : -1}
onClick={onClick} onClick={onClick}
> >
{TopInfo} {TopInfo}

2
src/calendar/index.less

@ -18,7 +18,7 @@
} }
.van-popup__close-icon { .van-popup__close-icon {
top: 13px; top: 11px;
} }
} }

188
src/calendar/test/__snapshots__/demo.spec.js.snap

@ -57,113 +57,113 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 320px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 0%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day"> <div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day">10</div>
</div> </div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div> <div role="gridcell" tabindex="-1" 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">29</div>
<div class="van-calendar__day van-calendar__day">30</div> <div role="gridcell" tabindex="-1" 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">31</div>
</div> </div>
</div> </div>
<div class="van-calendar__month" style="padding-bottom: 320px;"> <div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年2月</div> <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__month-mark">2</div>
<div 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" style="margin-left: 42.857142857142854%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day">21</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">21</div>
<div class="van-calendar__day van-calendar__day">22</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">22</div>
<div class="van-calendar__day van-calendar__day">23</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">23</div>
<div class="van-calendar__day van-calendar__day">24</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">24</div>
<div class="van-calendar__day van-calendar__day">25</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">25</div>
<div class="van-calendar__day van-calendar__day">26</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">26</div>
<div class="van-calendar__day van-calendar__day">27</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">27</div>
<div class="van-calendar__day van-calendar__day">28</div> <div role="gridcell" tabindex="-1" 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">29</div>
</div> </div>
</div> </div>
<div class="van-calendar__month" style="padding-bottom: 320px;"> <div class="van-calendar__month" style="padding-bottom: 320px;">
<div class="van-calendar__month-title">2012年3月</div> <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__month-mark">3</div>
<div 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" style="margin-left: 57.142857142857146%;">1</div>
<div class="van-calendar__day van-calendar__day">2</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">2</div>
<div class="van-calendar__day van-calendar__day">3</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">3</div>
<div class="van-calendar__day van-calendar__day">4</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">4</div>
<div class="van-calendar__day van-calendar__day">5</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">5</div>
<div class="van-calendar__day van-calendar__day">6</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">6</div>
<div class="van-calendar__day van-calendar__day">7</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">7</div>
<div class="van-calendar__day van-calendar__day">8</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">8</div>
<div class="van-calendar__day van-calendar__day">9</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">9</div>
<div class="van-calendar__day van-calendar__day">10</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">10</div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>

384
src/calendar/test/__snapshots__/index.spec.js.snap

@ -9,41 +9,41 @@ exports[`color prop when type is range 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" 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" tabindex="-1" class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
</div> </div>
<div 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;">11</div>
<div 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;">12</div>
<div 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;">13</div>
<div 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;">14</div>
<div 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;">15</div>
<div 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;">16</div>
<div 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;">17</div>
<div 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;">18</div>
<div 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--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--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
</div> </div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>
@ -60,41 +60,41 @@ exports[`color prop when type is single 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day"> <div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day" style="background: blue;">10</div> <div class="van-calendar__selected-day" style="background: blue;">10</div>
</div> </div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>
@ -111,44 +111,44 @@ exports[`formatter prop 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day"> <div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day">10</div>
</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 class="van-calendar__top-info">Top Info</div>11
</div> </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>
<div class="van-calendar__day van-calendar__day">Text</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">Text</div>
<div class="van-calendar__day van-calendar__day test">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day test">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>
@ -168,41 +168,41 @@ exports[`popup wrapper 2`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day"> <div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day">10</div>
</div> </div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>
@ -221,41 +221,41 @@ exports[`row-height prop 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 300px;"> <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__month-mark">1</div>
<div 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="margin-left: 71.42857142857143%; height: 50px;">1</div>
<div 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;">2</div>
<div 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;">3</div>
<div 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;">4</div>
<div 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;">5</div>
<div 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;">6</div>
<div 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;">7</div>
<div 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;">8</div>
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
<div class="van-calendar__day" style="height: 50px;"> <div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day">10</div>
</div> </div>
<div 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;">11</div>
<div 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;">12</div>
<div 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;">13</div>
<div 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;">14</div>
<div 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;">15</div>
<div 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;">16</div>
<div 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;">17</div>
<div 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;">18</div>
<div 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;">19</div>
<div class="van-calendar__day van-calendar__day" style="height: 50px;">20</div> <div role="gridcell" tabindex="-1" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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 role="gridcell" 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" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
</div> </div>
</div> </div>
</div> </div>
@ -272,41 +272,41 @@ exports[`title & footer slot 1`] = `
</div> </div>
<div class="van-calendar__body"> <div class="van-calendar__body">
<div class="van-calendar__month" style="padding-bottom: 384px;"> <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__month-mark">1</div>
<div 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" style="margin-left: 71.42857142857143%;">1</div>
<div class="van-calendar__day van-calendar__day--disabled">2</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
<div class="van-calendar__day van-calendar__day--disabled">3</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
<div class="van-calendar__day van-calendar__day--disabled">4</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
<div class="van-calendar__day van-calendar__day--disabled">5</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
<div class="van-calendar__day van-calendar__day--disabled">6</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
<div class="van-calendar__day van-calendar__day--disabled">7</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
<div class="van-calendar__day van-calendar__day--disabled">8</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
<div class="van-calendar__day van-calendar__day--disabled">9</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
<div class="van-calendar__day"> <div role="gridcell" tabindex="-1" class="van-calendar__day">
<div class="van-calendar__selected-day">10</div> <div class="van-calendar__selected-day">10</div>
</div> </div>
<div class="van-calendar__day van-calendar__day">11</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">11</div>
<div class="van-calendar__day van-calendar__day">12</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">12</div>
<div class="van-calendar__day van-calendar__day">13</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">13</div>
<div class="van-calendar__day van-calendar__day">14</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">14</div>
<div class="van-calendar__day van-calendar__day">15</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">15</div>
<div class="van-calendar__day van-calendar__day">16</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">16</div>
<div class="van-calendar__day van-calendar__day">17</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">17</div>
<div class="van-calendar__day van-calendar__day">18</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">18</div>
<div class="van-calendar__day van-calendar__day">19</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">19</div>
<div class="van-calendar__day van-calendar__day">20</div> <div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day">20</div>
<div class="van-calendar__day van-calendar__day--disabled">21</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
<div class="van-calendar__day van-calendar__day--disabled">22</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
<div class="van-calendar__day van-calendar__day--disabled">23</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
<div class="van-calendar__day van-calendar__day--disabled">24</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
<div class="van-calendar__day van-calendar__day--disabled">25</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
<div class="van-calendar__day van-calendar__day--disabled">26</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
<div class="van-calendar__day van-calendar__day--disabled">27</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
<div class="van-calendar__day van-calendar__day--disabled">28</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
<div class="van-calendar__day van-calendar__day--disabled">29</div> <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
<div class="van-calendar__day van-calendar__day--disabled">30</div> <div role="gridcell" 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">31</div>
</div> </div>
</div> </div>
</div> </div>