Skip to content

Commit

Permalink
test(calendar): add infinite calendar with long month names test
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes @joneff
TeyaVes authored and joneff committed Feb 14, 2022
1 parent 46b6883 commit ff737ea
Show file tree
Hide file tree
Showing 2 changed files with 458 additions and 38 deletions.
248 changes: 229 additions & 19 deletions tests/visual/src/misc/calendar-infinite-rtl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,16 @@

<style>
#test-area {
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(2, 1fr);
}
</style>
</head>
<body class="k-body">

<div id="test-area" class="grid">


<span class="col-3">infinite calendar month</span>
<span class="col-3">infinite calendar year</span>

<section class="col-3">
<section>
<div>infinite calendar month</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -236,7 +233,223 @@
</kendo-calendar>
</section>

<section class="col-3">
<section>
<div>infinite calendar with long month names</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
<kendo-virtualization class="k-content k-scrollable">
<ul class="k-reset">
<li><span>de nov.</span></li>
<li><span>de des.</span></li>
<li><span class="k-calendar-navigation-marker">2018</span></li>
<li><span>de febr.</span></li>
<li><span>de març</span></li>
<li><span>d’abr.</span></li>
<li><span>de maig</span></li>
<li><span>de juny</span></li>
<li><span>de jul.</span></li>
<li><span>d’ag.</span></li>
<li><span>de set.</span></li>
<li><span>d’oct.</span></li>
<li><span>de nov.</span></li>
<li><span>de des.</span></li>
<li><span class="k-calendar-navigation-marker">2019</span></li>
<li><span>de febr.</span></li>
<li><span>de març</span></li>
<li><span>d’abr.</span></li>
<li><span>de maig</span></li>
<li><span>de juny</span></li>
<li><span>de jul.</span></li>
<li><span>d’ag.</span></li>
<li><span>de set.</span></li>
<li><span>d’oct.</span></li>
<li><span>de nov.</span></li>
<li><span>de des.</span></li>
<li><span class="k-calendar-navigation-marker">2020</span></li>
<li><span>de febr.</span></li>
<li><span>de març</span></li>
<li><span>d’abr.</span></li>
</ul>
<!-- virtualizaton scrollbar -->
<div class="k-scrollable-placeholder" style="height: 1000px;"></div>
</kendo-virtualization>
</kendo-calendar-navigation>
<kendo-calendar-viewlist class="k-calendar-view k-calendar-monthview k-vstack">
<kendo-calendar-header class="k-calendar-header k-hstack">
<button is="Button" fillMode="flat" class="k-calendar-title k-title">d’abril 2018</button>
<span class="k-spacer"></span>
<span class="k-calendar-nav k-hstack">
<span class="k-nav-today">Today</span>
</span>
</kendo-calendar-header>
<table class="k-calendar-table k-calendar-weekdays">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead class="k-calendar-thead">
<tr class="k-calendar-tr">
<th class="k-calendar-th">dg.</th>
<th class="k-calendar-th">dl.</th>
<th class="k-calendar-th">dt.</th>
<th class="k-calendar-th">dc.</th>
<th class="k-calendar-th">dj.</th>
<th class="k-calendar-th">dv.</th>
<th class="k-calendar-th">ds.</th>
</tr>
</thead>
</table>
<kendo-virtualization class="k-content k-scrollable k-flex">
<table class="k-calendar-table">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<tbody class="k-calendar-tbody">
<tr class="k-calendar-tr">
<th class="k-calendar-caption" scope="col" colspan="7">d’abril 2018</th>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-weekend">
<span class="k-link">1</span>
</td>
<td class="k-calendar-td">
<span class="k-link">2</span>
</td>
<td class="k-calendar-td k-today">
<span class="k-link">3</span>
</td>
<td class="k-calendar-td k-state-hover">
<span class="k-link">4</span>
</td>
<td class="k-calendar-td k-state-focused">
<span class="k-link">5</span>
</td>
<td class="k-calendar-td k-state-selected">
<span class="k-link">6</span>
</td>
<td class="k-calendar-td k-weekend">
<span class="k-link">7</span>
</td>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-weekend">
<span class="k-link">8</span>
</td>
<td class="k-calendar-td">
<span class="k-link">9</span>
</td>
<td class="k-calendar-td">
<span class="k-link">10</span>
</td>
<td class="k-calendar-td k-state-hover k-state-focused">
<span class="k-link">11</span>
</td>
<td class="k-calendar-td k-state-selected k-state-focused">
<span class="k-link">12</span>
</td>
<td class="k-calendar-td k-state-selected k-state-hover">
<span class="k-link">13</span>
</td>
<td class="k-calendar-td k-weekend">
<span class="k-link">14</span>
</td>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-weekend">
<span class="k-link">15</span>
</td>
<td class="k-calendar-td">
<span class="k-link">16</span>
</td>
<td class="k-calendar-td">
<span class="k-link">17</span>
</td>
<td class="k-calendar-td">
<span class="k-link">18</span>
</td>
<td class="k-calendar-td">
<span class="k-link">19</span>
</td>
<td class="k-calendar-td">
<span class="k-link">20</span>
</td>
<td class="k-calendar-td k-weekend">
<span class="k-link">21</span>
</td>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-weekend">
<span class="k-link">22</span>
</td>
<td class="k-calendar-td">
<span class="k-link">23</span>
</td>
<td class="k-calendar-td">
<span class="k-link">24</span>
</td>
<td class="k-calendar-td">
<span class="k-link">25</span>
</td>
<td class="k-calendar-td">
<span class="k-link">26</span>
</td>
<td class="k-calendar-td">
<span class="k-link">27</span>
</td>
<td class="k-calendar-td k-weekend">
<span class="k-link">28</span>
</td>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-weekend">
<span class="k-link">29</span>
</td>
<td class="k-calendar-td">
<span class="k-link">30</span>
</td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
</tr>
<tr class="k-calendar-tr">
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
<td class="k-calendar-td k-other-month"></td>
</tr>
</tbody>
<tbody class="k-calendar-tbody">
<tr class="k-calendar-tr">
<th class="k-calendar-caption" scope="col" colspan="7">May 2018</th>
</tr>
<!-- content omitted for brevity-->
</tbody>
</table>
<div class="k-scrollable-placeholder" style="height: 1000px;"></div>
</kendo-virtualization>
</kendo-calendar-viewlist>
</kendo-calendar>
</section>

<section>
<div>infinite calendar year</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -393,11 +606,8 @@
</kendo-calendar>
</section>


<span class="col-3">infinite calendar decade</span>
<span class="col-3">infinite calendar century</span>

<section class="col-3">
<section>
<div>infinite calendar decade</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -530,7 +740,8 @@
</kendo-calendar>
</section>

<section class="col-3">
<section>
<div>infinite calendar century</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -651,10 +862,8 @@
</kendo-calendar>
</section>

<span class="col-3">infinite calendar empty cells</span>
<span class="col-3">infinite calendar - week number column</span>

<section class="col-3">
<section>
<div>infinite calendar empty cells</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -746,7 +955,8 @@
</kendo-calendar>
</section>

<section class="col-3">
<section>
<div>infinite calendar - week number column</div>
<kendo-calendar class="k-widget k-calendar k-calendar-infinite k-week-number" dir="rtl">
<kendo-calendar-navigation class="k-calendar-navigation">
<span class="k-calendar-navigation-highlight"></span>
Expand Down Expand Up @@ -1471,4 +1681,4 @@
</div>

</body>
</html>
</html>

0 comments on commit ff737ea

Please sign in to comment.